Web Integration
Hubble Store’s web SDK is a Javascript sdk that can be integrated by a simple 2-step process
Step 1 - Add SDK source script
<head> ... <script src="https://assets.myhubble.money/web-sdk/hubble-store-sdk-0.1.2.min.js"></script></head>
Step 2 - Initialize the plugin
Once the plugin source is pulled, you initialise the plugin by using the below code snippet.
<script> Hubble.setOptions({ env: 'dev', // If not given, will default to 'prod' token: 'GOpBKIQ0xj', // Some token or ID that uniquely identifies your user clientId: 'clientA', // will be provided by Hubble team clientSecret: 'clientSecretA', // will be provided by Hubble team displayMode: 'iframe' // supported values - iframe, new_window. Defaults to new_window if not passed })</script>
Step 3 - Open the plugin
When the plugin is opened, the webpage simply needs to call Hubble.open()
to open Amazon checkout.
<input type="button" value="Gift cards" onclick="openHubble()" />
function openHubble() { Hubble.open();}
Embedding Hubble SDK in an Iframe
If you want to load Hubble’s SDK within an iframe hosted in your app, you can make use of Hubble.getUrl()
.
function loadHubble() { Hubble.setOptions({ env: 'dev', // If not given, will default to 'prod' token: 'GOpBKIQ0xj', // Some token or ID that uniquely identifies your user clientId: 'clientA', // will be provided by Hubble team clientSecret: 'clientSecretA', // will be provided by Hubble team })
const hubbleUrl = Hubble.getUrl() yourIframe.source = hubbleUrl}
Closing the SDK
You can setup a listener to which Hubble’s SDK will post a message
window.addEventListener("message", function (event) { if (event.data.type === "close") { // your close handling code goes here }});
Other concerns
On your iframe, make sure you set this attribute allow
to clipboard-write *
.
This will ensure card number copy inside the SDK works properly.
Changelog
Version | Date | Changes | By |
---|---|---|---|
0.0.1 | 12 Apr 2024 | First version | Sudhagar |
0.1.0 | 25 Apr 2024 | Move history management concerns out of SDK | Sudhagar |
0.1.1 | 03 May 2024 | Support both iframe and new window mode. | Priyanshu |
0.1.2 | 12 Dec 2024 | Support both getting the iframe url | Sudhagar |