> This page is for version v2 (default).
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.clearpay.co.uk/v-2/llms.txt
> - v1: https://developers.clearpay.co.uk/v-1/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.clearpay.co.uk/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.clearpay.co.uk/_mcp/server.

# BigCommerce

BigCommerce is a scalable and versatile commerce platform.

## Before you begin

Do the following:

1. Set the checkout type to *Optimised one-page checkout*.
2. Navigate to: *BigCommerce Control Panel > Advanced Settings > Checkout*.
3. Under *Checkout Settings*, the *Checkout Type* must be: *Optimised one-page checkout*.

## Add payment options

Complete the steps below to enable and display Clearpay as a Payment Method:

1. Navigate to the *BigCommerce Control Panel*.
2. Navigate to *Settings > Payments*.
3. Under the *Online Payment Methods* section, click the drop-down arrow.
4. Locate *Clearpay* from the *Online Payment Methods* list and click the **Set up** button beside it.
5. Enter the Merchant ID provided by Clearpay into the *Merchant ID* field.
6. Enter the Secret Key provided by Clearpay into the *Secret Key* field.

![](file:docs/assets/images/44f1a08-BigCommerceClearpay2.png "BigCommerceClearpay2.png")

7. Additionally, you can configure the following settings:

* *Transaction Type* — can be set to *Authorise & Capture* or *Authorise Only*. Authorise Only allows you to capture the funds manually. See [Manually Capturing Transactions (Authorise Only)](https://support.bigcommerce.com/s/article/Manually-Capturing-Transactions-Authorize-Only) to learn more.
* *Test Mode* — set this to **Yes** to test checkout flow. Make sure this is set to **No** when your store goes live.

> **Note**
>
> You need Clearpay Sandbox Credentials to use Test Mode. Please contact your Clearpay Delivery Manager or representative for information.

8. Click the **Save** button.

## Add Clearpay messaging

There are two types of theme platform on BigCommerce, Stencils and Blueprints. See [Which Theme Platform do I have?](https://support.bigcommerce.com/s/article/Which-Theme-Platform-do-I-have) if you are unsure which theme platform your store uses.

Follow the instructions below according to which theme platform your store uses.

> **Back up your current theme files**
>
> The instructions below involve editing code. Before you make any changes to theme template files, back up your current theme customisations.

### Stencil themes

1. Go to *Storefront › Script Manager*.
2. Click **Create a Script**.
3. Set up the following:
   * *Name of Script:* Clearpay Messaging
   * *Description:* Place Clearpay Site Messaging on product and cart pages
   * *Location on page:* Footer
   * *Select pages where script will be added:* Store pages
   * *Script category:* Essential
   * *Script type:* Script
   * *Load method:* Default
4. Copy and paste the below script into *Script Contents*:

**`Stencil`**

```javascript Stencil
<!-- Begin Clearpay Stencil Snippet for BigCommerce v3.1.2 -->
<script>
{{#or (if page_type '===' 'product') (if page_type '===' 'cart')}}
    (function(){
        let locale = 'en_GB'; // 'fr_FR' || 'es_ES' || 'it_IT'
        const supported = ["GBP", "EUR"];
        const currency = '{{currency_selector.active_currency_code}}';
        if (supported.indexOf(currency) > -1) {
            {{#if page_type '===' 'product'}}
                let targetSelector = '.productView .productView-price';
            {{#if product.price.with_tax}}
                let priceSelector = '.productView-price .price--withTax';
                let cachedAmount = '{{product.price.with_tax.value}}';
            {{else}}
                let priceSelector = '.productView-price .price--withoutTax';
                let cachedAmount = '{{product.price.without_tax.value}}';
            {{/if}}
            {{else if page_type '===' 'cart'}}
                let targetSelector = 'ul.cart-totals li.cart-total:last-child';
                let priceSelector = '.cart-total-grandTotal';
                let cachedAmount = '{{cart.grand_total.value}}';
            {{/if}}
                const init = function(){
                    Afterpay.createPlacements({
                        targetSelector: targetSelector,
                        attributes: {
                            locale: locale,
                            currency: currency,
                            amount: cachedAmount,
                        }
                    });
                };
                const script = document.createElement('script');
                script.src = "https://js.afterpay.com/afterpay-1.x.js";
                script.dataset.min = "1.00";
                script.dataset.max = "1200.00"; // As per your Clearpay contract.
                script.onload = function () {
                    init();
                    setInterval(() => {
                        if (cachedAmount != document.querySelector(priceSelector).innerText) {
                           cachedAmount = document.querySelector(priceSelector).innerText;
                           if (document.querySelector('afterpay-placement')) {
                               document.querySelector('afterpay-placement').dataset.amount = cachedAmount;
                           } else {
                               init();
                           }
                        }
                    }, 400);
                };
                document.head.appendChild(script);
        }
    })();
{{/or}}
</script>
<!-- End Clearpay Stencil Snippet for BigCommerce v3.1.2 -->
```

> **No banner?**
>
> If the banner doesn't appear, some HTML elements may be named differently in your theme. Work with your developer to update the script for your theme.

### Blueprint themes

1. To access your themes template files, navigate to *Storefront › Templates Files*.\
   Then find the file *Panels/ProductDetails.html*.
2. Copy the script below and paste it into *Panels/ProductDetails.html*:

**`Blueprint`**

```javascript Blueprint
<!-- Begin Clearpay Blueprint Snippet for BigCommerce v2.0.2 -->
<afterpay-placement></afterpay-placement>
<script>
    (function(){
        let locale = 'en_GB'; // 'fr_FR' || 'es_ES' || 'it_IT'
        const supported = ["GBP", "EUR"];
        const currency = '%%GLOBAL_CurrentCurrencyCode%%';
        if (supported.indexOf(currency) > -1) {
            let priceSelector = '.ProductDetailsGrid .VariationProductPrice';
            let cachedAmount = '%%GLOBAL_RawProductPrice%%';
            const placement = document.querySelector('afterpay-placement');
            placement.dataset.locale = locale;
            placement.dataset.currency = currency;
            placement.dataset.amount = cachedAmount;
            const script = document.createElement('script');
            script.src = "https://js.afterpay.com/afterpay-1.x.js";
            script.dataset.min = "1.00";
            script.dataset.max = "1200.00"; // As per your Clearpay contract.
            script.onload = function () {
                setInterval(() => {
                    if (cachedAmount != document.querySelector(priceSelector).innerText) {
                       cachedAmount = document.querySelector(priceSelector).innerText;
                       placement.dataset.amount = cachedAmount;
                    }
                }, 400);
            };
            document.head.appendChild(script);
        }
    })();
</script>
<!-- End Clearpay Blueprint Snippet for BigCommerce v2.0.2 -->
```

> **Supported Countries**
>
> Clearpay is available for BigCommerce merchants with a store address in these countries:
>
> 🇬🇧 UK
>
> As Afterpay in these countries:
>
> [🇺🇸 United States](https://developers.cash.app/afterpay/guides/platforms/big-commerce)\
> [🇦🇺 Australia](https://developers.afterpay.com/afterpay-online-developer/guides/platforms/big-commerce/introduction)\
> [🇳🇿 New Zealand](https://developers.afterpay.com/afterpay-online-developer/guides/platforms/big-commerce/introduction)\
> [🇨🇦 Canada](https://developers.afterpay.com/afterpay-online-developer/guides/platforms/big-commerce/introduction)
>
> BigCommerce currently only supports British Pounds (GBP) for Clearpay.\
> For Afterpay, BigCommerce supports AUD, NZD, USD & CAD.