English
Embedded Integration

27min
The Embed SDK allows you to easily and quickly embed our checkout and subscription solution in any website.
The processing flow of the transaction in this mode, in the case of Checkout, is as follows:
Embedded Checkout
﻿
Creation
The insertion of the embed starts when creating the Checkout or the Subscription via API. At this point, it is necessary to add within the options node the domain and embed attributes.
JSON
|
"options":{
    "embed": true,
    "domain": "domainofyoursite.com"
}
"options":{
    "embed": true,
    "domain": "domainofyoursite.com"
}
﻿
SDK Implementation
Version
The latest version of the SDK is: 1.0.23.
HTML
|
<script src="https://res.mobbex.com/js/embed/mobbex.embed@1.0.23.js" integrity="sha384-4ZaVLM5sK7lqPyLJKWyRR1Zd0zGBbkaD6uVHvtyWTrrVKGdIVCJ6Ql90yiqP+q7f" crossorigin="anonymous"></script>
<script src="https://res.mobbex.com/js/embed/mobbex.embed@1.0.23.js" integrity="sha384-4ZaVLM5sK7lqPyLJKWyRR1Zd0zGBbkaD6uVHvtyWTrrVKGdIVCJ6Ql90yiqP+q7f" crossorigin="anonymous"></script>
﻿
Insert in the site dynamically in the Body
Load our Javascript library on your site:
HTML
|
<html>
    <body>
        <script type="text/javascript">
            var script = document.createElement("script");
            script.src = `https://res.mobbex.com/js/embed/mobbex.embed@1.0.23.js?t=${Date.now()}`;
            script.async = true;
            script.crossorigin = "anonymous";
            script.addEventListener("load", () => {
                // Perform the necessary action here :)
                // renderMobbexButton(); // shows the button inside the body 
                // initMobbexPayment(); // Immediately open the payment modal
            });
            document.body.appendChild(script);
        </script>
    </body>
</html>
<html>
    <body>
        <script type="text/javascript">
            var script = document.createElement("script");
            script.src = `https://res.mobbex.com/js/embed/mobbex.embed@1.0.23.js?t=${Date.now()}`;
            script.async = true;
            script.crossorigin = "anonymous";
            script.addEventListener("load", () => {
                // Perform the necessary action here :)
                // renderMobbexButton(); // shows the button inside the body 
                // initMobbexPayment(); // Immediately open the payment modal
            });
            document.body.appendChild(script);
        </script>
    </body>
