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

Version 3
- Usage
Version 2
- Usage
- Sizes
Version 1

Version 3

Usage

Example:

Code:

...
<body>
  ...
  <div>
    <script async src="https://widgets.partpay.co.nz/zip-widget-classic-v3.0.0.js?amount=55.00&locale=nz"></script>
  </div>
  ...
</body>

Optional Query Parameters:

max order amount
min order amount.
wording=alternate when widget doesn't appear near the price
logo=alternate when widet appears on a dark or busy background
justification lets you set the text alignment to center or right. Default is left

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=400&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=400&amount=<?php echo $product->get_price(); ?>" type="application/javascript"></script>