Quickstart

Wajub Components live in the browser. This page is the shortest path that works: install, mount, confirm. Installation options, configuration and every prop are covered on the page for your framework.

1. Install

The core package holds the loader and the types. Everything else builds on it.

npm install @wajub/js

A framework wrapper needs the core beside it, because @wajub/js is a peer dependency rather than a bundled one.

npm install @wajub/react @wajub/js

Without a bundler, load the script and skip npm entirely. It puts wajub, Wajub and WajubError on window.

<script src="https://js.wajub.com"></script>

2. Mount the checkout

The container needs a reserved height, or the page jumps when the iframe lands.

<div id="checkout" style="min-height: 480px"></div>

mount loads the runtime by itself and returns a CheckoutInstance you can drive afterwards.

import { mount } from '@wajub/js';

await mount('#checkout', {
  sessionId,
  onSuccess: () => (window.location.href = '/order/complete'),
  onError: (error) => showRetry(error),
});

In a framework, a WajubProvider loads the runtime once and CheckoutEmbed mounts it. No container to declare, no loader to await.

import { WajubProvider, CheckoutEmbed } from '@wajub/react';

<WajubProvider>
  <CheckoutEmbed sessionId={sessionId} minHeight={480} onSuccess={onPaid} />
</WajubProvider>;

Theming, server rendering, the field components and every callback live on the page for your framework: React, Vue, Svelte.

3. Where the session comes from

Nothing above renders without sessionId. It is the authorization_token that POST /payments returns, and creating it is the one part that does not belong in a browser holding a secret key.

curl https://api.wajub.com/payments \
-H "Authorization: sk_test.kZ3qP8mWvL2xR7tB5nY4hC6dF9jS1aG0eU3i…" \
-H "Content-Type: application/json" \
-d '{"amount": 25000, "currency": "XAF", "description": "Order 4172"}'

Send the browser authorization_token and nothing else. It is scoped to that one payment.

4. Confirm on your server

Store transaction.id when the session is created, and match on it when the event lands. That is the whole reconciliation.