Promotional Widget Integration
The <amwal-widget> drop-in web component renders an interactive, dynamically calculated installment breakdown (e.g. "Or split into 6 installments of 700 SAR/mo @ 0% interest") and opens a popup modal with supported Saudi bank information.
1. Quick Start
Include the official Amwal SDK module in your page <head>:
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@amwaljs/checkout-button@latest/dist/checkout/checkout.esm.js"
></script>Embed the element where you want the installment breakdown to appear (typically beneath the product price):
<!-- Product Pricing Section -->
<div class="product-price">
<h2>4,200.00 SAR</h2>
<amwal-widget id="amwal-widget"></amwal-widget>
</div>
<script>
const widget = document.getElementById("amwal-widget");
if (widget) {
widget.config = {
price: 4200,
installmentsCount: 6,
currency: "SAR"
};
widget.locale = "en"; // 'en' or 'ar'
widget.showMonthlyPayment = true;
widget.showGreenBorder = true;
widget.showPopularBadge = true;
}
</script>2. Configuration Options
| Property | Type | Default | Description |
|---|---|---|---|
price | Number | Required | Basket or product price used to calculate monthly installments. |
installmentsCount | Number | 6 | Default installment duration (3, 6, 12, 24). |
currency | String | "SAR" | Currency code. |
locale | String | "en" | Language display ("en" or "ar"). |
showMonthlyPayment | Boolean | true | Displays the monthly installment badge. |
showGreenBorder | Boolean | true | Highlights the widget with the signature Amwal green border. |
widgetLayoutTheme | String | "desktop" | Layout mode ("desktop", "mobile"). |
tabsVariant | String | "classic" | Bank tabs visual style ("classic", "cards"). |
3. Bank Information Modal
When shoppers click Learn More on the widget, a modal popup renders illustrating:
- 0% interest confirmation and zero hidden processing fees.
- Monthly installment breakdown for each supported bank: Al Rajhi Bank, SNB, Alinma, and Riyad Bank.
- Step-by-step explanation of the instant checkout process.
