Widget Setup and Integration

Widget Setup and Integration

Using Optty JS to handle the widgets display and showing Payment options.

Step 1 - Initiate Widget

To initiate the optty widgets an integration script needs to be added to the e-commerce site’s html page.

// Some code
<script>
(function (w,d,s,o,f,js,fjs) {
  w['Optty-Widget-SDK']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
  js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
  js.id = o; js.src = f; js.async = 1;
    fjs.parentNode.insertBefore(js, fjs);
}(window, document, 'script', 'mw', 'https://widgets.qa.optty.com/widget-loader.js'));

// Add widget init function - example mw(‘footer-widget’, { mode: ‘preview’ }). 11 // See the next section for more information
</script>

The snippet above dynamically adds another script tag, setting src to 'https://widgets.qa.optty.com/widget-loader.js'

It asynchronously loads the contents into the page. This script needs to ideally be embedded at the bottom of the HTML page.

Replace https://widgets.qa.optty.com to https://widgets.optty.com when you from the Testing Sandbox to Production

Step 2 - Embedding widgets into HTML Pages

Embedding the different Optty widgets into the pages of the e-commerce site requires adding a div tag to any HTML document. Optty utilizes the concept of widget regions and HTML class attributes to uniquely create an instance of any optty widget in a particular region of the storefront page.

You can pick and choose which widgets that you would like to apply on your website. You do not have to use all of the ones listed below. 

<HTML>
<!-- Easy Checkout Widget -->
<div class="optty-easy-checkout-widget"></div>

<!-- Product Details Page Widget -->
<div class="product-box-widget"></div>

<!-- Cartbox Widget -->
<div class="cart-box-widget"></div>

<!-- Product Listing Widget -->
<div class="product-listing-widget"></div>

<!-- Footer Widget -->
<div class="optty-footer-widget"></div>

<!-- Bnpl logo Widget -->
<div class="bnpl-logos-widget"></div>

Step 3 - Widget Configuration

Optty widgets are built to be configurable allowing merchants to configure UI elements such as font family, colors, etc within the Universal Payments Platform (UPP).

The widget init function mw() requires a configuration object as the second argument after the widget name (the first function argument). The option which is passed into the widget configuration object is influenced by the widget, each widget has it’s unique configuration needs but all the widgets need two important configuration options - mode and token.

3.1 Create Customer Session Token

Optty widgets require a session token to verify the source the Widget is loading from, and to be able to display the correct list of available Payment Methods. This is required for a simple API call on the server-side via Optty’s API.

For more details on Create Order refer to our API References documents.

3.2 Load configuration

3.2.1 Initialization Widget

After adding the widget initiation code, you will need to call the init widget and pass in some configuration objects that will be used to make requests to the Optty API. These are used to fetch the widgets configuration data before you can begin to call other widgets and pass in the fetched widget configs into those other widgets (checkout widget, footer widget, etc).

<script>
    // … widget initiation script …
    mw('init', {
        token: "CUSTOMER SESSION TOKEN",
        currency: “string”,
        initialAmount: number
        mode: “live”
    });
</script>

The init widget makes a request to the Optty API to fetch your configured configurations for the widgets using the token, currency, initialAmount and mode fields in its configuration object. Calling the init widget makes it possible to call the other widgets without passing any other parameters (though some widgets still require you to explicitly pass in an amount field in their configuration object)

It’s important to always set the mode to “live”.

3.3 Setup Optty Easy Checkout Widget

<script>
    mw('optty-easy-checkout-widget', {
        initialAmount: number,
    })
</script>

Example of Easy Checkout Widget

The content of the widget can be controled by Universal Payments Platform (UPP)

For more details please checkout the instruction here:

https://articles.optty.com/optty-retail-control-panel/widget-configuration#widget-content-management

3.3.1 Create Order

After you retrieve the value from the Easy Checkout Widget, you should proceed to the create order process and complete the payment process.

3.4 Setup Other Widgets

| Product Details Page | Product Listing | Cart Box | BNPL Logos Widget | Footer Widget |

Optty provide you with different widgets to allow you to display them in different parts of your websites. These include footer, product page, and the shopping cart. The Payment Method options will show dynamically based on the Payment Methods that are available in your accounts.

<script>
//[LOAD THE WIDGETS INTO THE DIVS]
//---- Sample Script for product box widget ----
mw('product-box-widget', {
  amount: 50
});

//---- Sample Script Product Listing widget ----
mw('product-listing-widget', {
  amount: 50
});

//---- Sample Script Cartbox widget ----
mw('cart-box-widget', {
  amount: 50
});

//---- Sample Script BNPL LOGOs widget ----
mw('bnpl-logos-widget', {
  amount: 50
});

mw('footer-widget', {}); // footer widget requires no configuration object
</script>

Example of other widgets

PreviousRefundsNextDirect API Integration

Last updated