# Create Order Widget
## Overview
This create order widget is the simplest way to initialise the customer checkout flow from your checkout site and will take all order information on the frontend javascript to begin the customer checkout flow. If you wish to initiate an order from your backend system then the [api-driven-create-order-widget](https://docs.optty.com/widget/api-driven-create-order-widget "mention") widget may be more suited to your use case.
## Step 1 - Widget Setup & Initialisation
Overview of widget-setup-and-integration
### **1.1 Initiate Widget**
```javascript
```
### **1.2 Load configuration**
```javascript
```
### **1.3 Setup Optty Easy Checkout Widget**
```javascript
```
## **Step 2 - Payment Provider Selection**
There must be an implementation in your checkout to handle a customer selecting a payment method option. The easiest way to implement this is to use the [easy-checkout-widget](https://docs.optty.com/widget/easy-checkout-widget "mention"), otherwise if you wish to have complete control of the display of the payment method selection the [options](https://docs.optty.com/direct-api-orders/order-flow/options "mention") end point may be more preferable.
## Step 3 - Payload Field
Call the widget with required payload structure. For more details about the fields please view [direct-api-orders](https://docs.optty.com/direct-api-orders "mention") as this is where the fields are passed to after the widget is called. The two fields on the payload field that are handled different are the `dynamicCallbackUrl` and `paymentStatusFetchEnabled` which are outlined below.
**Parameters**
When using the `optty-create-order-widget`, note the following about `dynamicCallbackUrl`:
* For In-Context implementation: `dynamicCallbackUrl` is **required**
* For standard implementation: `dynamicCallbackUrl` is optional
When provided, `dynamicCallbackUrl` should be a valid HTTPS URL that can receive requests for webhook notifications about order status changes.
The `paymentStatusFetchEnabled` determines whether to retrieve the payment status after the payment is completed. If set to `true`, a payment object is included in the `onFinalized` callback response.
### Step 3.2 - Callback Functions
**onFinalize:** This callback function is called when the consumer finishes the checkout flow with the payment method.
**onError:** This callback function is called when their was an error faced creating an order with the selected payment provider (bnplProvider), the best practise for handling this would be to remove that option from the checkout and get the customer to checkout with another provider. We also request any errors faced here to be sent to as we will follow up to get the technical issue with the provider directly on your behalf.
**onCancel:** This callback is only used when the in-context flow is used, and is when the customer cancels the checkout flow through either closing the popup table, or clicking the Optty cancel button on the IFrame, this IS NOT the only flow where a cancel occurs, if the customer cancels with the providers cancel functionality this will be passed as a CANCELED status in the onFinalize callback, but both should be handled the same way.
```javascript
```
## **Step 4 - Checkout Display Configuration**
The checkout widget offers two display options: External Link and In-Context. The In-Context method minimizes customer friction by avoiding redirection, allowing them to complete the checkout directly on the site. Conversely, the External Link method redirects the customer to the payment method's page to finalize the checkout.
For the In-Context display, the widget can appear as either a Pop-Up or an IFrame. The choice between these two depends on the payment provider's security settings; if their checkout page disallows iframing on another site, the Pop-Up method will be used for that provider.
### Pop Up
### IFrame
## **React Code Example**
To test this we recommend forking this example and entering your widget token from the UPP found under 'view profile' when hovering your user on the top right. Along with a currency which has a payment method enabled on the UPP.
{% embed url="" %}
{% embed url="" %}
