Marketing Assets

Super provides a suite of components you can embed directly in your website by using our embedded javascript.

When the script is included, a superjs object is placed in the global namespace. The SDK must be initialized, once during its lifecycle, by calling the function superjs.init() with the required arguments.

<body>
  <!-- other site content goes here -->
  <script src="https://cdn.superpayments.com/js/super.js"></script> <!-- Test script "https://cdn.superpayments.com/js/test/super.js" -->
  <script>
    superjs.init(<YOUR_PUBLISHABLE_KEY>, { integrationId: <YOUR_INTEGRATION_ID>, platform: <YOUR_PLATFORM>, page: <YOUR_PAGE> });
  </script>
</body>

When including the JS SDK via a <script> tag it should be loaded synchronously. It's recommended to place the <script> tag at the bottom of the <body> element to avoid blocking the document from rendering.

📘
Obtaining your publishable key
We will shortly make the PUBLISHABLE_KEY and INTEGRATION_ID available in the business portal, but in the mean time you can make a request directly to the api using your SUPER_API_KEY to get the values:
curl https://api.superpayments.com/business-config -H "Authorization: $SUPER_API_KEY"
{
  "currentIntegration": "xxxxxxxxx",
  "publishableKeys": [
    {
      "key": "PUB_XXXXXXXX"
    }
  ]
}

Init Options

The superjs.init() function has two required arguments. The first argument is the Publishable Key. This is a unique key associated with a business and is used to authenticate with Super's backend services. Unlike the Private API Key, the Publishable Key has very limited capabilities and is suitable for embedding in a public web page.

The second function argument includes options for configuring the SDK. The following table describes these attributes, including any that are mandatory.

Option	Description	Type	Mandatory	Default
`integrationId`	ID used to determine which integration to use.	`string`	Yes	N/A
`page`	The page the SDK is being initialised on.	`'home'`, `'cart'`, `'checkout'`, `'product-listing'`, `'product-detail'`	Yes	N/A
`platform`	The e-commerce platform being used (if any).	`'woo-commerce'`, `'shopify'`, `'magento'`, `'big-commerce'`, `'custom'`	Yes	N/A
`platformVersion`	The version number of the e-commerce platform.	`string`	No	`"unknown"`
`superPluginVersion`	The version of the e-commerce Super plugin (if any).	`string`	No	`"unknown"`
`sdkVersion`	The Super JS SDK version. This is set automatically.	`string`	No	`"unknown"`

The mandatory SDK options, integrationId, page, and platform, are used to determine the display theme and layout of the Web Components on a merchant's website. Each merchant has the capability to configure these on a per-page, and per-integration basis. The non-mandatory attributes are primarily used for debugging.

Components

super-banner

It takes the following attributes:

This is the full-width banner component that can be displayed at the top of any page.

Option	Type	Mandatory	Default
`cartAmount`	`number`	Yes (can be "0")	`0`
`cartId`	`string`	No	`"unknown"`
`cartItems`	`CartItem[]`	No	`[]`
`page`	`Page`	No	`"unknown"`
`colorScheme`	`ColorScheme`	No	`"orange"`

Example usage:

Place this where you want the component displayed

<super-banner cartamount="0" page="product-listing" cartid="cart1" colorscheme="orange" cartitems="[]"></super-banner>

super-cart-callout

This is a "callout" element that can be placed on a page to highlight any offers from Super. Clicking on the callout triggers a description modal to open, that further explains & breaks down the particular offer. For this component, the offer is derived from the current cart amount.

It takes the following attributes:

Option	Type	Mandatory	Default
`cartAmount`	`number`	Yes (can be "0")	`0`
`cartId`	`string`	No	`"unknown"`
`cartItems`	`CartItem[]`	No	`[]`
`page`	`Page`	No	`"unknown"`
`placement`	`main`, `drawer`	No	`main`
`position`	`string`	No	`"primary"`
`width`	`string`	No	'null'

Example usage:

Place this where you want the component displayed

<super-cart-callout cartamount="1800" page="product-listing" cartid="examplecart" cartItems="[]"></super-cart-callout>

super-product-callout

It takes the following attributes:

Option	Type	Mandatory	Default
`productAmount`	`number`	Yes (can be "0")	`0`
`productQuantity`	`number`	No	`1`
`cartId`	`string`	No	`"unknown"`
`page`	`Page`	No	`"unknown"`
`width`	`string`	No	`null`

Example usage:

Place this where you want the component displayed

<super-product-callout productamount="1800" page="product-listing" cartid="examplecart"></super-product-callout>