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 
27min

Integración Embebida

El SDK para Embeber le permite embeber de manera fácil y rápida nuestra solución de checkout y suscripciones en cualquier sitio web.

El flujo de procesamiento de la operación en esta modalidad, en el caso de Checkout, es el siguiente:

Checkout - Modo Embebido


Creación

La inserción del embebido comienza al crear el Checkout o la Suscripción vía API. En este punto, es necesario añadir dentro del nodo options los atributos domain y embed.

JSON
|

Implementación del SDK

Versión

La versión actual del SDK es: 1.0.23.

Insertar en el sitio de manera Fija en la Cabecera

HTML
|

Insertar en el sitio dinámicamente en el Body

Cargá nuestra librería Javascript en tu sitio:

HTML
|

Creación y Eventos

El modal de pagos (tanto para checkout como suscripciones) puede ser abierto utilizando el botón de Mobbex o a través del propio código. En ambas situaciones, es necesario definir algunas propiedades y renderizar los objetos correspondientes.

Documento HTML

Dentro del body del HTML donde se vaya a insertar el modal, es necesario definir un div con la propiedad id en función del tipo de apertura que se vaya a utilizar.

Botón de Mobbex

HTML
|

Apertura por Código

HTML
|



JavaScript

Es necesario definir una variable que contiene todos los manejadores de eventos para el Modal. Su estructura varía en función de si es utilizada para Checkout o para Suscripciones.

Opciones para Checkout

JS
|

Opciones para Suscripciones

JS
|



Renderización/Inicialización

El proceso de renderización o inicialización depende de cuál sea la modalidad para la apertura del modal. Consiste en definir una función de javascript que va a realizar el proceso y que es llamada desde el punto donde se insertó el SDK en la página.

Botón de Mobbex

JS
|

Apertura por Código

JS
|



Resultado de la operación

El resultado de la operación de ejemplo será obtenido dentro del método onPayment del botón.

JSON
|

Opciones

Las siguientes opciones pueden ser provistas al botón Mobbex en la renderización o inicialización:

Inicializadores

type: Tipo de Pago Embebido: Sólo acepta 2 opciones: checkout (Checkout) o payment_source (Cambio de Medio de pago para Suscriptores). id: ID de Checkout generado en el servidor o ID de Suscripción, dependiendo el tipo. sid: ID de Suscriptor (sólo para Suscripciones).

Callbacks

onPayment: (data) => { } onError: (error) => { } onOpen: () => { } onClose: (cancelled) => { }

El método onClose será llamado al cerrar el modal de pagos. La variable cancelled será true o false dependiendo de que el modal haya sido cerrado antes de realizar la operación o después, respectivamente.

El método onPayment será llamado al procesarse una operación, independientemente del método onClose, y contendrá dentro de la variable data toda la información relacionada al estado de dicha operación.

Personalización

button: Objeto Javascript con las siguientes opciones

JSON
|



Creación de Servicio para Embeber

Sólo se deben crear Checkouts del lado Servidor y compartir únicamente el ID o UID generado por Mobbex.

Checkout Ejemplo

Esto es un ejemplo de la utilización de las opciones especiales en PHP. La creación del checkout siempre debe realizarse desde el lado servidor, ya que sino quedarían expuestas las credenciales de su cuenta. Para más ejemplos ver la documentación de Checkout.

PHP
|

Suscripción Ejemplo

Este ejemplo muestra cómo crear una suscripción para que la misma pueda ser utilizada con el SDK para embeber. Notar que se utilizan las mismas propiedades dentro del nodo "options" que en el caso de checkout. Para más información ver la documentación de Suscripciones.

PHP
|



Updated 07 Feb 2023
Did this page help you?
Yes
No
UP NEXT
Checkout
Docs powered by archbee 
TABLE OF CONTENTS
Creación
Implementación del SDK
Versión
Insertar en el sitio de manera Fija en la Cabecera
Insertar en el sitio dinámicamente en el Body
Creación y Eventos
Documento HTML
Botón de Mobbex
Apertura por Código
JavaScript
Opciones para Checkout
Opciones para Suscripciones
Renderización/Inicialización
Botón de Mobbex
Apertura por Código
Resultado de la operación
Opciones
Inicializadores
Callbacks
Personalización
Creación de Servicio para Embeber
Checkout Ejemplo
Suscripción Ejemplo