Payment Widget Integration

Testing the Optty Widgets in Sandbox Mode

To test the functionality of the optty-order-creation-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 either AUD or GBP as the 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 Order Creation Widget section and click the Pay button to complete the process.

Create order Widget Setup and Integration

Using Optty JS to handle the Payment

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', '{YOUR_WIDGET_LOADER_URL}'));
</script>

1.2 Load configuration

<script>
    // … widget initiation script …
    mw('init', {
        token: "CUSTOMER SESSION 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-order-creation-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
        },
      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>