How do I install Afterpay on my website front end?

If your trial was created, or you installed your theme, after the 29th of August, this document is for you. Otherwise, you will need to follow the instructions in this legacy document.

Afterpay offers simple, flexible instalment plans for online shoppers. Customers can choose how and when they pay for an order. Afterpay is a payment method that you can offer to your customers. For more details, check out the Afterpay website.

After you have created an Afterpay account, you can follow the instructions below to set up Afterpay on your site.

Add Afterpay as a payment method in Neto

  1. From the Neto Dashboard, select Setup & tools > Payment Methods and click on the Add New button.

  2. Click on the Afterpay button.

    Afterpay button

  3. You can select what position this payment method appears on the drop down list on the Checkout page. To set the order, enter a number under Sort Order. The highest number will make the payment method first in the list and the lowest will appear last.

  4. To make this payment method inactive, click on the switch under Active/Enabled. Blue is active and gray in inactive.

  5. To show this payment method to customers on the Checkout click on the switch under Show on Website. If it is blue, this payment method will display to customers and if it is gray, it will be hidden from customers but you can still use it for orders in the control panel.

    Type and status

  6. If you want to use the test mode, select Sandbox under Afterpay Environment, otherwise select Live.

  7. Enter the Afterpay Merchant ID and Afterpay Secret. You can obtain these details from Afterpay.

  8. Select the Type Pay Over Time (PBI). 

  9. Select the Currency that the payment will used for the payment gateway. Depending on the gateway, you may have AUD - Australian Dollar as the only option.

  10. If you want to apply a surcharge for payments using this payment method, enter the percentage under Surcharge.

  11. If you only want this payment method to be available when the order reaches a certain dollar amount, enter the amount under Min Spend.

  12. If you want to hide this payment method if the order total is over a certain amount, enter the amount under Max Spend.


  13. Click on Continue to save the settings.

Installing Custom Scripts

To set up Afterpay using the new custom scripts, you need to configure two distinct custom scripts:

Script 1—AP modal

The first script needs to simply contain the code for the modal.

  1. To install a new third party script, from the Neto Dashboard, select Setup & tools > All settings & tools.
  2. On the Setup & Tools page, search for a select Custom Scripts.
  3. On the Custom Scripts page Click Add New.
  1. Name your script: AP Modal
  2. In the scripts section, switch to the Page Footer tab and paste the below code:
<link rel="stylesheet" type="text/css" href="" 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 class="ap-row">
                    <div class="ap-col-3">
                        <img alt="Afterpay" width="145" src="">
                        <h2>Shop Now. Pay Later. <br>100% Interest-free.</h2>
                        <p>Simple instalment plans available instantly at checkout</p>
                    <div class="ap-col-3">
                        <img class="ap-screen" src="">
            <div class="ap-row">
                <div class="ap-col-2 ap-center">
                    <img src="">
                    <h4>Select Afterpay as your payment method</h4>
                    <p>Use your existing debit or credit card</p>
                <div class="ap-col-2 ap-center">
                    <img src="">
                    <h4>Complete your checkout in seconds</h4>
                    <p>No long forms, instant approval online</p>
                <div class="ap-col-2 ap-center">
                        <img src="">
                        <h4>Pay over 4 equal instalments</h4>
                        <p>Pay fortnightly, enjoy your purchase straight away!</p>
            <div class="ap-row">
                <div class="ap-col-6 ap-terms">
                    <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="" target="_blank"></a></p>
                    <p class="ap-center">
                        &copy; [%format type:'date' format:'#Y'%]now[%/format%] Afterpay
  1. Click Save

Script 2—AP widgets

The final script contains all of the code for the widgets:

Product page (under buying options)

  1. On the Custom Scripts page Click Add New.
  2. Name your script: AP Widgets
  3. 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="//" style="width: 100px;"> More info</a>.</p>
<p>Make [@REFERRAL_KEY1@] interest-free payments of <strong>[%format type:'currency'%][%calc [@store_price@]/[@REFERRAL_KEY1@] /%][%/format%]</strong> fortnightly and receive your order now.</p>

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:

<div class="panel panel-default">
    <div class="panel-body">
        <img src="//" 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>
            <li>[@REFERRAL_KEY1@] simple payments</li>
            <li>100% interest-free, no hidden fees</li>
            <li>Instant approval online</li>
        <p>Just select Afterpay as your payment method on checkout.</p>

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>

Referral keys

You will now need to set the referral keys on the third-party script:

  • Key 1: ([@REFERRAL_KEY1@]) is the number of payments.
  • Key 2: ([@REFERRAL_KEY2@]) is the number of weeks.

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

  • Last Modified: 19/10/2016 Neto Version: 6.3