En la guía de cargo con token vimos como realizar un cargo creando primero un token (usando Openpay.js) y luego enviarlo dentro de la petición de cargo. Esto es muy útil para cuando un cliente llega a nuestro sitio y solo deseamos realizarle el cargo en ese momento, pero cuando deseamos mantener los datos de la tarjeta, para que el cliente la pueda ocupar en múltiples ocasiones sin necesidad de volverla a introducir los datos, lo tenemos que hacer es guardar la tarjeta para posteriormente poder utilizarla sin necesidad de volverla a pedir al cliente. Los pasos para realizar esto son:
- Crear formulario para pedir los datos
- Crear un token
- Crear un cliente
- Guardar la tarjeta al cliente usando el token
- Crea un cargo usando el token
Crear formulario para pedir los datos
Primero crearemos el formulario para pedir la información de nuestro cliente (nombre y correo electrónico) y los datos de su tarjeta (número, fecha de expiración, etc). Es muy importante que los campos en donde se va a introducir la información de la tarjeta tenga el atributodata_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.Crear un token
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 alhead
el archivo de Openpay.js y el archivo 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 Save 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 ver la página de Openpay.js
Crear un cliente
Ya en tu servidor en la implementación de la página /save_customer_card realizaremos lo siguiente para crear al cliente: Nota: Observa que para este ejemplo, creamos el cliente usando la bandera de de requires_account = false lo cual significa que la cuenta no manejará saldo propio. Para mas información acerca de los tipos de clientes consulta la guía de clientesGuardar la tarjeta al cliente usando el token
Ahora sólo resta usar eltoken_id
que viene en la petición para guardar y asignar la tarjeta al cliente. El objeto card contiene un id, el cual debes guardar en tu servidor ya con el podrás hacer cargos a esa tarjeta después. Puedes consultar la referencia de Crear Tarjeta con Token para mas información. Notas: Puedes simular diferentes resultados usando las tarjetas de Pruebas