Lightweight PDP/Cart Widget
Our No-SDK Javascript PDP/Cart Widget allows your customers to easily see their ability to split their purchase amount into 4 easy payments, as well as additional information regarding their installment plan and Zip's terms and conditions.
This widget can be loaded on your site with a popup browser (window.open) or embedded in an <iframe /> element.
- Sandbox: https://components.sand.us.zip.co/modal
- Production: https://components.us.zip.co/modal
The following query parameters should be provided in the query string to configure the widget for your customer:
| query_param | type | example_value |
|---|---|---|
merchant-id | GUID | ea7d0e44-ace2-41ab-b20a-f276d3477a93 |
amount | decimal | 199.95 |
currency | string | USD |
force-wbd | "Y" or "N" | Y |
force-wbfd | "Y" or "N" | Y |
On query parameters
The force-wbd param should always be set to Y to ensure the required Truth in Lending Act (TILA) disclosures are displayed.
Force-wbfd should only be set to Y if Zip customers are charged installment fees at checkout.
Example implementation:
<script>
const baseUrl = "https://components.sand.us.zip.co/modal"; // switch to production URL in your production code.
const merchantId = <YOUR MERCHANT ID>; // provided by the Zip integrations team.
const amount = <PRODUCT / CART AMOUNT>;
function openPopup() {
// center the popup in the middle of the parent window
const w = 390; // recommended values
const h = 650; // recommended values
// we are certain window.top will exist
const x = window.top.outerWidth / 2 + window.top.screenX - (w / 2);
const y = window.top.outerHeight / 2 + window.top.screenY - (h / 2);
// open the popup
window.open(`${baseUrl}?merchant-id=${merchantId}&amount=${amount}&force-wbd=Y&force-wbfd=Y`, "_blank", `noopener,noreferrer,popup=true,width=${w},height=${h},top=${y},left=${x}`);
}
</script>
<a onClick="openPopup();" style="text-decoration: underline; cursor: pointer">Learn More</a>
Need help?
If you would like information about advanced customization or have any questions, please email our Merchant & Partner Solutions team.
Updated about 3 hours ago