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>
<script>
superjs.init(<YOUR_PUBLISHABLE_KEY>, { integrationId: <YOUR_PAYMENT_INITIATOR>, platform: <YOUR_PLATFORM>, page: <YOUR_PAGE> });
</script>
</body><body>
<!-- other site content goes here -->
<script src="https://cdn.superpayments.com/js/test/super.js"></script>
<script>
superjs.init(<YOUR_PUBLISHABLE_KEY>, { integrationId: <YOUR_PAYMENT_INITIATOR>, 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 keyWe will shortly make the
PUBLISHABLE_KEYandYOUR_PAYMENT_INITIATORavailable in the business portal, but in the mean time you can make a request directly to the api using yourSUPER_API_KEYto 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.
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.
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:
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
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 a single product and is suitable for product detail/product listing pages.
It takes the following attributes:
Example usage:
Place this where you want the component displayed
<super-product-callout productamount="1800" page="product-listing" cartid="examplecart"></super-product-callout>