Cargo con tarjeta tokenizada
A todos nos gusta recibir pagos, es por ello empezaremos con un guía para ver la forma de hacerlo.
Esta guía hace uso de la librería de Openpay.js, para enviar la información de la tarjeta directamente a Openpay. Usando esta librería aparte de ser la forma más sencilla de guardar una tarjeta permite minimizar el alcance de una certificación PCI Compliance.
Flujo para realizar cargos a tarjeta:
Pasos:
- Implementación del sistema antifraude generando un “device_session_id”
- Tokenización de la tarjeta de crédito o débito usando la librería Openpay.js
- Toda la información de la compra se envía a tu servidor
- Desde tu servidor se crea el cargo en Openpay
- Openpay envía la instrucción de cargo al banco emisor y regresa la respuesta
Creación del formulario
Para pedirle al usuario la información de la tarjeta y poder realizar los pasos 1 y 2 es necesario tener un formulario indicándole al cliente las tarjetas soportadas y que el pago será vía Openpay.
Código del formulario.
El HTML completo del formulario lo puedes descargar aquí
Es muy importante que los campos en donde se va a introducir la información de la tarjeta tenga el atributo data_openpay_card ya que esto permitirá a la librería de Openpay encontrar la información.
Observa que para los datos de la tarjeta no se está ocupando el atributo name esto para que al momento de enviar el formulario a tu servidor los datos de la tarjeta no viajen en la petición ya que sólo los vamos a ocupar para crear el token.
En el formulario de ejemplo anterior no se incluyen los campos “amount” y “description” pero deberan incluirse al hacer el submit al servidor.
Sistema antifraude (Paso 1)
Con el siguiente código se cargan las librerías necesarios para la generación del id de dispositivo:
Con el siguiente código se inicializa el valor para el device_session_id:
El parámetro payment-form, recibe el id del formulario que contiene la información del cargo que se enviara a tu servidor. Indica a la librería que en ese formulario es donde se va a agregar un campo oculto con el valor del device_session_id.
El parámetro deviceIdHiddenFieldName, recibe el nombre del campo oculto donde se asignara el device_session_id. Este dato es importante si piensas recuperar el valor del hidden y enviar mediante un submit.
Tokenización y envío de datos (Paso 2 y 3)
Una vez que tenemos nuestro formulario creado, vamos a programar que en el botón de enviar se cree un token utilizando la librería Openpay.js.
Primero agregamos al head el archivo de Openpay.js y de JQuery:
Luego asignamos a la librería de Openpay nuestro merchant-id y nuestra llave pública (public-key):
Y por último atrapamos el evento de clic del botón “Pagar” para que en lugar de que haga el submit del formulario realice la función “tokenize” de la tarjeta:
Como puedes ver estamos pasando como parámetro el nombre del formulario creado, esto para que la librería obtengan los datos de la tarjeta y haga la petición a Openpay.
Si todo sale bien se llamará el método success_callback en el cual asignaremos el valor id del token creado al campo token_id y enviaremos los datos al servidor:
Si existe un problema en la llamada mostramos el error en un alert:
Para mayor referencia del uso de la librería consulta la página de Openpay.js
Crear cargo (Paso 4 y 5)
Ahora sólo resta hacer el cargo desde tu servidor, para esto crearemos una instancia de Openpay con el merchant-id y el private-key y luego con los valores del formulario haremos el cargo:
¡¡Listo!! Ya tenemos un cargo creado con tarjeta.
Si existiera un error recibiríamos una excepción la cual debemos capturar y manejar, para mas información consulta la seccion de errores
Notas:
- Los campos amount, currency, description, etc.. que no están en el formulario de ejemplo, son datos propios de tu aplicación que deben haberse obtenido antes del formulario de pago.
- Si deseas ver como realizar el procedimiento en otro lenguaje consulta nuestra sección de integración.
- El código HTML completo se encuentra aquí. (La página no funciona completamente, deberás descargarla y realizar la implementación del POST en tu servidor).
- Asegúrate que tu integración cumple con los requisitos de compatibilidad de versiones más detalles
- Puedes simular diferentes resultados usando las tarjetas de Pruebas
- Implementa las Notificaciones para conocer el estado de los pagos en tiempo real
