Payment Widget

The Zip Payment Widget allows customers to more easily visualize when payments will be due in the future and what amounts will be paid.

Before You Start

Use these instructions to integrate the Zip Payment Widget.

Highlights:

  1. Always get the latest updates: Merchants will always be on the most up-to-date version of the widget without having to make any code changes; this means new features will automatically become available to merchants who have integrated the new widget.
  2. Hosted from quadpay.js: The quadpay.js library offers a number of client-side tools for merchants, so now you only need one library for all of your Zip frontend needs.
  3. ADA compliance: Although this was present in some previous versions of our widgets, now it is available for all merchants using the new widgets.
  4. Internationalization for verbiage and currency: Internationalization will allow widget support across multiple languages.
  5. Configuration-driven properties: Some properties of the widget can be pulled from merchant configuration by passing in the merchant ID.

Example Widget

Please use the following steps to integrate the Payment Widget.

1. Enable display of the widget and modal

Paste this snippet which renders the Zip widget and informational modal in the store's theme or global file.

<!-- quadpay.js Library -->
<script src="https://cdn.us.zip.co/v1/quadpay.js"></script>

2. Place the widget

Paste this snippet where the Payment Widget should appear. We recommend placing it at checkout, above or below the "Checkout with Zip" button.

For each placement, update the amount attribute (e.g. for Shopify use {{ current_variant.price }}) with the variable for the product price or cart total.

<!-- Insert Zip Payment Widget -->
<zip-payment-widget
       amount="360"
</zip-payment-widget>

Attributes

Payment Widget
The following attributes can be used to configure the payment widget.

Attribute name

Value type

Details

hideHeader

boolean

Hides the title text, "Split your order in 4 easy payments with Zip."

hideSubtitle

boolean

Hides the subtitle text, "You will be redirected to Zip to complete your order."

hideTimeline

boolean

Hides the payment timeline.

Tooltip Modal
The remaining attributes can be used to configure the pop-up modal launched from the tooltip.
Learn more about these configurations here: Widget Customization.

Preview

In certain instances, adjustments like spacing and alignment are necessary. Be sure to preview the widget at desktop and mobile screen widths.

Also, take note that the Zip informational modal appears when the user clicks on the Zip logo or information "i" link. To customize the styling of this modal, select the element by ID and add insert CSS styling accordingly.

Customization

The Payment Widget does not currently support customization, other than what is customizable in the modal (see here).

📘

Customizations

If you would like to talk about customizations or have any questions, please email our Integrations Team.