---
title: Embedded Integration
slug: en-embedded-integration
description: Learn how to seamlessly incorporate a checkout and subscription solution into your website using the Embed SDK. This comprehensive document guides you through transaction processing, offers step-by-step code examples, and explores customization options. M
icon: 🔥
docTags: 
createdAt: 2023-02-02T18:05:29.000Z
---

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:

![](https://api.archbee.com/api/optimize/wYlzYU9oe8HZjh9BkqeFY/G20GOsTxMTx95A9J3c4pa_flujo-checkout-advanced.png "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"
}
```

# 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>
```

## 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>
```

# 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>
```

### Code Opening

```html
<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

```javascript
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

```javascript
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

```javascript
function renderMobbexButton() {
    window.MobbexEmbed.render(options, "#mbbx-button");
}
```

### Code Opening

```javascript
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."
    }
}
```

# 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"
}
```

# 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](https://mobbex.dev/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;
}
?>
```

### 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](https://mobbex.dev/suscripciones) 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;
}
?>
```