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-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-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-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/>

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>