Closed Memogcia closed 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!
@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 @marcosAlvaradoHola @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!
@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
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.
Algun ejemplo de como integrarlo con Angular
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(); }
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?
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!