open-pay / openpay-js

Openpay Javascript bindings
Apache License 2.0
24 stars 28 forks source link

Soporte para Angular #13

Closed Memogcia closed 6 years ago

Memogcia commented 6 years ago

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!

marcosAlvarado commented 6 years ago

Que tal @Memogcia!

Para que puedas utilizar la Openpay con angular 5 puedes hacer lo siguiente:

1.- Almacenar las libraries en la carpeta "/src/assers/js/" 2.-Agregar las dependencias al archivo .angular-cli.json de la siguiente forma:

{ ........ "apps": [ { ........... "scripts": [ "./assets/js/jquery.min.js", "./assets/js/openpay.v1.min.js", "./assets/js/openpay-data.v1.min.js" ], ........... } ],....... } 3.- En el archivo typings.d.ts declarar la variable para de openpay: ...... declare var OpenPay: any; ......

De esta forma puedes utilizar Openpay.js de forma global en tu app

Saludos!

Memogcia commented 6 years ago

@marcosAlvarado Muchas gracias por tu ayuda! En ionic 3 no tenemos el archivo .angular-cli.json, pero ¡ya pude hacerlo funcionar!

Agregué estas 3 lineas en el archivo index.html

`

` Que son los tres archivos que requiere OpenPay para poder funcionar, posteriormente agregué esta línea; `declare var OpenPay: any;` en el archivo app.componet.ts Y con eso ya se pudo hacer referencia a la vairable OpenPay Muchas gracias por tu ayuda @marcosAlvarado
InvenceSaltillo commented 6 years ago

Hola @Memogcia puedes explicar un poco mas como lo lograste, estoy en el mismo tema con Ionic 3 y no logro hacer que funcione. Gracias y Saludos!

Memogcia commented 6 years ago

@InvenceSaltillo Disculpa la demora, tienes que agregar 3 líneas de script en el archivo index.html, para eso tambíen tienes que descargar los archivos .js para que siempre vivan en la app y si se cae alguno de ellos pueda seguir funcionando tu aplicación. Como dije arriba tienes que agregar en app.component.ts: declare var OpenPay: any; Y listo, con eso ya puedes usar la variable de OpenPay en la página que quieras como si fuera código javascript

juanframart2011 commented 5 years ago

Hola @Memogcia en que parte del app.component, porque mira lo declaro afuera del export y luego lo quiero usar en otro componente y me marca error. espero y me puedas ayudar.

maraleronava commented 4 years ago

Algun ejemplo de como integrarlo con Angular

ppwicho commented 1 year ago

De esta manera te evitas cargar el script en tu entorno global de la aplicación:

// Exnternal JS(openpay.js) functions declaration declare const OpenPay:any;

export class CardsComponent implements OnInit { openpayjs: HTMLScriptElement; openpayjs_antifraud : HTMLScriptElement;

deviceSessionId = ''; openPayPublicKey = environment.openPayPublicKey openPayID = environment.openPayID openPaySandboxMode = environment.openPaySandboxMode

constructor( ) { this.openpayjs = document.createElement("script"); this.openpayjs.src = "./assets/vendor/openpay/js.openpay.mx_openpay.v1.min.js"; document.head.appendChild(this.openpayjs); this.openpayjs_antifraud = document.createElement("script"); this.openpayjs_antifraud.src = "./assets/vendor/openpay/js.openpay.mx_openpay-data.v1.min.js"; document.head.appendChild(this.openpayjs_antifraud); }

openPayDeviceId(){ OpenPay.setId(this.openPayID); OpenPay.setApiKey(this.openPayPublicKey); OpenPay.setSandboxMode(this.openPaySandboxMode); this.deviceSessionId=OpenPay.deviceData.setup(); console.log("OpenPay SandboxMode:",OpenPay.getSandboxMode()); console.log("Device ID:",this.deviceSessionId); } // llamar este método cuando haga el cliente submit: createTokenOpenPay(event: Event){ event.preventDefault(); if(this.formCard.valid){ this.openPayDeviceId(); }

vesvello commented 3 months ago

He seguido los pasos y he conseguido obtener el devide id:

Device ID: GZF5uLGwqWKqVs99eANl0S4PEj7XfftJ

Sin embargo no he podido tokenizar la tarjeta.

Es mucha molestia si me pudieras compartir un ejemplo de integracion?