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