Web Integration

Hubble Checkout’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-web-sdk-0.3.0.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
        style: {
            zIndex: 1000, // will default to 10
        }
    })
</script>

Step 3 - Open the plugin

When the plugin is opened, the webpage simply needs to call Hubble.checkout(brandKey) to open Amazon checkout.

<input type="button"
  value="Gift cards"
  onclick="openHubble()" />

function openHubble() {
  // Checkout function takes in brand_key of the brand whose checkout needs to be opened
  // We will share brand keys with the partners through other channels, post activation of brands
  Hubble.checkout("zomato");
}

Changelog

Version	Date	Changes	By
0.0.1		First version	Sudhagar
0.1.0	8-Apr-2024	Move denominations inside amount conditions	Sudhagar
0.1.1	9-Apr-2024	Support options to supply header image logo and href urls	Sudhagar
0.2.0	12-Apr-2024	Open the checkout as a modal so that partner’s page structure is intact	Sudhagar
0.2.1	17-Apr-2024	Add a loader that shows up till checkout page is loaded	Sudhagar
0.3.0	18-Apr-2024	Support opening checkout of any brand by taking in brand key	Sudhagar
0.3.1	19-Apr-2024	Support taking in a zIndex for the SDK view	Sudhagar