QuickBuy Front End Implementation
Embedding the QuickBuy Widget
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>
withid="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
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>
Last updated