Create Order Widget Integration

Testing the Optty Widgets in Sandbox Mode

To test the functionality of the optty-create-order-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.

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

Create order 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-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.

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>

1.3 Setup Optty Easy Checkout Widget

<script>
    mw('optty-easy-checkout-widget', {
        initialAmount: number,
    })
</script>

Step 2 - Add Payment Provider Selection

Add this div where you want the payment provider options to appear:

<div class="optty-easy-checkout-widget"></div>

Step 3 - Setup Optty Order Widget

Call the widget with required payload structure:

<script>
    mw('optty-create-order-widget', {
        payload: {
          "locale": "en_US",
          "customerToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjdXN0b21lcklkZW50aWZpZXIiOiJmM2I1OGEzMzE4ZmI3OTk2NmQ4Yzc3Njc5OTg0MzBhNjFmODNhYzY2ODU0NGFlODMwZTkwNDE4YjkwNzQ4YWYyNWQ2Mjg1YTIxMzIzZDJkNmNkNTcyNGQwM2RkMTk2OWU3NjZlODU4ZGIwZjNjYjM1NjJlNTk1N2FhMGRhZTZjMiIsIm1lcmNoYW50SWQiOiI0NGFkMzIxMS0yYTgzLTRiNWUtYTJlNy03ZmZlNjhlZTkyMWMiLCJpYXQiOjE2NDc4NzAwNjQsImV4cCI6MTY0ODQ3NDg2NH0.oQmfzTDvaEywgtaV5dhSeY_6pZ95og9rswE5LuktEnc",
          "orderReference": {{YOUR_UNIQUE_REFERENCE}},
          "orderAmount": 50,
          "taxAmount": 0,
          "shippingAmount": 0,
          "discountAmount": 0,
          "orderItems": [
            {
              "name": "Striped Silk Tie",
              "quantity": 1,
              "sku": "793775370033M",
              "unitPrice": 50,
              "totalAmount": 50
            }
          ],
          "purchaseCountry": "AU",
          "purchaseCurrency": "AUD",
          "customer": {
            "firstName": "Ben",
            "lastName": "Tester",
            "email": "[e-mail]",
            "phoneNumber": "[phone]"
          },
          "autoCapture": true,
          "billingAddress": {
            "firstName": "RTS",
            "lastName": "VDP",
            "email": "[e-mail]",
            "phoneNumber": "[phone]",
            "streetAddress": "201 S. Division St.",
            "streetAddress2": "Ann Arbor",
            "city": "PUNE",
            "country": "US",
            "state": "New york",
            "region": "skdsk",
            "postalCode": "48104-2201"
          },
          "shippingMethod": "digital",
          "shippingAddress": {
            "firstName": "Kaufen",
            "lastName": "Darf",
            "email": "[e-mail]",
            "phoneNumber": "[phone]",
            "streetAddress": "Herrengraben 31",
            "streetAddress2": "",
            "city": "Herrengraben",
            "country": "US",
            "state": "New york",
            "region": "Herrengraben",
            "postalCode": "48104-2201"
          },
          "dynamicRedirectUrl": "https://webhook.site/f133ab94-8687-4b94-a570-e008d999f362",
          "dynamicCallbackUrl": "https://webhook.site/f133ab94-8687-4b94-a570-e008d999f362",
          "cancellationTimeout": 8660,
          "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 Create Order Integration