Knowledge Base

Neto By Maropost

Add Afterpay Widgets

Please Note: The follow steps are not required for new installations of Afterpay; the widgets are added automatically as part of the payment method setup.

Installing the Afterpay widget requires several custom scripts as well as design tweaks to your website files.

Install Custom Scripts

You can install custom scripts on your product pages to encourage customers to use Afterpay. It will automatically break down the cost into instalments so it's easy for your customer to know how much they are paying. Here's an example of how the end product page will look:

To set up Afterpay with the new custom scripts, you need to configure two distinct custom scripts covered in the sections below.

Script 1—AP Modal

The first script needs to simply contain the code for the modal to appear on different pages of your webstore:

In your Maropost Commerce control panel navigate to Settings & tools > All settings & tools.
On the Settings & Tools page, click on Custom Scripts.
On the Custom Scripts page click the Add New button.
Name your script AP Modal

In the scripts section, switch to the Page Footer tab and paste the below code:

For responsive websites:

    [%checkout_payment ignore_balance:'1' distinct:'1'%]
[%param *body%]
[%if [@payment_desc_type@] eq 'afterpay'%]
<link rel="stylesheet" type="text/css" href="https://assets.netostatic.com/assets/neto-cdn/afterpay/3.0.0/afterpay.css" media="all"/>
<div class="modal fade" id="afterpayModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content ap-content">
            <div class="ap-row">
                <div class="ap-col-12">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
            </div>
            <div>
                <img class="ap-logo" alt="Afterpay" src="https://assets.netostatic.com/assets/neto-cdn/afterpay/3.0.0/afterpay-badge.png">
                <h2>Shop Now. Pay Later. <br>Always interest-free.</h2>
            </div>
            <div class="ap-row">
                <div class="ap-col-12 ap-col-md-3">
                    <img src="https://assets.netostatic.com/assets/neto-cdn/afterpay/3.0.0/shop.svg">
                    <p>Add your favourites to cart</p>
                </div>
                <div class="ap-col-12 ap-col-md-3">
                    <img src="https://assets.netostatic.com/assets/neto-cdn/afterpay/3.0.0/laptop.svg">
                    <p>Select Afterpay at checkout</p>
                </div>
                <div class="ap-col-12 ap-col-md-3">
                    <img src="https://assets.netostatic.com/assets/neto-cdn/afterpay/3.0.0/sign-up.svg">
                    <p>Log into or create your Afterpay account, with instant approval decision</p>
                </div>
                <div class="ap-col-12 ap-col-md-3">
                    <img src="https://assets.netostatic.com/assets/neto-cdn/afterpay/3.0.0/payments.svg">
                    <p>Your purchase will be split into 4 payments, payable every 2 weeks</p>
                </div>
            </div>
            <div class="ap-terms">
                <p>All you need to apply is to have a debit or credit card, to be over 18 years of age, and to be a resident of country offering Afterpay</p>
                <p>Late fees and additional eligibility criteria apply. The first payment may be due at the time of purchase</p>
                <p>For complete terms visit <a href="https://www.afterpay.com/terms" target="_blank">https://www.afterpay.com/terms</a></p>
            </div>
        </div>
    </div>
</div>
[%/if%]
[%/param%]
[%/checkout_payment%]

For fixed unresponsive websites:

<style>
#afterpayModal .ap-row
{ margin-left: 0px!important; margin-right: 0px!important }

#afterpayModal .ap-col-3,#afterpayModal .ap-col-2,#afterpayModal .ap-col-6
{ position: relative; float: left }

#afterpayModal .ap-col-3,#afterpayModal .ap-col-2,#afterpayModal .ap-col-6
{ position: relative; padding-right: 0px!important; padding-left: 0px!important; float: left }

#afterpayModal .ap-content
{ border-radius: 6px }

#afterpayModal
{ border-radius: 6px }

#afterpayModal
{ display: none }

#afterpayModal.in
{ display: block }
</style>

