PartPay Widgets

PartPay 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 support@partpay.co.nz


PartPayPlus Calculator Widget

Calculator Widget


PartPayPlus Calculator Widget

The PartPayPlus Calculator Widget is used to explain details of the PartPayPlus product to a potential client, as well as to provide a payment plan breakdown for the provided amount.

The Calculator Widget is built using Web Components. Depending on the browser versions you plan to support, you will need to add a polyfill include. It is recommended you use the polyfill unless you only support modern browsers, or you happen to use the polymer framework (which includes a polyfill by default).

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-plus-calculator.html">
  ...
</head>
<body>
  ...
  <pp-plus-calculator></pp-plus-calculator>
  ...
</body>

Sizes

The Calculator Widget's width size can be controlled by wrapping the <pp-info> 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 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 PartPay amount
max Your maximum PartPay amount
amount The order or cart amount

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 PartPay amount
max Your maximum PartPay amount
amount The order or cart amount

Demo

(*item / cart worth $300)

Example:

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>