Handle Order Payment Widget Integration

Testing the Optty Handle Order Payment Widget in Sandbox Mode

To test the functionality of the optty-handle-order-payment-widget, 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.

• 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.

• 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

Handle Order Payment Widget Setup and Integration

Prerequisites

• Include the Optty JS Widget loader in your page

• Ensure you have the necessary merchant credentials

Parameters

When using the optty-handle-order-payment-widget, note the following about dynamicCallbackUrl:

• For In-Context implementation: dynamicCallbackUrl is required in the create order payload

• For standard implementation: dynamicCallbackUrl is optional in the create order payload

When provided, dynamicCallbackUrl should be a valid HTTPS URL that can receive requests for webhook notifications about order status changes.

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 1 - Widget Setup & Initialization

1.1 Initiate Widget

<script>
  (function (w, d, s, o, f, js, fjs) {
    w['JS-Widget'] = 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'));
</script>

1.2 Load configuration

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

Step 2 - Setup Optty Handle Order Payment Widget

Call the widget with required payload structure:

<script>
    mw('optty-handle-order-payment-widget', {
        payload: {
          "redirectUrl": {{RETURNED AS RESPONSE FROM /orders endpoint}},
          "orderReference": {{RETURNED AS RESPONSE FROM /orders endpoint}},
          "transactionReference": {{RETURNED AS RESPONSE FROM /orders endpoint}},
          "paymentStatusFetchEnabled": true
        },
      onError: function(err) {
         // Handle error 
        console.error({ err });
      },
      onCancel: function(cancel) {
        // Handle cancel
        console.log({ cancel });
      },
      onFinalize: function(data) {
         // Handle completion
        console.log('Payment completed:', data);
      }
    });
</script>

Working React Code Example for Optty Payment Integration