open-pay / openpay-js Goto Github PK

Todo marchaba bien, hasta ayer que apareció este error. Las modificaciones al software no corresponden en nada a openpay, sólo se cambiaron unos métodos de validación del usuario de manera síncrona (angular localStorage) a asíncrona (ionic-storage)

Ahora, al ejecutar este código marca el error ya comentado:

ngOnInit() {
    this.storageService.getItem('userData').then((userData) => {
      this.userData = JSON.parse(userData);
    });

    var form = (<HTMLFormElement>document.getElementById('payment-form'));

    OpenPay.setId('mptiot2sfxxxxxxxxxxx');
    OpenPay.setApiKey('pk_7dccea883598xxxxxxxxxxxxxxxxx');
    this.deviceSessionId = OpenPay.deviceData.setup("payment-form", "deviceIdHiddenFieldName");
    console.log(this.deviceSessionId);
    
    form.addEventListener('submit', event => {
      event.preventDefault();
      console.log(event);
      // $("#pay-button").prop("disabled", true);
      this.presentLoadingWithOptions();
      OpenPay.token.extractFormAndCreate('payment-form', success_callbak, error_callbak);
    });

    var success_callbak = (response) => {
      console.log(response);
      this.token_id = response.data.id;
      var token_input = (<HTMLInputElement>document.getElementById('token_id'));
      token_input.setAttribute('value', this.token_id);
      console.log(formToJSON(form.elements));
      if (response.data.card.points_card) {
        // Si la tarjeta permite usar puntos, mostrar el cuadro de diálogo
        this.loading.dismiss().then(() => {
          this.presentAlertConfirm();
        });
      } else {
        // De otra forma, realizar el pago inmediatamente
        this.createCardCharge(false);
      }
    };

    var error_callbak = (response) => {
      this.loading.dismiss().then(() => {
        this.presentToastWithOptions(response);
      });
    };

    const formToJSON = elements => [].reduce.call(elements, (data, element) => {

      data[element.name] = element.value;
      return data;

    }, {});

  }

Ambiente: Ionic 4

Ionic:

Ionic CLI : 5.4.11 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.11.5
@angular-devkit/build-angular : 0.803.20
@angular-devkit/schematics : 8.3.20
@angular/cli : 8.3.20
@ionic/angular-toolkit : 2.1.1

Cordova:

Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : android 8.1.0, ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 7 other plugins)

Utility:

cordova-res : 0.6.0 (update available: 0.8.1)
native-run : 0.2.8 (update available: 0.3.0)

System:

