--- title: Wallet slug: wallet description: Learn how to implement and utilize the Mobbex Checkout feature with this comprehensive document. Discover how the Mobbex-node library works in the backend to create a checkout, providing customer information and wallet options. Find out how to add new car docTags: createdAt: 2022-11-23T16:24:50.000Z --- # Implementación Ejemplo: [https://github.com/mobbexco/ejemplos/tree/main/wallet](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](https://github.com/GrosfeldEzekiel/mobbex-node#readme) 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](https://mobbex.dev/VPRQ-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 { "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]. ## 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 `` para el código de seguridad y un `` 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á. ```javascript ``` ### Respuesta Una vez procesado el pago, nos retornara un objeto con el status del pago, o un error, [Referencia](https://mobbex.dev/docs/statuses)