Basic HTML Integration
The simplest way to add ArosaPay checkout to any website. Just include the script and initialize.
<!DOCTYPE html>
<html>
<head>
<title>My Store - Checkout</title>
<script src="https://cdn.arosapay.com/checkout.min.js"></script>
</head>
<body>
<div class="product-card">
<h1>iPhone 15 Pro Max</h1>
<p class="price">KES 185,000</p>
<button id="buy-now">Buy with Protection</button>
</div>
<script>
const arosapay = new Arosapay({
publicKey: 'pk_live_your_key_here'
});
document.getElementById('buy-now').addEventListener('click', async () => {
try {
const transaction = await arosapay.createTransaction({
amount: 185000,
title: 'iPhone 15 Pro Max',
description: '256GB, Natural Titanium, Brand New Sealed',
vertical: 'electronics',
satisfactionDays: 7,
seller: {
email: 'store@techkenya.com',
name: 'Tech Kenya',
phone: '0712345678'
}
});
// Open checkout modal
await arosapay.checkout(transaction.id, {
onSuccess: (result) => {
window.location.href = '/thank-you?ref=' + result.reference;
},
onError: (error) => {
alert('Payment failed: ' + error.message);
}
});
} catch (error) {
console.error('Error:', error);
}
});
</script>
</body>
</html>HTML
✓ Best for
- • Static HTML websites
- • WordPress (without WooCommerce)
- • Landing pages
- • Quick prototypes
⚠️ Note
For production, always use your live API key (pk_live_...) and ensure your seller email is verified.
Need Help Integrating?
Our developer support team can help you with custom integrations.