Wajub Components
Client-side packages to embed hosted checkout or compose custom payment UIs — complete integration guide with examples and use cases.
Wajub Components are browser packages that embed Wajub's payment UI on your site. Use them to:
- Redirect customers to a hosted payment page;
- Embed the full checkout inline or in a modal overlay;
- Compose your own layout with payment fields (card, Mobile Money, wallet, address).
Everything you need to integrate is documented here — install commands reference npm, but all API details, examples, and use cases live on this site.
Backend first
Create the payment session on your server via Create a payment
(POST /payments). Pass authorization_token to the browser as sessionId. Never expose
secret keys (sk_…) client-side.
Packages
| Package | Install | Documentation |
|---|---|---|
@wajub/js | npm install @wajub/js | JS — core library |
@wajub/react | npm install @wajub/react @wajub/js | React |
@wajub/vue | npm install @wajub/vue @wajub/js | Vue 3 |
@wajub/svelte | npm install @wajub/svelte @wajub/js | Svelte |
CDN (no bundler): https://js.wajub.com · ESM: https://js.wajub.com/wajub.mjs
Choose your integration
Need the full checkout (summary, coupons, shipping, OTP, 3DS)?
│
├─ Fastest ─────────────────────► Redirect (authorization_url)
│ or wajub.checkout({ sessionId })
│
├─ Stay on your page ───────────► wajub.mount() (inline embed)
│ or wajub.open() (modal overlay)
│
└─ Custom layout & pay button ──► Payment fields
card | mobileMoney | wallet | payment
+ confirmPayment()| Mode | API | Who owns the pay button | OTP / coupons / shipping |
|---|---|---|---|
| Redirect | wajub.checkout() | Wajub | Full |
| Inline embed | wajub.mount() | Wajub | Full |
| Overlay | wajub.open() | Wajub | Full |
| Payment fields | wajub.components() | You | Partial — limitations |
Recommendation
Start with inline embed or redirect. Move to payment fields only when you need full control over layout, branding, or where the pay button sits in your funnel.
Documentation map
Related pages
Minimal example
// 1. Your backend (Node, PHP, Python…)
const res = await fetch('https://api.wajub.com/payments', {
method: 'POST',
headers: {
Authorization: process.env.WAJUB_SECRET_KEY,
'Content-Type': 'application/json',
},
body: JSON.stringify({
amount: 25000,
currency: 'XAF',
customer: { email: 'buyer@example.com' },
callback: 'https://shop.example.com/return',
}),
});
const { authorization_token } = await res.json();
// 2. Your frontend
import { loadWajub } from '@wajub/js';
const rt = await loadWajub();
rt?.wajub.mount('#checkout', {
sessionId: authorization_token,
onSuccess: () => (window.location.href = '/thanks'),
});