> ## Documentation Index
> Fetch the complete documentation index at: https://docs.supertab.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Purchase button

> Use browser JS purchase button integration

Supertab purchase button renders a button in DOM. When clicked, it initiates the purchase flow. Throughout the customer’s journey, various events may occur. Callback functions, defined in the initialization object, are triggered for these events, enabling you to handle them as needed.

To get started with purchase button, first <a href="../supertab-experiences/experiences">set up the experience</a>. Once complete, the code snippet generated in the final step of the Experience Editor will look similar to the following:

```js theme={null}
<script type="module">
  import { createPurchaseButtonExperience } from "https://js.supertab.co/v1/experiences.js";

  (async () => {
    const { destroy } = await createPurchaseButtonExperience({
      containerElement: document.getElementById("YOUR_ELEMENT_ID"),
      clientId: "live_client.41aa0927-e29f-4572-add8-3c73fa0c0367",
      merchantName: "Your website name",
      merchantLogoUrl: "https://yourwebsite.com/path-to-logo.png",
      offeringId: "offering.77bdfc93-5de0-48da-a9d0-65754e0bb947",
      label: "Put it on my tab",
      onPurchaseCompleted: () => {
        //insert your code to grant user access
        console.log("Purchase completed!");
      },
      onPriorEntitlement: () => {
        //insert your code to handle when prior entitlement is detected
        console.log("User has prior entitlement.");
      },
      onPurchaseCanceled: () => {
        //insert your code to handle when purchase is not completed
        console.log("Purchase canceled!");
      },
      onError: () => {
        //insert your code to handle an unexpected error
        console.log("Purchase error!");
      },
      uiConfig: {
        colors: {
          text: "#9b4c4cff",
          background: "#ffffffff",
        },
      },
    });
  })();
</script>
```

The async function `createPurchaseButtonExperience` returns the object with `destroy` property which can be called to remove purchase button from DOM when interaction with a button is no longer needed.

## Initialization object properties

<ParamField path="containerElement" type="Element" required>
  DOM Element to render the purchase button in.
</ParamField>

<ParamField path="clientId" type="string" required>
  Supertab client ID with `live_` or `test_` prefix. `test_` means the
  integration runs in <a href="../supertab-experiences/test-mode">test mode</a>.
</ParamField>

<ParamField path="merchantName" type="string" required>
  Your website name displayed in the purchase dialog on confirmation screen.
</ParamField>

<ParamField path="merchantLogoUrl" type="string" required>
  URL path to your logo. Displayed on confirmation screen.
</ParamField>

<ParamField path="offeringId" type="string">
  Offering ID to sell via the purchase button. If not supplied, the first website
  offering is used.
</ParamField>

<ParamField path="label" type="string">
  Purchase button label. Default: `Put it on my tab`.
</ParamField>

<ParamField path="uiConfig" type="object">
  An object defining custom colors for the button.

  `text` HEX code for text color. Default: `#ffffff`

  `background` HEX code for background color. Default: `#0000000`
</ParamField>

## Callback functions

<ParamField path="onPurchaseCompleted" type="function">
  Called when the purchase is successfully completed.
</ParamField>

<ParamField path="onPriorEntitlement" type="function">
  Called when a user has prior entitlement to the offering and can access the
  content without a purchase. The prior entitlement may occur only for offerings
  with access managed by Supertab – currently time passes and subscriptions.
</ParamField>

<ParamField path="onPurchaseCanceled" type="function">
  Called when a user dismisses the purchase flow.
</ParamField>

<ParamField path="onError" type="function">
  Called when there was an unexpected error that prevents the purchase flow to
  continue. For example when wrong client ID and offering ID are supplied, or
  some API call failed because of network error.
</ParamField>