Android SDK Tools : 26.1.1 (/Users/xxxxxxxxxxxxxxxxxxxx/Library/Android/sdk)
ios-deploy : 1.10.0
ios-sim : 8.0.2
NodeJS : v12.10.0 (/usr/local/Cellar/node/12.10.0/bin/node)
npm : 6.11.3
OS : macOS Catalina
Xcode : Xcode 11.2.1 Build version 11B500`

The order of operations when setting up the XMLHttpRequest results in an InvalidStateError. The withCredentials flag should be set after the request is opened.

This issue only occurs when connecting to a server running on the local machine.

Hi, Do you have angular 2 support version for this library ?

Después de configurar el id y apiKey para la generación de tokens, veo que la librería OpenPay.js imprime información del estatus de dicho proceso.

Es bien sabido que los logs no afectan a la funcionalidad, pero un código estandarizado no debería lanzar logs, sobretodo cuando se trata de una librería en la que el usuario no desea que esos logs existan.

Mi propuesta es remover tantos logs se puedan en la versión final.

OpenPay.token.extractFormAndCreate(
$('#processCard'),
SuccessCallback,
ErrorCallback);

TypeError: n[fieldName].push is not a function

En npm ya se tiene la biblioteca del servidor (node), por favor, incluyan ésta también en el registro para evitar el uso de shims en webpack o browserify; nada será mejor que npm install --save openpay-js.

El Error:

TypeError: object[fieldName].push is not a function
openpay.v1.js:318:25
openpay.v1.js:332:33
openpay.v1.js:557:27

Solo aparece solo cuando utilizo los campos en el formulario:

data-openpay-card-address="line1"
data-openpay-card-address="line2"
data-openpay-card-address="line3"
data-openpay-card-address="city"
data-openpay-card-address="state"
data-openpay-card-address="country_code"
data-openpay-card-address="postal_code"

Al revisar las lineas de codigo indicadas en https://openpay.s3.amazonaws.com/openpay.v1.js o https://openpay.s3.amazonaws.com/openpay.v1.min.js son las siguientes:

318 object[fieldName].push(inputValue || '');
332 objectAddress = createObject(addressFields, 'data-openpay-card-address');
557 var _params = INSTANCE.extractFormInfo(_form);

El mismo error aparece al usar ambas versiones de la libreria (no min.js o min.js). Al retirar los campos data-openpay-card-address todo funciona correctamente.

Hola estoy intentando consumir un servicio desde POSTMAN pero siempre recibo un error, donde debería o como debería colocar el parametro de mi llave publica?

Este es mi request:

Gracias

Todos los objetos, por ejemplo OpenpayCharge, o OpenpayCard tienen sus propiedades declaradas como protected. No hay ninguna razón válida de diseño para que así sea y hace imposible que herramientas valiosas como json_encode sean utilizadas

Hola, mi problema o inquietud es la siguiente:

Pude generar el device_session_id creando un formulario con los datos requeridos del cliente y de esta manera guardar los datos del cliente y de su tarjeta en nuestra cuenta (merchant) de openpay para ejecutar futuros posibles cargos si el cliente así lo desea (y no me refiero a cargos recurrentes planificados como en una suscripción).

Una vez que los datos del cliente y de la tarjeta han sido guardados en la cuenta (merchant) de openpay, como podemos generar el device_session_id para un nuevo cargo, sin necesidad de mandar al cliente a llenar los datos de la tarjeta en un nuevo formulario??

Todos los ejemplos que tienen en la página de openpay refieren al llenado del formulario suponiendo que el cargo se realiza por primera vez, pero quiero entender como hacerlo en caso de que los datos de la tarjeta ya hayan sido guardados en openpay y se le haya asignado un card_id (source_id).

Update: Básicamente estoy siguiendo el tutorial de la página llamado OneClick satisfactoriamente, el problema es que no hay ejemplos de cargos posteriores.

Hola, buenas tardes.

Quisiera saber, una vez que ya tengo generado el Token, ¿cómo aplico el cargo a la tarjeta? A su vez, ¿cómo sería en el caso de pagar con transferencia a banco o en Tienda? Quizás éste no es el sitio adecuado para esto, ya que no es en sí un issue, sino más bien unas dudas. Si es así, les agradecería me indicaran el lugar y forma adecuado para resolverlas.

Muchas gracias.

Hola que tal, estoy tratando de implementar el metodo para obtener el id de session del dispositivo que se requiere para realizar un cargo.
Estoy utilizando React js, pero he tenido problemas porque si cargo el script que viene en la documentacion que es este: https://resources.openpay.mx/lib/openpay-data-js/1.2.38/openpay-data.v1.min.js
me sale este error

openpay-data.v1.min.js:2 Uncaught ReferenceError: OpenPay is not defined at openpay-data.v1.min.js:2 at openpay-data.v1.min.js:2
si instalo el npm que tienen que es el de openpay-js, al mandar a llamar el paquete me sale este error:
openpay-card.v1.js:950 Uncaught ReferenceError: jQuery is not defined at Object.<anonymous> (openpay-card.v1.js:950) at Object../node_modules/openpay-js/lib/openpay-card.v1.js (openpay-card.v1.js:950) at __webpack_require__ (bootstrap:784) at fn (bootstrap:150) at Module../src/components/userComponents/finalizarCompra.js (ResumenCuenta.js:68) at __webpack_require__ (bootstrap:784) at fn (bootstrap:150) at Module../src/routers/userRoute.js (routerMain.js:136) at __webpack_require__ (bootstrap:784) at fn (bootstrap:150) at Module../src/routers/routerMain.js (adminRoute.js:39) at __webpack_require__ (bootstrap:784) at fn (bootstrap:150) at Module../src/App.js (App.css?4433:45) at __webpack_require__ (bootstrap:784) at fn (bootstrap:150) at Module../src/index.js (index.css?f3f6:45) at __webpack_require__ (bootstrap:784) at fn (bootstrap:150) at Object.1 (slideBar.css?9134:45) at __webpack_require__ (bootstrap:784) at checkDeferredModules (bootstrap:45) at Array.webpackJsonpCallback [as push] (bootstrap:32) at main.chunk.js:1

me pueden ayudar para poder implementar esto.
Gracias , Saludos.

Hola mi problema es el siguiente, estoy integrando la librería js dentro de ionic 5 angular y todo bien hasta el momento de usar el método -> OpenPay.deviceData.setup("formId"); causa error y me dice que OpenPay no esta definido, espero puedan ayudarme

Que tal buenas tardes, quisiera saber si existe una guía de cómo implementar el js con ionic 3 que es angular 5, he visto formas de importar los js pero ninguna me ha funcionado, aquí les paso una forma de hacerlo para ver si alguien mas lo ha intentado en angular.

angular2-import-external-js-file-into-component

Lo que no puedo hacer obtener el device_id al momento de que el cliente pueda crear una tarjeta nueva, ya pude hacer que el cliente cree el mismo un token de la tarjeta, pero solo me falta saber como puedo obtener el device_id.
Muchas gracias!

Buen día, estoy tratando de implementar la api en una aplicación en Nextjs, el unico problema que tengo es a la hora de pedir la variable deviceSessionId, cuando intento correr OpenPay.deviceData.setup("paymentForm") me devuelve el error TypeError: Cannot read properties of undefined (reading 'setup').

Estoy usando el paquete de npm openpay-js.

Por lo que veo el problema es con la librería openpay-data.v1.js, agradecería alguna idea de como solucionar este error.

Saludos.

Considero que deberían agregar soporte para cambiar el idioma de los mensajes de error, ya que estoy trabajando con la librería y todos los mensajes que regresan están en inglés.
Yo no tengo problema, pero a los clientes a los que se les van a mostrar los mensajes podrían no saber el idioma lo cual llevaría a un problema con mi proyecto y su no aceptación.
Lo que hago es tomar el código de error que regresa la librería y ponerle un mensaje de error genérico para el tipo de error. Pero no tengo manera de traducir los mensajes específicos lo cuál necesito hacer.

Hola,
No es un gran problema pero su documentación está mal formateada y afecta un poco la legibilidad.

Hola,

Creo que este es un potencial issue: https://github.com/open-pay/openpay-js/blob/master/lib/openpay.v1.js#L191-L194

Esto porque si el callback falla por cualquier motivo parece que el error estuvo de su lado. Considero que el try no debería involucrar el éxito o error del callback. Me pasé un rato viendo porque era el error y encontré que era mío.

Saludos

Como se puede usar esta libreria con React Native? Existe un paquete npm?

Buenas necesito saber si la librería tiene algún método para validar si una tarjeta es de Crédito o Débito.

Muchas gracias por los comentarios.

A la hora de enviar la petición para crear un token el cual se utiliza para la creación de tarjetas dentro de la plataforma, esta ocurriendo ese error:

Access to XMLHttpRequest at 'https://sandbox-api.openpay.mx/v1/mguqbcge7fgum72iipws/tokens' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

La validación de las fechas de expiración de las tarjetas no es precisamente exacta:

En openpay-data no hay getters ni setters públicos para cambiar el host al que se hacen los requests. Esto hace imposible escribir pruebas de integración con un fake, por lo que las pruebas hacen los requests directo al API de Openpay.

Esto es lento y claramente no ideal.

El punto seria poder hace algo así:

OpenpayDeviceData.sandboxHostname = "fake_address";

---
OpenpayDeviceData.setSandboxHostname("fake_address");

Al momento de configurar el id y el ApiKey para la generación de tokens desde OpenPay JS, veo que se hace el siguiente warning:

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/

Sé que esto no repercute en la funcionalidad de la librería pero ayudaría a mantener un código apegado a los estándares.

Reciban un saludo.