Integrate with React / Next.js
Recommended architecture for integrating Wajub in a React/Next.js app, keeping the secret key server-side.
6 min read
The golden rule on the frontend: the secret key never leaves the server. In React/Next.js, you initialize the payment in a server route, and the client just triggers and redirects.
Architecture
- The client component calls your server route (
/api/checkout). - The server route calls Wajub with the key and returns the
authorization_url. - The client redirects to that URL.
- A webhook (server route) confirms the payment.
Server route (App Router)
No @wajub/sdk package
There is no published @wajub/sdk npm package — call the REST API directly with fetch:
import { NextResponse } from 'next/server';
export async function POST(req: Request) {
const { amount, email, orderId } = await req.json();
const res = await fetch('https://api.wajub.com/payments', {
method: 'POST',
headers: {
Authorization: process.env.WAJUB_PUBLIC_KEY!,
'Content-Type': 'application/json',
'Idempotency-Key': `ORDER-${orderId}`,
},
body: JSON.stringify({
amount,
currency: 'XAF',
email,
callback: `${process.env.APP_URL}/payment/return`,
}),
});
if (!res.ok) {
return NextResponse.json({ error: 'Failed to initialize payment' }, { status: 502 });
}
const { authorization_url } = await res.json();
return NextResponse.json({ authorization_url });
}Client component
'use client';
import { useState } from 'react';
export function PayButton({ amount, email, orderId }: { amount: number; email: string; orderId: string }) {
const [loading, setLoading] = useState(false);
async function pay() {
setLoading(true);
const res = await fetch('/api/checkout', {
method: 'POST',
body: JSON.stringify({ amount, email, orderId }),
});
const { authorization_url } = await res.json();
window.location.href = authorization_url; // hosted redirect
}
return <button onClick={pay} disabled={loading}>{loading ? 'Redirecting…' : 'Pay'}</button>;
}Never use secret keys client-side
Never import the SDK with sk_… in a 'use client' component or in
code shipped to the browser. Keep initialization in a server route, a Server Action, or
an API route.
Next.js environment variables
Do not prefix your keys with NEXT_PUBLIC_: this prefix would expose them to the browser.
Wajub keys remain server-only variables.