Zip Widgets
Zip offers merchants a number of helpful & informative widgets, which display more information about the product to site customers. The widgets are really easy to load onto the relevant pages, and should be able to completed by most merchant site admins.
If you are having any issues implementing these on your site, please contact integrationsnz@zip.co
Calculator Widget
Version 3
Usage
Example:
Code:
...
<body>
...
<div>
<script async src="https://widgets.partpay.co.nz/zip-widget-classic-v3.0.0.js?amount=300.00&locale=nz"></script>
</div>
...
</body>
Optional Query Parameters:
max
order amount. Max $1500 ifallowSplitPayment=false
min
order amount.wording=alternate
when widget doesn't appear near the pricelogo=alternate
when widget appears on a dark or busy backgroundjustification
lets you set the text alignment tocenter
orright
. Default is leftallowSplitPayment
- true by default. Will allow customers to spend above the $1,500 Zip credit limit
Version 2
Usage
Example:
Code:
...
<head>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.17/webcomponents-loader.js"></script>
<link rel="import" href="https://widgets.partpay.co.nz/pp-calculator.html">
...
</head>
<body>
...
<pp-calculator amount="59.95"></pp-calculator>
...
</body>
Parameters
Name | Description |
---|---|
min | Your minimum Zip amount |
max | Your maximum Zip amount |
amount | The order or cart amount |
Sizes
The Calculator Widget's width size can be controlled by wrapping the <pp-calculator>
tag inside of a div tag, and then setting using that div's width. The Calculator Widget is designed to be responsive so it should resize properly for screen sizes that are 320px or greater.
Version 1
Usage
Simply insert a <script>
tag, as defined below, onto the part of the page that is the right place for this to be displayed.
Base Url : https://widgets.partpay.co.nz/your-merchant-name/partpay-widget-0.1.1.js?type=calculator
Parameters
Name | Description |
---|---|
min | Your minimum Zip amount |
max | Your maximum Zip amount |
amount | The order or cart amount |
Demo
Code:
<script async src="https://widgets.partpay.co.nz/your-merchant-name/partpay-widget-0.1.1.js?type=calculator&min=50&max=5000&amount=300" type="application/javascript"></script>
Shopify
When using this widget in Shopify, you can pass the following values for the amount
parameters.
Parameters
Shopify Page | Value |
---|---|
Cart | {{ cart.total_price | divided_by: 100.0 }} |
Product | {{ current_variant.price | divided_by: 100.0 }} |
Example:
<script async src="https://widgets.partpay.co.nz/partpay-widget-0.1.1.js?type=calculator&min=50&amount={{ current_variant.price | divided_by: 100.0 }}" type="application/javascript"></script>
WooCommerce
When using this widget on WooCommerce, you can pass the following values for the amount
parameters.
Parameters
WooCommerce Page | Value |
---|---|
Cart | WC()->cart->cart_contents_total; |
Product | WC()->product-> get_price(); |
For example, on the product page:
<script async src="https://widgets.partpay.co.nz/partpay-widget-0.1.1.js?type=calculator&min=50&max=5000&amount=<?php echo $product->get_price(); ?>" type="application/javascript"></script>