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:
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, embed y embedVersion .
"options":{
"embed": true,
"domain": "eldominiodelsitio.com.ar",
"embedVersion": "1.2.0"
}Implementación del SDK
Versión
La versión actual del SDK es: 1.2.0.
Insertar en el sitio de manera Fija en la Cabecera
<script type="text/javascript" src="https://api.mobbex.com/p/embed/1.2.0/lib.js"></script>Insertar en el sitio dinámicamente en el Body
Cargá nuestra librería Javascript en tu sitio:
<html>
<body>
<script type="text/javascript">
var script = document.createElement("script");
script.src = "https://api.mobbex.com/p/embed/1.2.0/lib.js";
script.async = true;
script.type = "text/javascript";
script.addEventListener("load", () => {
// Realizá la acción que sea necesaria aca :)
// renderMobbexButton(); // Muestra el botón dentro del body
// initMobbexPayment(); // Abre inmediatamente el modal de pago
});
document.body.appendChild(script);
</script>
</body>
</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.
<div id="mbbx-container"></div>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.
Ejemplo Checkout
var embed = window.MobbexEmbed.init({
onResult: (data) => {
// OnResult es llamado cuando se toca el Botón Cerrar
window.MobbexEmbed.close();
},
onPayment: (data) => { },
onOpen: () => { },
onClose: (cancelled) => {
location.reload();
},
onError: (error) => {
console.error('ERROR: ', error);
},
});
embed.open({ type: 'checkout', id: 'XXXXXXXXX'});Ejemplo Suscripciones
var embed = window.MobbexEmbed.init({
onResult: (data) => {
// OnResult es llamado cuando se toca el Botón Cerrar
window.MobbexEmbed.close();
},
onPayment: (data) => { },
onOpen: () => { },
onClose: (cancelled) => {
location.reload();
},
onError: (error) => {
console.error('ERROR: ', error);
},
});
embed.open({ type: 'subscriber_source', id: 'subscription_id', sid: 'subscriber_id', sourcePriority: 'primary'});Ejemplo Checkout con Medios de Pago
var embed = window.MobbexEmbed.init({
onResult: (data) => {
// OnResult es llamado cuando se toca el Botón Cerrar
window.MobbexEmbed.close();
},
onPayment: (data) => { },
onOpen: () => { },
onClose: (cancelled) => {
location.reload();
},
onError: (error) => {
console.error('ERROR: ', error);
},
});
embed.open({ type: 'checkout', id: 'XXXXXXXXX', paymentMethod: 'arg.qr' });
Resultado de la operación
El resultado de la operación de ejemplo será obtenido dentro del método onPayment del botón.
{
"id": "kS6D18unD",
"status": {
"code": "2",
"text": "En Espera",
"message": "El cupón vence a los 5 días de emitido."
}
}Opciones
Las siguientes opciones pueden ser provistas al botón Mobbex en la renderización o inicialización:
Inicializadores
type: sólo acepta 2 opciones: -checkout -subscriber_source: establecimiento del medio de pago para Suscriptores. id: ID de checkout generado en el servidor o ID de suscripción. sid: ID de Suscriptor (aplica a suscripciones). paymentMethod: permite filtrar el tipo de medio de pago (aplica a checkout).
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.
Separación de Métodos de Pago
Nuestra integración permite separar los métodos de pago en el checkout. Al crear el mismo se debe enviar la variable ```paymentMethods: true``` lo que permitirá obtener un nuevo nodo con todos los métodos de pago separados. Ej:
{
"paymentMethods": [
{
"group": "card",
"subgroup": "card_input",
"subgroup_title": "Tarjeta de Crédito/Débito",
"subgroup_logo": "https://res.sugaway.io/g9ROENHebGamEm8iZUbPJYuevDY=//images/sources/original/card.png",
"type": "card"
},
{
"group": "bnpl",
"subgroup": "wibond",
"subgroup_title": "Wibond",
"subgroup_logo": "https://res.sugaway.io/zefs9O4ZjcPm9W-cXk9kUnkveyA=//images/sources/original/wibond.png",
"type": "bnpl"
},
{
"group": "qr",
"subgroup": "arg_interoperable",
"subgroup_title": "Pagá con QR",
"subgroup_logo": "https://res.sugaway.io/OovRm_3t8Mc3wLv4976Z-Va5qp4=//images/sources/original/arg.qr.png",
"type": "prismaqr"
},
{
"group": "argdebin",
"subgroup": "arg_debin",
"subgroup_title": "Pagá con Débito Inmediato (DEBIN)",
"subgroup_logo": "https://res.sugaway.io/55pETBTVFtZteXKW-TMfse_vOO8=//images/sources/original/argdebin.png",
"type": "argdebin"
},
{
"group": "crypto",
"subgroup": "binancepay",
"subgroup_title": "Binance Pay",
"subgroup_logo": "https://res.sugaway.io/yGbGYnEYI_Gvpp6j2IKNvDdrrZo=//images/sources/original/binancepay.png",
"type": "prismaqr"
},
{
"group": "p2p",
"subgroup": "pix",
"subgroup_title": "PIX",
"subgroup_logo": "https://res.sugaway.io/SwXV11sORwHLGB8XJZsYWfS-xM0=//images/sources/original/pix.png",
"type": "prismaqr"
},
{
"group": "khipu",
"subgroup": "khipu",
"subgroup_title": "Pagá desde tu Banco",
"subgroup_logo": "https://res.sugaway.io/vP-xdjQ3mbwo5A-PSf5YzVYdRrM=//images/sources/original/khipu.png",
"type": "khipu"
},
{
"group": "bnpl",
"subgroup": "gocuotas",
"subgroup_title": "GOcuotas (Cuotas con tarjeta de DÉBITO)",
"subgroup_logo": "https://res.sugaway.io/eX2UgRHaXd6EMYd0KLR0aEyljwk=//images/sources/original/gocuotas.png",
"type": "bnpl"
}
]
}Esto le permitirá mostrar las diferentes opciones en botones separados en su e-commerce y también poder lanzar la integración embebida directamente en un medio de pago. Por ejemplo, quiero colocar un botón de "Pagá con QR" separado y que el usuario al clickear abra directamente el pago con QR en vez de llegar a la pantalla de todos los medios de pago, para esto al crear el "embebido" en las opciones voy a utilizar el "Grupo (group)" y el "subgrupo (subgroup)" de esta manera "qr:arg_interoperable" (conjugando ambos separándolos por dos puntos al medio). Esto hará que al abrir el embebido vaya directamente a la opción de pagar con QR.
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
$request = new HttpRequest();
$request->setUrl('https://api.mobbex.com/p/checkout');
$request->setMethod(HTTP_METH_POST);
$request->setHeaders(array(
'cache-control' => 'no-cache',
'Content-Type' => 'application/json',
'x-lang' => 'es',
'x-access-token' => 'd31f0721-2f85-44e7-bcc6-15e19d1a53cc',
'x-api-key' => 'zJ8LFTBX6Ba8D611e9io13fDZAwj0QmKO1Hn1yIj'
));
$request->setBody('{
"total": 100.2,
"currency": "ARS",
"reference": "2982-2XtPXlgSaWccqUyobuv4sEmLYMV0N6oX6MoridMw",
"description": "Descripción de la Venta",
"items": [{
"image": "https://www.mobbex.com/wp-content/uploads/2019/03/web_logo.png",
"quantity": 2,
"description": "Mi Producto",
"total": 50
}, {
"image": "https://www.mobbex.com/wp-content/uploads/2019/03/web_logo.png",
"quantity": 1,
"description": "Mi otro producto",
"total": 50.2
}],
"options": {
"domain": "midominio.com",
"embed": true,
"embedVersion": "1.2.0"
},
"return_url": "https://mobbex.com/sale/return?session=56789",
"webhook": "https://mobbex.com/sale/webhook?user=1234"
}');
try {
$response = $request->send();
echo $response->getBody();
} catch (HttpException $ex) {
echo $ex;
}
?>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
$request = new HttpRequest();
$request->setUrl('https://api.mobbex.com/p/subscriptions');
$request->setMethod(HTTP_METH_POST);
$request->setHeaders(array(
'cache-control' => 'no-cache',
'Content-Type' => 'application/json',
'x-lang' => 'es',
'x-access-token' => 'd31f0721-2f85-44e7-bcc6-15e19d1a53cc',
'x-api-key' => 'zJ8LFTBX6Ba8D611e9io13fDZAwj0QmKO1Hn1yIj'
));
$request->setBody('{
"total": 100,
"currency": "ARS",
"setupFee": 0,
"type": "dynamic",
"name": "Suscripción Demo",
"reference": "2982-2XtPXlgSaWccqUyobuv4sEmLYMV0N6oX6MoridMw",
"description": "Descripción de la Suscripción",
"options": {
"domain": "midominio.com",
"embed": true,
"embedVersion": "1.2.0"
},
"return_url": "https://mobbex.com/subscription/return?session=56789",
"webhook": "https://mobbex.com/subscription/webhook?user=1234"
}');
try {
$response = $request->send();
echo $response->getBody();
} catch (HttpException $ex) {
echo $ex;
}
?>