Quick Start

This page contains the instructions to install the widgets library and configure the Openpay Widgets on your website.

Step 1 - Loading the library

Add the widgets script into your page. Ideally the script is added at the end of your body element.

<html>
  <body>
    <!-- Load the widgets library -->
    <script src="https://widgets.openpay.com.au/lib/openpay-widgets.min.js"></script>
  </body>
</html>

Step 2 - Initializing the library

Initialize the library with the region, plan tiers and purchase price limits that have been configured for you in Openpay. This script should run after the widgets library has loaded.

<html>
  <body>
    <!-- Load the widgets library -->
    <script src="https://widgets.openpay.com.au/lib/openpay-widgets.min.js"></script>
    <!-- Initialize the widgets -->
    <script>
      OpenpayWidgets.Config({
        region: 'AU',
        currency: '$',
        planTiers: [2, 4, 6],
        minEligibleAmount: 50,
        maxEligibleAmount: 1000,
        type: 'Online'
      });
    </script>
  </body>
</html>

Step 3 - Adding the widgets

Add the widgets to anywhere on your page just like any other HTML element.

Please refer to the below snippet that illustrates how to add a product page widget.

<html>
  <head>
    <title>Your page</title>
  </head>
  <body>
    <!-- Insert the widget into the Product Detail page like any other HTML element -->
    <opy-product-page amount="300"></opy-product-page>
    
    <!-- Your scripts -->
    <script src="https://widgets.openpay.com.au/lib/openpay-widgets.min.js"></script>
    <!-- Initialize the widgets -->
    <script>
      OpenpayWidgets.Config({
        region: 'AU',
        currency: '$',
        planTiers: [2, 4, 6],
        minEligibleAmount: 50,
        maxEligibleAmount: 1000,
        type: 'Online'
      });
    </script>
  </body>
</html>

Front-end view of widgets

Example 1 - Price is outside of min/max range

Example 2 - Price within min/max range


Did this page help you?