Important: The following steps are not required for new installations of Afterpay; the widgets are added automatically as part of the payment method setup. You will only need to
generate your widget code and add your
referral keys to activate the widgets.
In this Article
- Navigate to https://messaging.afterpay.com/login and log in with your Afterpay Merchant ID and Secret.
- Click on the Implementation Guide tab and scroll down to the Code Snippet sections for the Product and Cart Widgets.
- Take note of your personal Afterpay MPID and the Placement ID's for both widgets. These are displayed as the 'data-mpid' and 'data-placement-id' values respectively in the code snippets, you will need these for later.
You do not need to copy the entire code snippet contents, only the values specified above (do not include the double quotes around the values).
- If you wish to customise your Afterpay widgets at all please refer to Afterpay’s documentation.
Locate Custom Script
- From the Control Panel menu, navigate to SETTINGS & TOOLS > All Settings & Tools.
- From the left-hand submenu, select Analytics & 3rd Party Scripts
OR
Type Custom Scripts in the keyword search field at the top of the page. - Open your existing Afterpay custom script by clicking the Name or ID. You can identify the AfterPay script as it will have the System Code of afterpay_design. If you do not see this script, ensure you have the Afterpay payment method set up in the control panel of your Neto webstore.
- Delete any existing content from the Key fields.
- In the Scripts section of your Afterpay custom script page, click the Page Header tab.
- Copy the following code to your clipboard and paste into the text area, replacing any existing content.
[%checkout_payment ignore_balance:'1' distinct:'1'%]
[%param *body%]
[%if [@payment_desc_type@] eq 'afterpay' and [@config:current_page_type@] eq 'product' or [@config:current_page_type@] eq 'checkout' %]
<script src="https://js.squarecdn.com/square-marketplace.js" async></script>
[%/if%]
[%/param%]
[%/checkout_payment%]
- In the Scripts section of your Afterpay custom script page, click the Page Footer tab.
- Delete any existing code in the text area as this is not required for for the new Afterpay widgets.
Product page (under buying options)
- In the Scripts section of your Afterpay custom script page, click the Product page (under buying options) tab.
- Replace any existing code in the text area with the following code:
[%checkout_payment ignore_balance:'1' distinct:'1'%]
[%param *body%]
[%if [@payment_desc_type@] eq 'afterpay'%]
[%if [@min_balance@] == 0 %][%set [@min_balance@]%]1.00[%/set%][%/if%]
[%if [@max_balance@] == 0 %][%set [@max_balance@]%]2000.00[%/set%][%/if%]
[%set [@af_price@] %][%if [@inpromo@]%][@promo_price@][%else%][@store_price@][%/if%][%/set%]
[%set [@af_is_eligible@]%][%if [@af_price@] < [@max_balance@] and [@af_price@] > [@min_balance@]%]true[%else%]false[%/if%][%/set%]
[%set [@af_country@]%][%if [@CONFIG:defaultcountry@] eq 'US' %]en-US[%elseif [@CONFIG:defaultcountry@] eq 'CA' %]en-CA[%elseif [@CONFIG:defaultcountry@] eq 'GB' %]en-GB[%elseif [@CONFIG:defaultcountry@] eq 'NZ' %]en-NZ[%else%]en-AU[%/if%][%/set%]
<square-placement
data-mpid="[@referral_key1@]"
data-placement-id="[@referral_key2@]"
data-page-type="product"
data-amount="[@af_price@]"
data-currency="[@config:DEFAULTCURRENCY@]"
data-consumer-locale="[@af_country@]"
data-item-skus="[@sku@]"
data-item-categories="[%content_path id:'[@inventory_id@]' type:'category' limit:'1' *body:'[@content_name@]' /%]"
data-is-eligible="[@af_is_eligible@]">
</square-placement>
[%/if%]
[%/param%]
[%/checkout_payment%]
Checkout (call to action) on cart page
- In the Scripts section of your Afterpay custom script page, click the Checkout (call to action) on cart page tab.
- Replace any existing code in the text area with the following code:
[%checkout_payment ignore_balance:'1' distinct:'1'%]
[%param *body%]
[%if [@payment_desc_type@] eq 'afterpay'%]
[%set [@af_cart_contents@]%][%cart_items%][%param *body%][%if [@count@]%],[%/if%][@sku@][%/param%][%/cart_items%][%/set%]
[%set [@af_country@]%][%if [@CONFIG:defaultcountry@] eq 'US' %]en-US[%elseif [@CONFIG:defaultcountry@] eq 'CA' %]en-CA[%elseif [@CONFIG:defaultcountry@] eq 'GB' %]en-GB[%elseif [@CONFIG:defaultcountry@] eq 'NZ' %]en-NZ[%else%]en-AU[%/if%][%/set%]
[%set [@af_cart_cats@]%][%cart_items%][%param *body%][%if [@count@]%],[%/if%][%content_path id:'[@inventory_id@]' type:'category' limit:'1' *body:'[@content_name@]' /%][%/param%][%/cart_items%][%/set%]
<div class="card panel panel-default mt-2">
<div class="d-flex px-4 py-1 panel-body" style="min-height:94px;">
<square-placement
data-mpid="[@referral_key1@]"
data-placement-id="[@referral_key3@]"
data-page-type="cart"
data-amount="[@grand_total@]"
data-currency="[@config:DEFAULTCURRENCY@]"
data-consumer-locale="[@af_country@]"
data-item-skus="[@af_cart_contents@]"
data-item-categories="[@af_cart_cats@]"
class="align-self-center">
</square-placement>
<div class="clear"></div>
</div>
</div>
[%/if%]
[%/param%]
[%/checkout_payment%]
Product Thumbnails
- In the Scripts section of your Afterpay custom script page, click the Product Thumbnails tab.
- Delete any existing code in the text area as this is not required for for the new Afterpay widgets.
Referral Keys
- In the Keys section of your Afterpay custom script page, add your Afterpay Widget values as follows:
Key 1 = Afterpay MPID
Key 2 = Product Placement ID
Key 3 = Cart Placement ID
Click the Save button at the bottom of the Afterpay custom script page and verify your script changes.
-
Your webstore is now using the latest Afterpay widget code. Refresh your webstore cache using the Refresh caches button in the control panel sidebar menu, then view a product page and the cart on your webstore to ensure the Afterpay widgets are now displaying.
Please Note: If your webstore has an AP Modal and/or AP Widgets custom script, you should now set these as Inactive to prevent duplicate Afterpay widgets from displaying on the webstore.