<link rel="stylesheet" type="text/css" href="https://cdn.neto.com.au/assets/neto-cdn/afterpay/2.0.0/afterpay.css" media="all"/>
<div class="modal fade" id="afterpayModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content ap-content">
            <div class="ap-header">
                <div class="ap-row">
                    <div class="ap-col-6">
                        <button type="button" class="ap-close ap-pull-right" data-dismiss="modal">Close &times;</button>
                    </div>
                </div>
                <div class="ap-row">
                    <div class="ap-col-3">
                        <img alt="Afterpay" width="145" src="https://cdn.neto.com.au/assets/neto-cdn/afterpay/ap-01.png">
                        <h2>Shop Now. Pay Later. <br>100% Interest-free.</h2>
                        <p>Simple instalment plans available instantly at checkout</p>
                    </div>
                    <div class="ap-col-3">
                        <img class="ap-screen" src="https://cdn.neto.com.au/assets/neto-cdn/afterpay/2.0.0/afterpaycart.png">
                    </div>
                </div>
            </div>
            <div class="ap-row">
                <div class="ap-col-2 ap-center">
                    <img src="https://cdn.neto.com.au/assets/neto-cdn/afterpay/2.0.0/step1.svg">
                    <h4>Select Afterpay as your payment method</h4>
                    <p>Use your existing debit or credit card</p>
                </div>
                <div class="ap-col-2 ap-center">
                    <img src="https://cdn.neto.com.au/assets/neto-cdn/afterpay/2.0.0/step2.svg">
                    <h4>Complete your checkout in seconds</h4>
                    <p>No long forms, instant approval online</p>
                </div>
                <div class="ap-col-2 ap-center">
                        <img src="https://cdn.neto.com.au/assets/neto-cdn/afterpay/2.0.0/step3.svg">
                        <h4>Pay over 4 equal instalments</h4>
                        <p>Pay fortnightly, enjoy your purchase straight away!</p>
                </div>
            </div>
            <div class="ap-row">
                <div class="ap-col-6 ap-terms">
                    <hr>
                    <p><strong>All your need is:</strong></p>
                    <p>1) An Australian Visa or Mastercard debit/credit card; 2) To be over 18 years of age; 3) To live in Australia</p>
                    <p>To see Afterpay's complete terms, visit <a href="https://www.afterpay.com.au/terms" target="_blank">https://www.afterpay.com.au/terms</a></p>
                    <p class="ap-center">
                        &copy; [%format type:'date' format:'#Y'%]now[%/format%] Afterpay
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

Click the Save button.

Script 2—AP Widgets

The other scripts contains all of the code for the widgets on the different pages of your webstore:

Product page (under buying options)

On the Custom Scripts page click the Add New button.
Name your script AP Widgets.

In the scripts section, switch to the Product page (under buying options) tab and paste the below code:

<p style="margin-top:15px;"><a data-toggle="modal" data-target="#afterpayModal" href="#"><img src="//cdn.neto.com.au/assets/neto-cdn/afterpay/ap-01.jpg" style="width: 100px;"> More info</a>.</p>
<p> [%if [@inpromo@]%]
Make [@REFERRAL_KEY1@] payments of [%format type:'currency'%][%calc [@promo_price@]/[@REFERRAL_KEY1@] /%][%/format%] over 8 weeks and get it now!
[%else%]
Make [@REFERRAL_KEY1@] payments of [%format type:'currency'%][%calc [@store_price@]/[@REFERRAL_KEY1@] /%][%/format%] over 8 weeks and get it now!
[%/if%]</p>

Click the Save button.

Checkout (call to action) on cart page

In the scripts section, switch to the Checkout (call to action) on cart page tab and paste the below code:

