18min

Billetera / Tokenización de Tarjetas en Checkout

Implementación

Uso

Creación del Checkout

En el backend, en la ruta /checkout se utiliza la librería mobbex-node donde en primer lugar se utiliza configurations.setPrivateKey() pasando como argumento la clave privada. Luego se realiza el checkout con checkout.create(), pasando como argumento el objeto con el checkout.

Admite todos los parámetros de Checkout, pero además se establecen los siguientes:

  • customer: Objeto de tipo JSON con los datos del cliente. Obligatorios:
    • uid: Identificador único e interno del cliente. Debe ser único para cada cliente
    • name: Nombre del Cliente
    • identification: DNI
    • phone: Número de celular
    • email: Email del Cliente
  • wallet: Habilita la opción de billetera virtual para el almacenado de Tarjetas.
  • options: Objeto con opciones.
    • domain: Dominio desde el que se procesará el Checkout ( Obligatorio ).

La función devuelve un objeto, del cuál solo obtenemos la lista wallet, y el url para agregar nuevas tarjetas dentro del objeto data.

Con el wallet y el url del checkout ahora podemós procesar el pago en el front.

Respuesta

JSON
|

Aclaracion

Al ser el objeto que se devuelve muy grande, es necesario, a la hora de pasar información al front, es necesario, previamente, descomponerlo y colocarlo en otras variables, ya que de lo contrario, su valor solo será [Object][Object].



Frontend del checkout

Mostramos al cliente la lista de las tarjetas con su name, un formulario listando sus posibles installments y solicitando código de seguridad.

En el ejemplo se utiliza un <select> con todos los nombres de la lista de installments (Que se encuentra dentro del objeto wallet). El value de los options es el reference de los installments.

Además utilizamos un <input> para el código de seguridad y un <input type="hidden"> para el intent token de la tarjeta.

Para que el usuario pueda agregar una tarjeta nueva, se utiliza un link con el url.



Procesar Pago

Para procesar el pago es necesario agregar al header:

HTML
|

A la hora de utilizar el SDK nos interesan 3 cosas de la tarjeta a utizar:

  • intentToken: Aparece dentro del objeto wallet con el nombre de "it"
  • installment: Aparece como una lista de objetos dentro del wallet, del objeto solo nos interesa "reference"
  • securityCode: Codigo de seguridad de la tarjeta (Se solicita al cliente)

Script con el SDK

Para procesar el pago, cuando el usuario realiza una acción como clickear el botón "Pagar", debemos ejecutar la función Mobbex.operation.process() pasando como argumento un objeto con el intentToken, el installment y el securityCode de la tarjeta que se usará.

JS
|

Respuesta

Una vez procesado el pago, nos retornara un objeto con el status del pago, o un error, Referencia



Updated 05 Apr 2022
Did this page help you?
Yes
No