</html>
﻿
Creation & Events
The payment modal (both for checkout and subscriptions) can be opened using the Mobbex button or through the code itself. In both situations, it is necessary to define some properties and render the corresponding objects.
HTML Document
Inside the HTML body where the modal is going to be inserted, it is necessary to define a div with the id property according to the type of opening to be used.
Mobbex Button
HTML
|
<div id="mbbx-button"></div>
<div id="mbbx-button"></div>
﻿
Code Opening
HTML
|
<div id="mbbx-container"></div>
<div id="mbbx-container"></div>
﻿
﻿
JavaScript
It is necessary to define a variable that contains all the event handlers for the Modal. Its structure differs depending on whether it is used for Checkout or Subscriptions.
Checkout Options
JS
|
var options = {
    id: "{ID Checkout}",
    type: "checkout",
    onResult: (data) => {
        // OnResult is called when the Close Button is tapped
        window.MobbexEmbed.close();
    },
    onPayment: (data) => {
        console.info("Payment: ", data);
    },
    onOpen: () => {
        console.info("Payment initiated.");
    },
    onClose: (cancelled) => {
        console.info(`${cancelled ? "Cancelled" : "Closed"}`);
    },
    onError: (error) => {
        console.error("ERROR: ", error);
    },
};
var options = {
    id: "{ID Checkout}",
    type: "checkout",
    onResult: (data) => {
        // OnResult is called when the Close Button is tapped
        window.MobbexEmbed.close();
    },
    onPayment: (data) => {
        console.info("Payment: ", data);
    },
    onOpen: () => {
        console.info("Payment initiated.");
    },
    onClose: (cancelled) => {
        console.info(`${cancelled ? "Cancelled" : "Closed"}`);
    },
    onError: (error) => {
        console.error("ERROR: ", error);
    },
};
﻿
Subscription Options
JS
|
var options = {
    id: "{ID Subscription}",
    sid: "{ID Subscriber}",
    type: "subscriber_source",
    onResult: (data) => {
        // OnResult is called when the Close Button is tapped
        window.MobbexEmbed.close();
    },
    onPayment: (data) => {
        console.info("Payment: ", data);
    },
    onOpen: () => {
        console.info("Payment initiated.");
    },
    onClose: (cancelled) => {
        console.info(`${cancelled ? "Cancelled" : "Closed"}`);
    },
    onError: (error) => {
        console.error("ERROR: ", error);
    },
};
var options = {
    id: "{ID Subscription}",
    sid: "{ID Subscriber}",
    type: "subscriber_source",
    onResult: (data) => {
        // OnResult is called when the Close Button is tapped
        window.MobbexEmbed.close();
    },
    onPayment: (data) => {
        console.info("Payment: ", data);
    },
    onOpen: () => {
        console.info("Payment initiated.");
    },
    onClose: (cancelled) => {
        console.info(`${cancelled ? "Cancelled" : "Closed"}`);
    },
    onError: (error) => {
        console.error("ERROR: ", error);
    },
};
﻿
Rendering/Initialization
The rendering or initialization process depends on the type of modal opening. It consists of defining a javascript function that will perform the process and is called from the point where the SDK is inserted in the page.
Mobbex Button
JS
|
function renderMobbexButton() {
    window.MobbexEmbed.render(options, "#mbbx-button");
}
function renderMobbexButton() {
    window.MobbexEmbed.render(options, "#mbbx-button");
}
﻿
Code Opening
JS
|
function initMobbexPayment() {
    var mbbxButton = window.MobbexEmbed.init(options);

    mbbxButton.open();
}
function initMobbexPayment() {
    var mbbxButton = window.MobbexEmbed.init(options);

    mbbxButton.open();
}
﻿
﻿
Operation Result
The result of the example operation will be obtained inside the onPayment method of the button.
JSON
|
{
    "id": "kS6D18unD",
    "status": {
        "code": "2",
        "text": "En Espera",
        "message": "El cupón vence a los 5 días de emitido."
    }
}
{
    "id": "kS6D18unD",
    "status": {
        "code": "2",
        "text": "En Espera",
        "message": "El cupón vence a los 5 días de emitido."
    }
}
﻿
Options
The following options can be provided to the Mobbex button on rendering or initialization:
Initializers
type: Embedded Payment Type: Only accepts 2 options: checkout (Checkout) or payment_source (Change Payment Method for Subscribers).
id: Server-generated Checkout ID or Subscription ID, depending on the type.
sid: Subscriber ID (for Subscriptions only).
Callbacks
onPayment: (data) => { }
onError: (error) => { }
onOpen: () => { }
onClose: (cancelled) => { }
The onClose method will be called when closing the payment modal. The cancelled variable will be true or false depending on whether the modal has been closed before or after the operation, respectively.
The onPayment method will be called when an operation is processed, independently of the onClose method, and will contain within the data variable all the information related to the status of such operation.
Customization
button: Javascript object with the following options:
JSON
|
{
    "text": "Pagar con Mobbex",
    "image": "https://res.mobbex.com/images/sources/mobbex.png",
    "backgroundColor": "rgb(137,0,255)",
    "textColor": "rgb(255, 255, 255)",
    "textSize": "1rem"
}
{
    "text": "Pagar con Mobbex",
    "image": "https://res.mobbex.com/images/sources/mobbex.png",
    "backgroundColor": "rgb(137,0,255)",
    "textColor": "rgb(255, 255, 255)",
    "textSize": "1rem"
}
﻿
Creating Embedding Service
Only Server-side Checkouts should be created and only the ID or UID generated by Mobbex should be shared.
Checkout Example
This is an example of using the special options in PHP. The creation of the checkout must always be done server-side, otherwise your account credentials will be exposed. For more examples see the Checkout documentation.
PHP
|
<?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
    },
    "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;
}
?>
<?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
    },
    "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;
}
?>
﻿
Subscription Example
This example shows how to create a subscription so that it can be used with the SDK for embedding. Note that the same properties are used inside the options node as in the checkout case. For more information see the Subscriptions documentation.
PHP
|
<?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
    },
    "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;
}
?>
<?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
    },
    "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;
}
?>
﻿
﻿