PostEx BNPL Widget

Overview#

PostEx BNPL Widget is a small JavaScript SDK that merchants add to product listing and product detail pages to show PostEx split-payment details.

Flow#

1. Initialize the SDK once using your API Key and Account ID.
2. Mount widgets by providing the product amount and container.
3. Clicking the widget opens the complete payment schedule.

Prerequisites#

Obtain the following credentials:

Installation#

Include the widget script.

<script src="https://js.xstak.com/bnpl-widget/widget.js"></script>

Add Widget Container#

Pass its selector (e.g. #bnpl-widget) as container in createWidget so the SDK knows where to place the PLP or PDP UI — without it, the widget has nowhere to appear.

<div id="bnpl-widget"></div>

Initialize SDK#

const postex = newPostExWidget({
  apiKey: "YOUR_PUBLISHABLE_KEY",
  accountId: "YOUR_ACCOUNT_ID",
});

Create Widget#

postex.createWidget({
  type: "pdp",
  amount: 9999,
  container: "#bnpl-widget",
  scheduleType: "MONTHLY",
});

Widget Configuration#

Supported Widget Types#

Product Listing Page (PLP)#

On product listing pages, shows a first-installment amount so customers can see what they pay today (e.g. “Get it in only X PKR today”).

postex.createWidget({
  type: "plp",
  amount: 5000,
  container: "#plp-widget",
});

Product Detail Page (PDP)#

On the product detail page, shows how many split payments the customers can make and the amount of each (e.g. “Pay in N split payments of Rs. X”).

postex.createWidget({
  type: "pdp",
  amount: 15000,
  container: "#pdp-widget",
  scheduleType: "MONTHLY",
});

Destroy Widget#

Removes that one mounted widget. Other widgets from the same instance stay.

widget.destroy();

Closes the plan modal if it is open, then destroys every widget created from that instance.

postex.destroy();