Hosted checkout for any website
Add a payment button, pass your payment account identifier, and let PayNexus handle the M-Pesa checkout flow in a secure hosted popup.
Add the CDN script
Load PayNexus from the CDN on your website.
Open hosted checkout
Pass accountId, amount, description, and redirect URLs.
Receive the result
Redirect the customer or unlock content after payment completes.
Use your payment account identifier
The Browser SDK hosted checkout flow uses accountId, which is the identifier for the payment account receiving the money. This keeps API keys out of the page.
<script src="https://cdn.paynexus.co.ke/v1/paynexus.min.js"></script>
<script>
const checkout = PayNexusHostedCheckout();
document.getElementById('payBtn').addEventListener('click', async () => {
try {
const result = await checkout.open({
accountId: 'ACC_ZVTDYYYL',
amount: 100,
description: 'Premium Article Access - AI Future',
returnUrl: 'https://example.com/thanks.html',
cancelUrl: 'https://example.com/cancelled.html',
});
console.log('Payment completed:', result.reference, result.amount);
window.location.href = 'thanks.html';
} catch (error) {
if (error.code === 'cancelled') {
window.location.href = 'cancelled.html';
} else {
alert('Payment initialization failed. Please try again.');
}
}
});
</script>Account identifier
Use the payment account identifier from your PayNexus dashboard, for example ACC_ZVTDYYYL.
Popup or redirect
Use checkout.open() for a popup or checkout.redirect() for full-page hosted checkout.
API keys stay private
The hosted checkout flow does not require publishing secret or public API keys in your HTML.
Add checkout to your site today
Create a merchant account, copy your payment account identifier, and connect your first payment button.