Afterpay Site Messaging

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

Open Script Manager

BigCommerce Dashboard > Storefront > Script Manager

Script manager allows us to add our code to your store.

Create a Script

Click 'Create a Script'

Add Script Details

  • Fill out the information as shown below:
  • Name of Script: Afterpay Messaging
  • Description Place Afterpay Site Messaging on product and cart pages
  • Location on page: Footer
  • Select pages where script will be added: Store Pages
  • Script Category: Functional
  • Script type: Script

Add Script Contents

Copy the following script:

<!-- Begin Afterpay Stencil Snippet for BigCommerce v3.1.0 -->
<script>
{{#or (if page_type '===' 'product') (if page_type '===' 'cart')}}
    (function(){
    {{#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 locales = {
            AUD: 'en_AU',
            NZD: 'en_NZ',
            USD: 'en_US',
        };
        const init = function(){
            Afterpay.createPlacements({
                targetSelector: targetSelector,
                attributes: {
                    locale: locales['{{currency_selector.active_currency_code}}'],
                    currency: '{{currency_selector.active_currency_code}}',
                    amount: cachedAmount,
                }
            });
        };
        const script = document.createElement('script');
        script.src = "https://js.afterpay.com/afterpay-1.x.js";
        script.dataset.min = "1.00";
    {{#if currency_selector.active_currency_code "==" "USD"}}
        script.dataset.max = "2000.00";
    {{else}}
        script.dataset.max = "2000.00";
    {{/if}}
        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 Afterpay Stencil Snippet for BigCommerce v3.1.0 -->

Place it into the Script contents box and click Save.

Example of our code copied to `Script contents`Example of our code copied to `Script contents`

Example of our code copied to Script contents

You should now see Afterpay's messaging underneath the price of products and the cart total.


Next Steps
Did this page help you?