Quickstart
Complete end-to-end guide — create a payment session on your server and embed checkout on your site.
This guide walks through a production-ready flow: server creates the session, browser embeds checkout.
1. Install
npm install @wajub/jsFramework wrappers (optional — same API, native syntax):
npm install @wajub/react @wajub/js # React / Next.js
npm install @wajub/vue @wajub/js # Vue 3 / Nuxt
npm install @wajub/svelte @wajub/js # Svelte / SvelteKitWithout npm:
<script src="https://js.wajub.com"></script>2. Create a session (server)
Call Create a payment with your secret key (sk_…). Return
authorization_token to your frontend — never send sk_… to the browser.
On Node.js, use @wajub/node:
import { Wajub } from '@wajub/node';
const wajub = new Wajub({ secretKey: process.env.WAJUB_SECRET_KEY! });
const payment = await wajub.payments.create({
amount: 25000,
currency: 'XAF',
customer: { email: 'amina@example.com', name: 'Amina N.' },
description: 'Order #4172',
metadata: { order_id: '4172' },
});
// Inline embed: return payment.authorization_token (no callback)
// Redirect: add callback URL and use payment.authorization_urlOr call the API directly:
curl https://api.wajub.com/payments \
-H "Authorization: sk_test.xxxxxxxx" \
-H "Content-Type: application/json" \
-d '{
"amount": 25000,
"currency": "XAF",
"customer": { "email": "amina@example.com", "name": "Amina N." },
"description": "Order #4172",
"callback": "https://shop.example.com/order/return",
"metadata": { "order_id": "4172" }
}'Response fields you need:
| Field | Use |
|---|---|
authorization_token | Pass to the browser as sessionId |
authorization_url | Optional — redirect flow instead of embed |
transaction.id | Store for webhook reconciliation |
See Sessions & security for keys, callback URLs, and validation.
3. Embed checkout (client)
Inline embed (recommended)
import { loadWajub } from '@wajub/js';
export async function mountCheckout(sessionId: string) {
const rt = await loadWajub();
if (!rt) return; // SSR — call from browser only
return rt.wajub.mount('#checkout', {
sessionId,
appearance: { primaryColor: '#6366f1', borderRadius: '12px' },
onReady: () => console.log('Checkout ready'),
onSuccess: (txn) => {
window.location.href = '/order/complete';
},
onError: (err) => {
console.error(err.code, err.message);
},
onBreakdown: (b) => {
document.getElementById('cart-total')!.textContent =
b.total.toLocaleString() + ' ' + b.currency;
},
});
}HTML container — reserve height while loading:
<div id="checkout" style="min-height:480px;width:100%"></div>CDN equivalent
<div id="checkout" style="min-height:480px"></div>
<script src="https://js.wajub.com"></script>
<script>
(async () => {
const { sessionId } = await fetch('/api/checkout/session', { method: 'POST' })
.then(r => r.json());
wajub.mount('#checkout', {
sessionId,
onSuccess: () => { window.location.href = '/thanks'; },
onError: (e) => alert(e.message),
});
})();
</script>4. Confirm payment (server)
Never trust the browser alone
Implement payment.succeeded webhooks or poll
GET /payments/{id} before fulfilling the order. Client callbacks
(onSuccess, redirect ?status=) are UX signals only.
5. Framework wrappers
Same flow — server creates sessionId, client wraps with WajubProvider: