# Widgets Overview

## Use Case

Optty offers JavaScript widgets to simplify partner integration.

[display-widgets](https://docs.optty.com/widget/display-widgets "mention")  enable the addition of automatically updating calls to action across a website, reflecting changes made on the UPP

The [easy-checkout-widget](https://docs.optty.com/widget/easy-checkout-widget "mention") 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](https://docs.optty.com/widget/create-order-widget "mention") or [api-driven-create-order-widget](https://docs.optty.com/widget/api-driven-create-order-widget "mention")  can be used. These checkout widgets are recommended for an in-context checkout experience with Optty, eliminating the need for redirection.

## Get Started

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Widget Setup and Integration</td><td><a href="widget-setup-and-integration">widget-setup-and-integration</a></td><td><a href="https://content.gitbook.com/content/fCUCEi1845pQGMcbjae6/blobs/Ot6N7jZ6ukuXd7ZwkoiF/image_2025-06-13_170711656.png">image_2025-06-13_170711656.png</a></td></tr><tr><td>Display Widgets</td><td><a href="display-widgets">display-widgets</a></td><td><a href="https://content.gitbook.com/content/fCUCEi1845pQGMcbjae6/blobs/OGI6rWMaISbf623oJYlL/image_2025-06-13_170839152.png">image_2025-06-13_170839152.png</a></td></tr><tr><td>Easy Checkout Widget</td><td><a href="easy-checkout-widget">easy-checkout-widget</a></td><td><a href="https://content.gitbook.com/content/fCUCEi1845pQGMcbjae6/blobs/Nizd0Bx0RYYgvd2bFgtM/image_2025-06-13_170945018.png">image_2025-06-13_170945018.png</a></td></tr><tr><td>Create Order Widget</td><td></td><td><a href="https://content.gitbook.com/content/fCUCEi1845pQGMcbjae6/blobs/ydx9qRUYIvoBabE4uAcV/image_2025-06-13_171102292.png">image_2025-06-13_171102292.png</a></td></tr><tr><td>API Driven Create Order Widget</td><td></td><td><a href="https://content.gitbook.com/content/fCUCEi1845pQGMcbjae6/blobs/ydx9qRUYIvoBabE4uAcV/image_2025-06-13_171102292.png">image_2025-06-13_171102292.png</a></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

## 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](#get-started "mention")

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