2

Estoy intentando hacer funcionar una plataforma de pagos haciendo uso de addonpayments, pero me estoy encontrando con un problema entre la estructura de vue y las funciones de el rxp-js de la plataforma.

Básicamente estoy haciendo primero una llamada a la API para obtener el JSON con los datos del pago, con la respuesta (siempre y cuando sea correcta) abro el lightbox de addonpayments para realizar el pago por HPP haciendo uso de el ejemplo que hay disponible en los archivos de rxp-js de callback, sin embargo dentro de la función del lightbox me es imposible llamar a la función que terminaría el proceso de pago "this.setOrder", pues dentro del contexto "this" es undefined, me gustaría saber si hay alguna manera en la que se podría pasar la función de vue a la función para hacer uso de ella.

Aqui el código:

const { data, meta } = Vue.axios
      .post(this.apiDomain + "api/Payment", params)
      .then((response) => {
                                    
            if (response.status != "200") {

                this.hiddenAlert = false;
                this.loading = true;
                this.errors = [];
                this.errors.push("Ha ocurrido un error en la transacción.");

            } else {
                var res = JSON.parse(response.data);

                RealexHpp.setHppUrl("https://hpp.sandbox.addonpayments.com/pay");

                //Payment Lightbox
                RealexHpp.lightbox.init("autoload",
                     function (answer, close) {

                         if (answer.RESULT == "00") {//success
                              close();
                              this.setOrder();
                         } else {//error
                              close();
                              //TODO devolver mensaje de error
                              return false;
                         }
                     },
                     res);

               //this.setOrder();

            }

     });
2
  • interesante problema.. el tema es que this.setOrder no esta dentro de vue, si no dentro de la funcion init... ahora, esa funcion tiene un return (por el return false), no podrias esperar a esa funcion, y cuando termine verificar el return (y agregar un return true?)
    – gbianchi
    el 28 abr. 2021 a las 3:04
  • 1
    Una pregunta, ¿No el contexto this se pierde en esta parte .then((response) =>? Lo comento únicamente por la parte que menciona que this no está definido el 28 abr. 2021 a las 5:18

1 respuesta 1

0

Cambia tu función en .then()

.then( (response) => { /* code */ } ) )

Por

.then (function (response) { /* code */ })

Razón

En la documentación de Vue se nos dice:

Don’t use arrow functions on an options property or callback, such as [...]. Since an arrow function doesn’t have a this, this will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.

Y esto es por la naturaleza de Javascript, recordemos que Vue juega mucho con los objetos y pasan cosas así con this:

const obj = {
  msg: 'Hola ',
  msgArrowFunc: () => this.msg + ' mundo',
  msgAnonFunc: function() {return this.msg + ' mundo'}
}

console.log(obj.msgArrowFunc()) // "undefined mundo"
console.log(obj.msgAnonFunc()) // "Hola mundo"

1
  • El asunto es que dentro de la función donde está ubicado el axios no tengo problema, el this funciona como es de esperar, el caso está en el .init que está en RealexHpp.lightbox que es una función de rxp-js, una librería de addonpayments que saca un modal para autentificación de tarjetas bancarias, que es de donde quiero obtener una respuesta (en este caso estaba probando con return true y false, pero sin éxito) el 28 abr. 2021 a las 22:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.