How do I install zipMoney on my website front end?



This article is for installation of zip money after August 2016. Please see the older instructions at the bottom of this page

Setting up zipMoney widgets

After adding zipMoney as a payment method through your Neto control panel, you can follow the below instructions to add the zipMoney widgets to your website front end templates.

First, get your merchant ID from zipMoney. Then you’ll need to setup a new custom script - go to Setup & tools > All settings & tools. Then search for Custom Scripts.

Once here, press Add new then add the name “Zipmoney”.

Then head down to the “Scripts” section and open up the tab “Page Footer” and insert the following script - ensuring that where it says YOURIDHERE you place the merchant ID you previously acquired from zipMoney:

<script type="text/javascript" src="//d3k1w8lx8mqizo.cloudfront.net/lib/js/zm-widget-js/dist/zipmoney-widgets-v1.min.js"></script>
<div data-zm-merchant="YOURIDHERE" data-env="production"></div>

Cart page widget

Select the “Checkout (call to action) on cart page” tab then proceed to paste the below code into it, then save.

<div  data-zm-asset="cartwidget"   data-zm-widget="popup" data-zm-popup-asset="termsdialog"></div>

Product page widget

Select the “Product page (Under buying options)” tab then proceed to paste the below code into it, then save.

<div zm-widget="repaycalc"  zm-amount="150" ></div>

Information page

Finally, if you want a page your customers can visit to learn more about zipMoney:

  • Go to Webstore > Web page then “Add new”
  • Name it “zipMoney information”, scroll down to page content, select “Source code” and copy & paste the below code
<div zm-asset="landingpage"  zm-widget="inline"></div>
  • Save

Pre August 2016 zipMoney installation instructions

This is for sites built before August, 2016

After adding zipMoney as a payment method through your Neto control panel, you can follow the below instructions to add the zipMoney widget and icons to your website front end templates. You'll require SFTP access and a FTP client such as Mozilla FileZilla to complete this task.

If you do wish to proceed to complete this yourself and errors do occur and support tickets have to be raised to fix the issues, it will billable by Neto.

 

1. Install required assets

to the following directory /httpdocs/assets/zipmoney/

 

2. Add the zipMoney payment icon to checkout

Go to the template /private/www/netosuite/Templates/yourtheme/cart/onepage.template.html (where yourtheme is the name of your current theme).

Locate the payment icons section in the code by searching for _cpy_payicon and add the following code as the last list item:

<!--##[%DATA id:'name' if:'like' value:'zipMoney'%]##-->
                    <style>
                        .payment-icon-zipmoney {
                            background-image: url(/assets/zipmoney/payment_icon.png);
                            background-repeat: no-repeat;
                            height:32px;
                            background-size:100%;
                        }
                    </style>

                    <li>
                        <a class="_cpy_payicon" ref="5790" href="javascript:void(0);">
                            <div class="payment-icon-container">
                                <div class="payment-icon payment-icon-zipmoney"></div>
                            </div>
                        </a>
                    </li>

<!--##[%END DATA%]##-->

 

3. Add zipMoney description to checkout

Locate the following code on /private/www/netosuite/Templates/yourtheme/cart/onepage.template.html

<div ref="other" class="_cpy_paydesc alert alert-info"> Our bank details will be provided after you confirm your order below.</div>

 

Add the following code directly after the above:

<div ref="zipmoney" class="_cpy_paydesc alert alert-info">zipMoney offers a simple, flexible, line of credit that allows you to shop online and pay back over time. You will be directed to zipMoney on order confirmation to complete your purchase. <a class="notify_popup" href="/assets/zipmoney/popup/popup.html" data-fancybox-type="iframe">learn more</a></div>

 

4. Add code to activate zipMoney widget popups (fancybox trigger)

Locate custom.js file by going to /httpdocs/assets/themes/yourtheme/js

Add the below script your javascript file (custom.js by default). This calls Fancybox for the zipMoney popup.

// Zip Money
$('a[rel=zipmoney1]').fancybox({
    width    : 800,
    height    : 700
 });

 

5. Add zipMoney widget to product page

Add the below code to /private/wwww/netosuite/Templates/yourtheme/products/includes/buying_options.template.html (below the existing add to cart button). This code shows the Zip Money Widget.

<!--##[%IF 1 AND standard EQ 'standard'%]##--> 
<div class="_zip_money_widget">
<a href="/assets/zipmoney/standard-page1.png" class="fancybox" rel="zipmoney1"><img src="/assets/zipmoney/standard-logo.png"/></a>
<a href="/assets/zipmoney/standard-page2.png" class="fancybox hidden" rel="zipmoney1">&nbsp;</a>
</div><hr/><!--##[%/IF%]##--> 
<!--##[%IF 1 AND standard EQ 'promotion'%]##--> 
<div class="_zip_money_widget">
<a href="/assets/zipmoney/promotion-page1.png" class="fancybox" rel="zipmoney1"><img src="/assets/zipmoney/promotion-logo.png"/></a>
<a href="/assets/zipmoney/promotion-page2.png" class="fancybox hidden" rel="zipmoney1">&nbsp;</a>
</div><hr/><!--##[%/IF%]##--> 

 

