React

'use client';

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

export default function CheckoutLayout({ children }: { children: React.ReactNode }) {
  return <WajubProvider>{children}</WajubProvider>;
}

import { useWajubOptional } from '@wajub/react';

function UpgradeButton({ sessionId }: { sessionId: string }) {
  const runtime = useWajubOptional();

  return (
    <button
      disabled={!runtime}
      onClick={() => runtime?.wajub.open({ sessionId, onSuccess: onUpgraded })}
    >
      Upgrade plan
    </button>
  );
}

'use client';

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

export function CheckoutClient({ sessionId }: { sessionId: string }) {
  return (
    <CheckoutEmbed
      sessionId={sessionId}
      layout="tabs"
      minHeight={480}
      onSuccess={() => (window.location.href = '/order/complete')}
      onError={(error) => console.error(error.code, error.message)}
    />
  );
}

'use client';

import { useRef } from 'react';
import type { ComponentInstance } from '@wajub/js';
import { PaymentComponent, useConfirmPayment } from '@wajub/react';

export function PayForm({ sessionId }: { sessionId: string }) {
  const { confirm, isConfirming } = useConfirmPayment(sessionId);
  const field = useRef<ComponentInstance | null>(null);

  return (
    <>
      <PaymentComponent
        sessionId={sessionId}
        collectAddress="shipping"
        collectName
        onInstance={(instance) => (field.current = instance)}
      />
      <button
        onClick={() => field.current && confirm(field.current)}
        disabled={isConfirming}
      >
        {isConfirming ? 'Processing…' : 'Pay now'}
      </button>
    </>
  );
}

'use client';

import { useRef, useState } from 'react';
import { CardComponent, MobileMoneyComponent, useConfirmPayment, type ComponentInstance } from '@wajub/react';

// The payment is under way, or waits on the payer: nothing on the page may change.
const RUNNING = [
  'PROCESSING', 'VERIFYING', 'PENDING', 'OTP_REQUIRED', 'PIN_REQUIRED', 'PHONE_REQUIRED',
  'BIRTHDAY_REQUIRED', 'ADDRESS_REQUIRED', '3DS_REQUIRED', 'USSD_REQUIRED', 'APPROVAL_REQUIRED',
];

// Your server checks the cart, places the order and activates the payment.
async function placeOrder() {
  const response = await fetch('/checkout/place-order', { method: 'POST' });
  return response.ok; // false: nothing is charged
}

// Rendered inside <WajubProvider>. sessionId and hostedUrl: the prepared payment's
// authorization_token and authorization_url, from your server.
export function PaymentStep({ sessionId, hostedUrl }: { sessionId: string; hostedUrl: string }) {
  const { confirm, isConfirming } = useConfirmPayment(sessionId);
  const component = useRef<ComponentInstance | null>(null);
  const [method, setMethod] = useState<'mobileMoney' | 'card'>('mobileMoney');
  const [complete, setComplete] = useState(false);
  const [step, setStep] = useState('INITIATED');
  const [fallback, setFallback] = useState(false);
  const locked = isConfirming || RUNNING.includes(step);
  const Fields = method === 'card' ? CardComponent : MobileMoneyComponent;

  async function pay() {
    if (fallback) {
      // A prepared payment is charged only once activated: place the order first.
      if (await placeOrder()) window.location.assign(hostedUrl);
      return;
    }
    if (!component.current) return;
    try {
      await confirm(component.current);
      window.location.assign('/thanks');
    } catch {
      // The form shows the reason, and the payer can try again in it.
    }
  }

  return (
    <>
      <fieldset disabled={locked}>
        <label>
          <input type="radio" checked={method === 'mobileMoney'} onChange={() => setMethod('mobileMoney')} />
          Mobile Money
        </label>
        <label>
          <input type="radio" checked={method === 'card'} onChange={() => setMethod('card')} />
          Card
        </label>
      </fieldset>

      {fallback ? (
        <p>You will finish on Wajub's secure payment page.</p>
      ) : (
        <Fields
          sessionId={sessionId}
          variant="fields"
          appearance={{ inherit: true }}
          // loader="skeleton" is the default: the box keeps its height while the form loads.
          readyTimeout={10000}
          fields={method === 'card'
            ? { customer: 'external' }
            : { customer: 'external', country: 'CM', operator: 'detect' }}
          onBeforeSubmit={placeOrder}
          onInstance={(instance) => {
            component.current = instance;
            setComplete(false);
          }}
          onChange={(event) => setComplete(Boolean(event.complete))}
          onStateChange={({ state }) => setStep(state)}
          onLoadError={(error) => {
            if (error.code === 'ready_timeout') setFallback(true);
          }}
        />
      )}

      {step === 'APPROVAL_REQUIRED' && <p role="status">Approve the payment on your phone.</p>}
      <button type="button" disabled={locked || (!fallback && !complete)} onClick={pay}>
        Pay
      </button>
    </>
  );
}

import { NextResponse } from 'next/server';
import { Wajub } from '@wajub/node';

const wajub = new Wajub({ secretKey: process.env.WAJUB_API_KEY! });

export async function POST(req: Request) {
  const { cartId } = await req.json();

  const payment = await wajub.payments.create(
    {
      amount: 25000,
      currency: 'XAF',
      description: `Cart ${cartId}`,
      customer: { email: 'buyer@example.com' },
      callback: `${process.env.NEXT_PUBLIC_APP_URL}/order/return`,
      metadata: { cart_id: cartId },
    },
    { idempotencyKey: `cart-${cartId}` },
  );

  return NextResponse.json({ sessionId: payment.authorization_token });
}