website logo
Consola de Desarrolladores
Navigate through spaces
Mobbex {DEV}
⌘K
💪 PRIMEROS PASOS
Primeros Pasos
Novedades
🔥Integración Embebida
🕹️ MÓDULOS
💸Checkout
🔗Link de Pago
🔁Suscripciones/Recurrencia
Métodos de Pago y Cuotas
🎁Fidelización
📜Códigos de Barra y QR
💾Wallet - Tokenización de Tarjetas y Cuentas Bancarias
✂️Marketplace y Split de pagos
🛒ECOMMERCE Y LIBRERIAS
E-Commerce
Cliente Desktop (CLI)
Marketplace
INFORMACION GENERAL
Tabla de Países
Cod. de Provincias Argentinas
📨Webhooks
💳Tarjetas de Prueba
💱Conversión de Monedas
SUSCRIPCIONES Y LIBRERIAS
Suscripciones
WooCommerce Suscriptions
MOBBEX AVANZADO
Mobbex.JS
🎨Personalización de la UI de Pago
Operatoria en 2 pasos
🔌 SDK
NodeJS
PHP
Windows
OPERACIONES
Consulta de Operaciones
Devoluciones
Códigos de Estado
Códigos de Estado por Estado de Orden
CONNECT
Dev Connect
📱Aplicaciones Móviles
Docs powered by archbee 
14min

Mobbex.JS

El SDK de Mobbex permite crear un checkout totalmente personalizado en tu propio HTML armando un formulario a tu medida, permitiendo tokenizar tarjetas y controlar la totalidad del frontend.



Importante

Para poder utilizar cualquiera de los métodos abajo descriptos se debe contactar con autorización sujeta a auditoría por parte de Mobbex. El sitio debe cumplir, al menos, con las normas PCI DSS. Para habilitar el uso deberá contactarnos a soporte@mobbex.com e informar que accesos necesitan.



Requisitos

Para poder crear un checkout transparente es necesario tener habilitada la tokenización de tarjetas. Si la opción está habilitada recibirán el intent token en los response al crear un checkout, suscripción u orden de pago en el siguiente formato:

JSON
|



Implementación

Insertar el script del SDK en la cabecera

HTML
|



Configurar el Public Key

Para todos los casos es necesario configurar el Public Key, en un script al final del body de la siguiente manera:

JS
|



Unir el SDK a un formulario (Recomendado)

Esta opción es la más sencilla de todas, y consiste en asignarles a todos los inputs el atributo data-mobbex, conteniendo todo el formulario en un mismo tag (ya sea <div>, <section>, etc), como se muestra a continuación:

HTML
|

El ejemplo anterior es el más básico de todos y es posible personalizarlo cómo se quiera, conteniendo los inputs en varios <div> u otros tags, siempre y cuando todo esté contenido dentro de <div id="checkout">. Desde luego, la elección del id también es propia, lo único estricto en relación a los nombres es el atributo data-mobbex

Script

Ahora es momento de agregar el SDK. Para esto, debajo del window.MobbexJS.setPublicKey configurado en pasos anteriores, agregamos:

JS
|

Ejemplo final

HTML
|



Tokenización y procesamiento del pago

Este caso es un poco más complejo que el anterior ya que requiere más pasos y mayor manipulación de los inputs. A diferencia del caso anterior, no es necesario el atributo data-mobbex.

El HTML en este ejemplo es muy similar al caso anterior, con la diferencia que reemplazamos data-mobbex por id y dividimos el vencimiento en 2 inputs: uno para el mes y otro para el año. Otro punto a tener en cuenta es que no es necesario tener todo dentro de un mismo contenedor.

HTML
|



Script

Nuevamente, escribimos la lógica después de configurar el Public Key:

JS
|

Ejemplo final

HTML
|



Updated 26 Jan 2023
Did this page help you?
Yes
No
UP NEXT
Personalización de la UI de Pago
Docs powered by archbee 
TABLE OF CONTENTS
Importante
Requisitos
Implementación
Insertar el script del SDK en la cabecera
Configurar el Public Key
Unir el SDK a un formulario (Recomendado)
Script
Ejemplo final
Tokenización y procesamiento del pago
Script
Ejemplo final