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.
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.
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).
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
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.
Example of other widgets
Last updated