Note: The links to imagery are hosted in the /httpdocs/assets/zipmoney/ directory however the guys from zipMoney may ask that the paths point to images hosted on their own server or CDN which will allow them to update.

Note: On older themes you may need to add the above code to a different template, e.g. /products/includes/buy.template.html

 

6. Add zipMoney widget to shopping cart page (cart/shoppingcart.html)

Add the following code to /private/www/netosuite/Templates/yourtheme/cart/shopping_cart.template.html below the existing checkout button:

<div class="col-xs-12 text-right">
<p>
<!--##[%IF 1 AND standard EQ 'standard'%]##--> 
<div class="_zip_money_widget">
<a href="/assets/zipmoney/standard-page1.png" class="fancybox" rel="zipmoney1"><img src="/assets/zipmoney/standard-logo.png"/></a>
<a href="/assets/zipmoney/standard-page2.png" class="fancybox hidden" rel="zipmoney1">&nbsp;</a>
</div><hr/><!--##[%/IF%]##--> 
<!--##[%IF 1 AND standard EQ 'promotion'%]##--> 
<div class="_zip_money_widget">
<a href="/assets/zipmoney/promotion-page1.png" class="fancybox" rel="zipmoney1"><img src="/assets/zipmoney/promotion-logo.png"/></a>
<a href="/assets/zipmoney/promotion-page2.png" class="fancybox hidden" rel="zipmoney1">&nbsp;</a>
</div><!--##[%/IF%]##--> 
</p> 
</div>

 

7. Add messaging to thankyou page

Add below code to the top of /private/www/netosuite/Templates/yourtheme/cart/invoice.template.html to replace the existing order confirmation message.

[%show_order id:'' customer:''%][%PARAM *header%]
[%IF not like 'Customer cancelled zipMoney payment'%]
<div class="alert alert-success">Congratulations - Your Order Has Been Confirmed!</div>
[%/IF%]
<p>
[%IF eq 'On Hold' AND < '1' AND like 'Currently under review by zipMoney'%]
<div class="alert alert-warning" role="alert">
<img src="/assets/zipmoney/logo.png" alt="ZipMoney" style="float:right;"/> <strong>Your order is currently under review by zipMoney and will be processed very shortly.</strong> <br>
Don't worry, this usually takes less than 1 business hour! For any enquiry, please contact: <a href="mailto:customercare@zipmoney.com.au">customercare@zipmoney.com.au</a>.
</div>
[%ELSEIF eq 'On Hold' AND < '1' AND like 'Pending zipMoney approval'%]
<div class="alert alert-warning" role="alert">
<img src="/assets/zipmoney/logo.png" alt="ZipMoney" style="float:right;"/> <strong>Your order is pending zipMoney approval and will be processed very shortly.</strong> <br>
Don't worry, this usually takes less than 1 business hour! For any enquiry, please contact: <a href="mailto:customercare@zipmoney.com.au">customercare@zipmoney.com.au</a>.
</div>
[%ELSEIF eq 'New' AND < '1' AND like 'Declined by zipMoney'%]
<div class="alert alert-warning" role="alert">
<strong>Your payment is declined by zipMoney, please use <a href="[%URL page:'account' type:'pay_order' id:'' qs:'action=paynow'%][%END URL%]">another payment method</a>.</strong> <br>
</div>
[%ELSEIF eq 'New' AND < '1' AND like 'Customer cancelled zipMoney payment'%]
<div class="alert alert-warning" role="alert">
<strong>You've cancelled your zipMoney payment, please use <a href="[%URL page:'account' type:'pay_order' id:'' qs:'action=paynow'%][%END URL%]">another payment method</a>.</strong> <br>
[%/IF%]
</p>
[%END PARAM%][%END show_order%]

 

8. Prevent payment of on-hold orders    

Find and replace below code on /private/www/netosuite/Templates/yourtheme/customer/template.html. This will hide payment option if order is on hold and not yet paid.

Find:

[%DATA id:'amount_owed' if:'>' value:'0'%]
                    <div class="col-xs-12 col-md-4">
                    <button class="btn btn-block btn-success" onclick="location.href='[%URL page:'account' type:'pay_order' qs:'action=paynow' id:''%][%END URL%]'"><i class="fa fa-check icon-white"></i> Pay</button>
                    </div>
[%END DATA%] 


Replace with:

[%IF > 0 && ne 'On Hold'%]
                    <div class="col-xs-12 col-md-4">
                    <button class="btn btn-block btn-success" onclick="location.href='[%URL page:'account' type:'pay_order' qs:'action=paynow' id:''%][%END URL%]'"><i class="fa fa-check icon-white"></i> Pay</button>
                    </div>
[%END IF%] 

  • Last Modified: 23/09/2016 Neto Version: 5.96