No SDK JavaScript Widgets
Zip Messaging components made simpler to use.
There are also ways to implement Zip widgets with very little custom code necessary to get started.
The currently supported No SDK Javascript widgets are:
- Zip PDP/Cart Widget
Zip PDP/Cart Widget
This widget allows your 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>
Updated about 6 hours ago