Widgets Overview

Use Case

Optty offers JavaScript widgets to simplify partner integration.

Display Widgets enable the addition of automatically updating calls to action across a website, reflecting changes made on the UPP

The Easy Checkout Widget facilitates the display of payment method options, each with a customisable call to action from the UPP, allowing customers to select their preferred payment method.

For managing order creation and to start the customer checkout process directly on your checkout page, the Create Order Widget or API Driven Create Order Widget can be used. These checkout widgets are recommended for an in-context checkout experience with Optty, eliminating the need for redirection.

Get Started

Cover

Widget Setup and Integration

Cover

Display Widgets

Cover

Easy Checkout Widget

Cover

Create Order Widget

Cover

API Driven Create Order Widget

View the Optty Widgets in Sandbox Mode

If you have an Optty Sandbox account with payment methods enabled, you can preview the widget functionality here. You can sign up for an account here Get Started

Before viewing the functionality for any of the widgets follow these steps:

  • Access the Sandbox: Go to the Optty Widgets Sandbox at https://widgets.qa.optty.com/

  • Set Mode to Live: In the Mode dropdown, select Live.

  • Choose Currency: Select your desired currency (you must have payment methods enabled in this currency).

  • Provide Your Sandbox Token: Enter your sandbox widgetToken into the Insert JSON Web Token Here input field.

  • Apply Configuration: Click the Apply Config button to update the settings.

Display Widgets

Once following the above steps, the display widgets will appear in widgets #1 - #9 to give a sense of what these widgets look like and how they could be utilised.

Easy Checkout Widget

  • Select a Payment Provider: Scroll to the #10 Optty Easy Checkout Widget section and choose a payment provider.

  • Process Payment: Navigate to the Optty Create Order Widget section, modify the payload if needed to match your selected provider’s use case, and click Pay to test the in-context payment flow.

API Driven Checkout Widget

  • Process Payment: Navigate to the #13 Optty Handle Order Payment Widget section, provide the payment payload in the JSON editor, and click Pay to see the in-context payment flow in action

PreviousPOST /orders/{reference}/refundsNextWidget Setup and Integration