QuickBuy Front End Implementation

Main steps

See the example HTML document included below. The key steps are as follows:

Import the stylesheet for the widget (line 5)
Override the stylesheet values with your own custom rules (if required).
Create a <div> with id="WidgetContainer" and appropriate dataset (lines 22-33).
Run the bundled index.js script (line 38).

Notes:

If the clientSignature used is invalid/expired, the widget will surface an error using window.postMessage(). In this case you should generate a new clientSignature and reload the widget javascript.

Endpoints:

Sandbox:

Production:

JavaScript: https://quickbuy-v2.ibanera.com/index.js
CSS: https://quickbuy-v2.ibanera.com/index.css

HTML Example:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- This is the stylesheet for the widget -->
<link rel="stylesheet" href="https://quickbuy-v2.ibanera.com/index.css" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div
      id="root"
      style="
>
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
left: 0;
    overflow-y: auto;
"
<!-- This div is where the widget will be inserted. The data attributes are user- provided values that will be used to authenticate requests -->
      <div
        id="WidgetContainer"
        data-clientsignature="YOUR_GENERATED_SIGNATURE_HERE”
        data-quickbuykey="YOUR_QUICKBUY_KEY_HERE"
        style="
                    background-color: #fff;
                    max-width: 650px;
                    margin-left: auto;
                    margin-right: auto;
"
    <!-
- Import the index.js script below and it will insert the widget into the div it finds with
 id="WidgetContainer" -->
    <script src="https://quickbuy-v2.ibanera.com/index.js" id="QuickBuyScript"></script>
  </body>
</html>

PreviousQuickBuy Callback NextValidating the Webhook Signature

Last updated 1 year ago

Embedding the QuickBuy Widget