<hr>
<div class="panel panel-default">
    <div class="panel-body">
        <img src="//cdn.neto.com.au/assets/neto-cdn/afterpay/ap-01.jpg" style="width: 150px;margin-bottom: 15px;">
        <h4><strong>No payment today.</strong> Buy now, pay [@REFERRAL_KEY1@] interest-free payments over [@REFERRAL_KEY2@] weeks.</h4>
        <ul>
            <li>[@REFERRAL_KEY1@] simple payments</li>
            <li>100% interest-free, no hidden fees</li>
            <li>Instant approval online</li>
        </ul>
        <p>Just select Afterpay as your payment method on checkout.</p>
    </div>
</div>

Click the Save button.

Product Thumbnails

In the scripts section, switch to the Product Thumbnail tab and paste the below code:

<p>Make [@REFERRAL_KEY1@] interest-free payments of <strong> [%if [@inpromo@]%][%format type:'currency'%][%calc [@promo_price@]/[@REFERRAL_KEY1@] /%][%/format%] [%else%][%format type:'currency'%][%calc [@store_price@]/[@REFERRAL_KEY1@] /%][%/format%] [%/ if%] </strong> fortnightly and receive your order now.</p>

Click the Save button.

Referral Keys

You will now need to set the referral keys on the third-party script. The keys display how many payments a customer needs to make, and over how many weeks:

With the AP Widgets script open, scroll up to the Keys section. In the Key 1 field, enter the number of payments for an order to be paid off.
In the Key 2 field, enter the number of weeks for an order to be paid off.
Click the Save button.
Repeat these step for AP Modal script, entering the same amounts as the AP Widgets script.

With those two fields populated identically on both third-party scripts, the dollar amounts and time periods will automatically be generated everywhere required.

Modify Your Website Design Templates

Please Note: If you change your theme you may need to complete these steps again.

Some themes have these changes in place already, but you should still check the relevant templates to be sure.

To modify your webstore templates for Afterpay:

In your Maropost Commerce control panel, navigate to Settings & tools > All settings & tools.
In the System Templates section click Webstore Templates.
Open the header.template.html template (Web Themes > your current theme > templates > includes).

You now need to add code into certain parts of the template. Look for the below code:

<div class="time-text" itemprop="priceValidUntil" content="[%format type:'date' format:'#Y-#M-#d'%][@promo_end@][%END format%]">
[%format type:'date' format:' #H:#I #a, #d #K #Y'%][@promo_end@][%/format%]
</div>
[%/if%]

Directly after this, add the code below:

[%tracking_code type:'BuyingOptions' /%]

Click the Save & close button.
Open the template.html template (Web Themes > your current theme > templates > products).

Find the below code:

[%upsell_products id:'[@SKU@]' limit:'[@config:upsell_limit@]' template:'' show_all:'1'%]

Directly before this code, add in the code below (if it doesn't exist already):

[%tracking_code type:'ProductDescription' /%]

Click the Save & close button.
Open the template.html template (Web Themes > your current theme > templates > footers).

Find this code:

[%payment_methods ignore_balance:'1'%]
[%param header%]<ul class="list-inline">[%/param%]
[%param *body%]

Directly after it, add in the code below:

[%if [@name@] like 'Afterpay' || [@name@] like 'After pay'%]
<li>
<div class="payment-icon-container">
<div class="payment-icon" style="background-image: url(https://cdn.neto.com.au/assets/neto-cdn/payment-icons/1.0.0/afterpay-payovertime.svg); height: 30px;"></div>
</div>
</li>             
[%/if%]

Click the Save & close button.
To add the Afterpay details to the thumbnail view, open the template.html template (Web Themes > your current theme > thumbs > products).

Look for this line:

<!-- Purchase Logic -->
<form class="form-inline buying-options">

Directly before this, add in the below code (if it doesn't exist already):

[%if [@form:disable_scripts@] ne 'true'%]
      [%tracking_code type:'Thumbnails' /%]
      [%/if%]

Click the Save & close.

Now view a product on your website and check that the Afterpay instalments are showing and calculating correctly to confirm the setup is complete.