This article has moved to a new home. View the updated version

Adding Afterpay widgets



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

Installing 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 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.
  4. Name your script: AP Modal
  5. In the scripts section, switch to the Page Footer tab and paste the below code:
  6. For responsive websites:

    <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/2.0.0/afterpaylogo.svg">
                            <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>
    

    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/2.0.0/afterpaylogo.svg">
                            <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>
    
  7. 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="//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>

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>

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.


Modify Your Website Design Templates

Please Note: Before you begin, remember if you change your theme, you may need to redo this part again.

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

  1. From the Neto dashboard, navigate to Setup & Tools > All settings & tools.

  2. Click on the System Templates tab and click Webstore Templates.

  3. Click Web Themes, click your current theme, click templates, click products, click includes, click header.template.html


  4. Look for the following 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%]
  5. Add the following code directly underneath:

    [%tracking_code type:'BuyingOptions' /%]

  6. Click Save and then go back to the Webstore Templates.

  7. Now click Web Themes, click your current theme, click templates, click products, click template.html.



  8. Look for the following code:

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

  9. Add the following code directly above (if it doesn't exist already):

    [%tracking_code type:'ProductDescription' /%]

  10. Click Save and then go back to the Webstore Template.

  11. Now click Web Themes, click your current theme, click templates, click footers, click template.html

  12. Look for the following code:
    [%payment_methods ignore_balance:'1'%][%param header%]<ul class="list-inline">[%/param%][%param *body%]
  13. Add the following code directly 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%]
  14. Click Save and then go back to the Webstore Template.
  15. To add the Afterpay detials to the thumbnail view, click Web Themes, click your current theme, click thumbs, click products, click template.html.

  16. Look for the following line:

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

  17. Add the following code directly above (if it doesn't exist already):

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

  18. Click Save.

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


  • Last Modified: 28/09/2017 Neto Version: 6.9