Widgets¶

Product¶

Add an HTML element on your product page to display the Postpay payment options.

The element attributes determine which component displays:

<div class="postpay-widget"
     data-type="product"
     data-environment="prod"
     data-amount="{amount}"
     data-currency="{currency}"
     data-num-instalments="{numInstalments}"
     data-locale="en">
</div>

Attribute	Type	Description
data-amount	Integer❗	Product unit price expressed in the smallest unit of currency.
data-currency	String❗	ISO 4217 currency code.
data-num-instalments	Integer	The number of instalments. Postpay sets an optimal number of instalments by default.
locale	String	The locale code, options are `en` (English) and `ar` (Arabic). Default: the value defined in the [initialization](quickstart).

<demo/>

Cart¶

Add an HTML element on your cart page to display the Postpay payment options.

The element attributes determine which component displays:

<div class="postpay-widget"
     data-type="cart"
     data-environment="prod"
     data-amount="{amount}"
     data-currency="{currency}"
     data-num-instalments="{numInstalments}"
     data-locale="en">
</div>

Attribute	Type	Description
data-amount	Integer❗	Cart total amount expressed in the smallest unit of currency.
data-currency	String❗	ISO 4217 currency code.
data-num-instalments	Integer	The number of instalments. Postpay sets an optimal number of instalments by default.
locale	String	The locale code, options are `en` (English) and `ar` (Arabic). Default: the value defined in the [initialization](quickstart).

<demo/>

Payment summary¶

This widget is commonly used to display the payment summary on the payment method selection.

Set data-hide-if-invalid to disable Postpay payment method in case it is not available for the configured attributes, e.g. the total amount exceeds the maximum allowed.

<div class="postpay-widget"
     data-type="payment-summary"
     data-environment="prod"
     data-amount="{amount}"
     data-currency="{currency}"
     data-num-instalments="{numInstalments}"
     data-country="{country}"
     data-hide-if-invalid="{selector}"
     data-locale="en">
</div>

Attribute	Type	Description
data-amount	Integer❗	Cart total amount expressed in the smallest unit of currency.
data-currency	String❗	ISO 4217 currency code.
data-num-instalments	Integer	The number of instalments. Postpay sets an optimal number of instalments by default. Set `1` for Pay Now payment option.
data-country	String	ISO 3166 alpha-2 country code for the shipping address.
data-hide-if-invalid	String	CSS selector to hide the HTML elements if Postpay payment method is not available for this cart.
locale	String	The locale code, options are `en` (English) and `ar` (Arabic). Default: the value defined in the [initialization](quickstart).

<demo/>

Cash on delivery
Credit or Debit Card
Instalments with Postpay

Refresh¶

The price displayed on your checkout pages may change due to product variants, currency, etc.

To keep messaging updated, implement this refresh function into your cart change callback function:

<script>
  postpay.ui.refresh();
</script>