Clearpay Site Messaging

How can I add Clearpay Site Messaging to my product and cart pages?

🚧

These instructions require editing code! Before making any changes to theme template files, back up your current theme customizations.

There are 2 types of Theme Platform on BigCommerce. Stencil & Blueprint.
Follow the instructions below according to which Theme Platform your store uses.

See Which Theme Platform do I have? if you are unsure which theme platform your store uses

Stencil

  1. Go to StorefrontScript 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
  1. Copy and paste the below script into Script Contents:
<!-- Begin Clearpay Stencil Snippet for BigCommerce v3.1.1 -->
<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 = "1000.00";
                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.1 -->

🚧

Banner not showing up?

Sometimes the script may not work because the HTML elements may be named differently depending on your theme. Please work with your developer to help update the script depending on your theme.

Blueprint

  1. Access your themes template files by going to Storefront › Templates Files.
    Find the file Panels/ProductDetails.html.
  2. Copy the script below and paste it in Panels/ProductDetails.html:
<!-- Begin Clearpay Blueprint Snippet for BigCommerce v2.0.1 -->
<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 = "1000.00";
            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.1 -->