PlatformsBigCommerce

Cash App Afterpay Site Messaging

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

Be careful, as these instructions need you to edit code. Before you make any changes to theme template files, back up your current theme customizations.
There are two types of theme platform on BigCommerce; Stencil and Blueprint.

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

If you are not sure what platform is used by your store, see Which Theme Platform do I have?.

Stencil Theme

  1. Go to Storefront › Script Manager

  2. Click Create a Script.

  3. Set up the following:

    • Name of Script: Cash App Afterpay Messaging
    • Description: Place Cash App Afterpay 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
1<!-- Begin Afterpay Stencil Snippet for BigCommerce v3.1.2 -->
2<script>
3{{#or (if page_type '===' 'product') (if page_type '===' 'cart')}}
4    (function(){
5        const supported = ["AUD", "NZD", "USD"];
6        const currency = '{{currency_selector.active_currency_code}}';
7        if (supported.indexOf(currency) > -1) {
8            {{#if page_type '===' 'product'}}
9                let targetSelector = '.productView .productView-price';
10            {{#if product.price.with_tax}}
11                let priceSelector = '.productView-price .price--withTax';
12                let cachedAmount = '{{product.price.with_tax.value}}';
13            {{else}}
14                let priceSelector = '.productView-price .price--withoutTax';
15                let cachedAmount = '{{product.price.without_tax.value}}';
16            {{/if}}
17            {{else if page_type '===' 'cart'}}
18                let targetSelector = 'ul.cart-totals li.cart-total:last-child';
19                let priceSelector = '.cart-total-grandTotal';
20                let cachedAmount = '{{cart.grand_total.value}}';
21            {{/if}}
22                const locales = {
23                    AUD: 'en_AU',
24                    NZD: 'en_NZ',
25                    USD: 'en_US',
26                };
27                const init = function(){
28                    Afterpay.createPlacements({
29                        targetSelector: targetSelector,
30                        attributes: {
31                            locale: locales[currency],
32                            currency: currency,
33                            amount: cachedAmount,
34                        }
35                    });
36                };
37                const script = document.createElement('script');
38                script.src = "https://js.afterpay.com/afterpay-1.x.js";
39                script.dataset.min = "1.00";
40                script.dataset.max = "2000.00";
41                script.onload = function () {
42                    init();
43                    setInterval(() => {
44                        if (cachedAmount != document.querySelector(priceSelector).innerText) {
45                           cachedAmount = document.querySelector(priceSelector).innerText;
46                           if (document.querySelector('afterpay-placement')) {
47                               document.querySelector('afterpay-placement').dataset.amount = cachedAmount;
48                           } else {
49                               init();
50                           }
51                        }
52                    }, 400);
53                };
54                document.head.appendChild(script);
55        }
56    })();
57{{/or}}
58</script>
59<!-- End Afterpay Stencil Snippet for BigCommerce v3.1.2 -->

You can modify the script so that the banner will only display a price breakdown if the product meets your order minimum and maximum thresholds.

To do so, you will need to edit the following values within the script and set the minimum and maximum values to mirror your Cash App Afterpay account settings:

script.dataset.min = "1.00";
script.dataset.max = "800.00";

Banner not showing up?

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

Blueprint Theme

  1. Access your themes template files by going to Storefront › Template Files.

  2. Find the file Panels/ProductDetails.html.

  3. Copy the script below and paste it into the Panels/ProductDetails.html file:

Blueprint
1<!-- Begin Afterpay Blueprint Snippet for BigCommerce v2.0.2 -->
2<afterpay-placement></afterpay-placement>
3<script>
4    (function(){
5        const supported = ["AUD", "NZD", "USD"];
6        const currency = '%%GLOBAL_CurrentCurrencyCode%%';
7        if (supported.indexOf(currency) > -1) {
8            let priceSelector = '.ProductDetailsGrid .VariationProductPrice';
9            let cachedAmount = '%%GLOBAL_RawProductPrice%%';
10            const locales = {
11                AUD: 'en_AU',
12                NZD: 'en_NZ',
13                USD: 'en_US',
14            };
15            const placement = document.querySelector('afterpay-placement');
16            placement.dataset.locale = locales[currency];
17            placement.dataset.currency = currency;
18            placement.dataset.amount = cachedAmount;
19            const script = document.createElement('script');
20            script.src = "https://js.afterpay.com/afterpay-1.x.js";
21            script.dataset.min = "1.00";
22            script.dataset.max = "2000.00";
23            script.onload = function () {
24                setInterval(() => {
25                    if (cachedAmount != document.querySelector(priceSelector).innerText) {
26                       cachedAmount = document.querySelector(priceSelector).innerText;
27                       placement.dataset.amount = cachedAmount;
28                    }
29                }, 400);
30            };
31            document.head.appendChild(script);
32        }
33    })();
34</script>
35<!-- End Afterpay Blueprint Snippet for BigCommerce v2.0.2 -->

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