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:

More Examples


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>