Top up — Mobile Money checkout with JazaTopUpButton

Top-up uses both SDKs on the primary path:

Backend — @jazadev/node mints a client session with jaza.init (host handshake).
Client — @jazadev/react-native or @jazadev/react opens MoMo checkout; the SDK mints the top-up JWT from that session.

Prerequisites

Dashboard setup with countries and at least one bundle
A Jaza customer id stored on your user (cus_…)
Secret key on the server; publishable key in the client
Handshake wired (POST /api/jaza/init)

1. Backend: client session (required)

Node

import { Jaza } from '@jazadev/node';

const jaza = new Jaza({
  secretKey: process.env.JAZA_SECRET_KEY!,
  publicKey: process.env.JAZA_PUBLIC_KEY!,
});

// POST /api/jaza/init
app.post('/api/jaza/init', async (req, res) => {
  const result = await jaza.init({
    customerId: req.user.jazaCustomerId,
  });
  res.json(result);
});

2. Client: provider + top-up button

React Native
React

Checkout opens as a bottom sheet.

import { GestureHandlerRootView } from 'react-native-gesture-handler';
import {
  JazaProvider,
  JazaBalance,
  JazaTopUpButton,
  type InitResult,
} from '@jazadev/react-native';

const API_BASE = process.env.EXPO_PUBLIC_API_URL!;

export default function RootLayout({ children }) {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <JazaProvider
        publishableKey={process.env.EXPO_PUBLIC_JAZA_PUBLISHABLE_KEY!}
        getSession={async () => {
          const res = await fetch(`${API_BASE}/api/jaza/init`, {
            method: 'POST',
            credentials: 'include',
          });
          if (!res.ok) throw new Error('Jaza init failed');
          return (await res.json()) as InitResult;
        }}
        onTopUpComplete={({ credits }) => {
          console.log('Top-up completed', credits);
        }}
      >
        {children}
      </JazaProvider>
    </GestureHandlerRootView>
  );
}

<View style={{ gap: 16 }}>
  <JazaBalance />
  <JazaTopUpButton label="Top up credits" />
</View>

Checkout opens as a drawer (bottom on mobile viewports, right on desktop).

'use client';

import {
  JazaProvider,
  JazaBalance,
  JazaTopUpButton,
  type InitResult,
} from '@jazadev/react';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <JazaProvider
      publishableKey={process.env.NEXT_PUBLIC_JAZA_PUBLISHABLE_KEY!}
      getSession={async () => {
        const res = await fetch('/api/jaza/init', {
          method: 'POST',
          credentials: 'include',
        });
        if (!res.ok) throw new Error('Jaza init failed');
        return (await res.json()) as InitResult;
      }}
      onTopUpComplete={({ credits }) => {
        console.log('Top-up completed', credits);
      }}
    >
      {children}
    </JazaProvider>
  );
}

<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
  <JazaBalance />
  <JazaTopUpButton label="Top up credits" />
</div>

No onRequestToken — the SDK handles top-up minting after the session is authenticated.

What the user sees

Tap Top up → SDK requests a top-up JWT with the client session.
Checkout opens → bundles and current balance.
User picks a pack, enters phone / country / currency, confirms quote.
Payment runs; SDK polls until success or failure.
Balance refreshes via GET /v1/client/wallet.

Jaza collects MoMo and settles USD to you. You do not configure an aggregator or FX yourself.

Advanced: host-minted top-up JWT

For legacy BFFs, jaza.topUp({ customerId }) still returns { token, id, … }. Prefer the session path above for new apps. Optional status polling: jaza.check({ topUpId }).

Optional: webhooks

Subscribe to jaza.webhook.topUp.completed (and related events) for server-side side effects. See Webhooks.

Next steps

Gating actions · Consume credits · React Native SDK · React web SDK · Node SDK

Get started

Core concepts

Guides

SDKs

Reference

Top up — Mobile Money checkout with JazaTopUpButton

Prerequisites

1. Backend: client session (required)

2. Client: provider + top-up button

What the user sees

Advanced: host-minted top-up JWT

Optional: webhooks

Next steps

​Prerequisites

​1. Backend: client session (required)

​2. Client: provider + top-up button

​What the user sees

​Advanced: host-minted top-up JWT

​Optional: webhooks

​Next steps

Prerequisites

1. Backend: client session (required)

2. Client: provider + top-up button

What the user sees

Advanced: host-minted top-up JWT

Optional: webhooks

Next steps