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.

### 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` | Your payment initiator 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
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:**

```undefined
<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.

| 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:**

```undefined
<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.

| 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:**

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