Online CheckoutComponents
Payment Widget
Show installment calculator on product pages
Payment Widget
The payment widget displays installment options and monthly payments to customers on product pages.
Basic Usage
<!-- 1. Add container -->
<div id="payment-widget"></div>
<script>
// 2. Load widget
AlyaPay.widget.load({
container: '#payment-widget',
amount: '1799.00',
currency: 'MAD'
});
</script>Options
AlyaPay.widget.load({
container: '#payment-widget', // Required: Container selector
amount: '1799.00', // Required: Product price
currency: 'MAD', // Required: MAD
locale: 'en' // Optional: en, fr, or ar
});Example on Product Page
<!DOCTYPE html>
<html>
<head>
<title>Product Page</title>
<script src="https://cdn.alyapay.com/latest/alyapay-sdk.min.js"></script>
</head>
<body>
<h1>Wireless Headphones</h1>
<p class="price">1,799.00 MAD</p>
<!-- Payment widget -->
<div id="payment-widget"></div>
<button>Add to Cart</button>
<script>
AlyaPay.widget.load({
container: '#payment-widget',
amount: '1799.00',
currency: 'MAD',
locale: 'en'
});
</script>
</body>
</html>Dynamic Amount
Update widget when price changes:
// When quantity changes
document.getElementById('quantity').addEventListener('change', (e) => {
const quantity = e.target.value;
const price = 1799.00;
const total = (price * quantity).toFixed(2);
// Reload widget with new amount
AlyaPay.widget.load({
container: '#payment-widget',
amount: total,
currency: 'MAD'
});
});What It Shows
The widget displays:
- AlyaPay logo
- "Pay in 2, 3, or 4 installments"
- Monthly payment amount for each option
- Interactive buttons to explore plans