Skip to content

Components

Wajub checkout, inside your own pages.

Your customer pays without leaving your site: the full checkout in your page or in a modal, or our fields in your own form. Mobile money, cards and wallets, in your colors.

Create a free accountTry the demo(opens in a new tab)

  • Your customers stay on your site

    Payment happens in your page or in a window on top of it. Your customer never leaves your site and always knows who they are paying.

  • The methods your customers use

    Mobile money from the country's operators, cards, Apple Pay and Google Pay. Each customer sees the methods of their country, and the ones they used before come back at their next payment.

  • Matches your brand

    Your colors, your font, your corner radius, and the customer's language among five, Arabic included. Payment looks like the rest of your site.

  • Protected payments

    The card number is typed into the card provider's fields, such as Stripe or Flutterwave: it never reaches your servers or Wajub's. The bank's 3-D Secure check happens inside the payment.

Payment methods

The checkout shows each customer the methods of their country.

The mobile money operators open in the country, the phone number written the local way, the local currency. Your code stays the same.

Country
  • MTN MoMo
  • Orange Money
  • Express Union

Bank cards through your Stripe, PayPal, Flutterwave, Paystack, CinetPay, FedaPay or KkiaPay connection.

Secured by Wajub

Pay in XAFEnglish

Total

XAF 15,000

1 item

Country

Cameroun

Choose a payment method

Mobile MoneyRecommended

Bank card

Mobile MoneyChange

MTN MoMo
Orange Money

Phone number

+237

Pay XAF 15,000

Orange Money

Check your phone. No code to enter.

+237 6 99 45 67 89

Payment successful

XAF 15,000

Orange Money
+237 6 99 45 67 89
Reference
order-4172

Payment failed

Payment declined by the issuer.

Try again

Dialing code +237, amount in CFA francs (XAF)

Appearance

Payment wears your colors, and speaks your customer's language.

Set your logo, colors, font and corner radius once in your Dashboard, and every payment uses them. You can also pass them in your code, as shown below. Payment shows in your customer's language, Arabic included.

All appearance options(opens in a new tab)
Style
Color
Language
import { mount } from '@wajub/js'

// Logo and name: your Dashboard branding
await mount('#checkout', {
  sessionId,
  locale: 'en',
  appearance: {
    primaryColor: '#006a8e',
    colorScheme: 'light',
    theme: 'stripe',
  },
  onSuccess: showPaidOrder,
})

Payment fields

Your form, our five fields.

With components(), you keep your page, your order summary and your button. Each field shows in its own iframe, mounts wherever you want and tells you when it is complete.

Payment fields in the docs(opens in a new tab)

  • Your page, your button

    You keep your form, your order summary and your payment button. The field tells you when it is valid: your button turns on, and confirmPayment() sends the payment.

    • Valid does not mean paid: your webhook confirms the payment
    • A ready component for React, Vue and Svelte

  • Each field in its own iframe

    Wajub shows the fields that must stay apart from your page in separate iframes. The card number is typed into the card provider's fields: it never reaches your servers or Wajub's.

    • Card fields from Stripe, Adyen or Mollie
    • Colors and language changed live with update()

  • Always the right height

    The SDK resizes each iframe as soon as its content changes. You have nothing to measure or reserve in your page.

    • The resize event gives you each new height
    • The payment component opens on the form for the chosen method

Checkout or fields

Full checkout or payment fields: choose who shows the button.

The full checkout (opens in a new tab) shows the payment methods, the fields and the Pay button: in your page, in a window above it, or on its hosted page. It is the shortest integration: start with it. Payment fields (opens in a new tab) slot into the form you already have: Wajub shows only the fields, each in its own iframe, and your button starts the payment.

Integration

In both cases

  • Saved payment methods
  • 3-D Secure
  • Apple Pay and Google Pay

With the full checkout

  • Wajub's Pay button
  • Confirmation codes (OTP)
  • Custom checkout fields

In the code: mount(), open() or checkout()

For developers

A session on your server, the payment in your page.

Quickstart(opens in a new tab)API reference(opens in a new tab)

Frameworks

Events

  • ready
  • change
  • focus
  • blur
  • success
  • error
  • statechange

  1. Your server creates the session

    With your secret key. Your page only receives the session token, valid for this one payment.

  2. Your page shows the payment

    The full checkout or the fields, in JavaScript or with your framework's component. onSuccess is for updating your page, not for fulfilling the order.

  3. Your server fulfills on the webhook

    Fulfill when the signed webhook arrives, or after reading the payment back through the API: its status is what counts.

import { Wajub } from '@wajub/node'

const wajub = new Wajub({
  secretKey: process.env.WAJUB_SECRET_KEY!,
})

const payment = await wajub.payments.create(
  {
    amount: 15000,
    currency: 'XAF',
    reference: 'order-4172',
    customer: { email: 'buyer@example.com' },
  },
  { idempotencyKey: 'order-4172' },
)

// The browser only receives the session token
res.json({
  sessionId: payment.authorization_token,
})

Frequently asked questions

Another question? Talk to sales

Which mode should I start with?
The checkout in your page, with mount(): your customer stays on your site, and the checkout handles every payment method, confirmation codes and 3-D Secure. Move to payment fields when your form calls for it: you keep 3-D Secure, saved methods and wallets, but not custom fields or confirmation codes.
Do I need a server?
Yes. The session is created on your server, with your secret key. Your page only receives the session token, valid for this payment only. A secret key sent from a browser is refused, and you are alerted by email.
Which frameworks are supported?
JavaScript with @wajub/js, React 18 and later with @wajub/react, Vue 3.3 and later with @wajub/vue, Svelte 5 with @wajub/svelte. Next.js, Nuxt and SvelteKit each have their own guide.
Can I match the checkout to my design?
Yes: start from a ready-made theme, then adjust sixteen color, font, spacing and radius variables, in light, dark or automatic mode. Appearance, language and currency change live with update(), without remounting the checkout.

Embed the checkout in your site today.

Create your account, mount the checkout in sandbox with your test keys, then go live with your live keys.

Create a free accountFollow the quickstart