Billetera o Tokenización de Tarjetas
Implementación:
Ejemplo: https://github.com/mobbexco/ejemplos/tree/main/wallet
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 com 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 clientename:Nombre del Clienteidentification:DNIphone:Número de celular
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
{
"result": true,
"data": {
"id": "PYCNWIF9MSXV1QYLNG",
"url": "https://api.mobbex.com/p/checkout/v2/PYCNWIF9MSXV1QYLNG",
"description": "Descripción de la Venta",
"currency": "ARS",
"total": 5,
"created": 1598424066850,
"customer": {
"name": "Demo Mobbex"
},
"wallet": [
{
"it": "5ca170c7-b74a-469a-8e61-3635148cbc5d",
"name": "Visa terminada en 8545",
"source": {
"reference": "visa.comafi",
"name": "Visa Banco Comafi",
"shortName": "Visa Comafi",
"card": {
"currency": "ARS",
"product": {
"name": "Visa",
"shortName": "Visa",
"variant": "credit",
"lengths": [
16
],
"gaps": [
4,
8,
12
],
"code": {
"name": "CVV",
"length": 3,
"position": 1
},
"logo": "https://res.mobbex.com/images/sources/png/visa.png"
},
"issuer": {
"shortName": "Comafi",
"name": "Banco Comafi",
"color": "#789c48",
"logo": "https://res.mobbex.com/images/sources/png/comafi.png"
},
"level": "classic"
},
"type": "card",
"priority": 0
},
"card": {
"expiration_month": 2,
"expiration_year": 24,
"card_number": "402123******8888"
},
"installments": [
{
"name": "1 Pago",
"description": "1 Pago",
"count": 1,
"reference": "1",
"totals": {
"currency": {
"value": "ARS",
"label": "Peso Argentino",
"symbol": "$",
"hidden": false
},
"installment": {
"amount": 5.1,
"count": 1
},
"total": 5.1,
"financial": {
"percentage": 2,
"amount": 0.1
}
}
},
{
"name": "3 Cuotas",
"description": "3 Cuotas",
"count": 3,
"reference": "3",
"totals": {
"currency": {
"value": "ARS",
"label": "Peso Argentino",
"symbol": "$",
"hidden": false
},
"installment": {
"amount": 1.94,
"count": 3
},
"total": 5.83,
"financial": {
"percentage": 16.5,
"amount": 0.83
}
}
},
{
"name": "6 Cuotas",
"description": "6 Cuotas",
"count": 6,
"reference": "6",
"totals": {
"currency": {
"value": "ARS",
"label": "Peso Argentino",
"symbol": "$",
"hidden": false
},
"installment": {
"amount": 1.09,
"count": 6
},
"total": 6.55,
"financial": {
"percentage": 31,
"amount": 1.55
}
}
},
{
"name": "10 cuotas",
"description": "10 Cuotas",
"count": 10,
"reference": "10",
"totals": {
"currency": {
"value": "ARS",
"label": "Peso Argentino",
"symbol": "$",
"hidden": false
},
"installment": {
"amount": 0.51,
"count": 10
},
"total": 5.1,
"financial": {
"percentage": 2,
"amount": 0.1
}
}
},
{
"name": "Ahora 12",
"description": "",
"count": 12,
"reference": "ahora_12",
"totals": {
"currency": {
"value": "ARS",
"label": "Peso Argentino",
"symbol": "$",
"hidden": false
},
"installment": {
"amount": 0.43,
"count": 12
},
"total": 5.1,
"financial": {
"percentage": 2,
"amount": 0.1
}
}
},
{
"name": "Ahora 18",
"description": "",
"count": 18,
"reference": "ahora_18",
"totals": {
"currency": {
"value": "ARS",
"label": "Peso Argentino",
"symbol": "$",
"hidden": false
},
"installment": {
"amount": 0.28,
"count": 18
},
"total": 5.1,
"financial": {
"percentage": 2,
"amount": 0.1
}
}
}
]
}
]
}
}
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].
Procesar Pago
Para procesar el pago es necesario agregar al header:
<script src="https://res.mobbex.com/js/sdk/[email protected]" integrity="sha384-INuoL0CSX9x+vgy/B2db2lIABc/zHYHFP0KR8gma14xjQBwLBT5k5Xt9kIiXMrF2" crossorigin="anonymous"></script>
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)
Frontend del checkout
Mostramos al cliente la lista de las tarjetas con su name y 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.
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á.
<script>
window.MobbexJS.operation.process({
intentToken: "{{ intentToken }}",
installment: "{{ cuota elegida }}"
securityCode: "{{ código de seguridad }}"
})
.then(data => console.log(data))
.error(error => console.log(error))
</script>
Respuesta
Una vez procesado el pago, nos retornara un objeto con el status del pago, o un error, Referencia