Embedded Integration
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:
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.
SDK Implementation
Version
The latest version of the SDK is: 1.0.23.
Insert in the site dynamically in the Body
Load our Javascript library on your site:
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
Code Opening
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
Subscription Options
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
Code Opening
Operation Result
The result of the example operation will be obtained inside the onPayment method of the button.
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:
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.
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.
