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';

// Le paiement est en cours, ou attend le payeur : rien ne doit changer sur la page.
const RUNNING = [
  'PROCESSING', 'VERIFYING', 'PENDING', 'OTP_REQUIRED', 'PIN_REQUIRED', 'PHONE_REQUIRED',
  'BIRTHDAY_REQUIRED', 'ADDRESS_REQUIRED', '3DS_REQUIRED', 'USSD_REQUIRED', 'APPROVAL_REQUIRED',
];

// Votre serveur vérifie le panier, passe la commande et active le paiement.
async function placeOrder() {
  const response = await fetch('/checkout/place-order', { method: 'POST' });
  return response.ok; // false : rien n'est débité
}

// Rendu sous <WajubProvider>. sessionId et hostedUrl : l'authorization_token et
// l'authorization_url du paiement préparé, transmis par votre serveur.
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) {
      // Un paiement préparé n'est débité qu'une fois activé : passez d'abord la commande.
      if (await placeOrder()) window.location.assign(hostedUrl);
      return;
    }
    if (!component.current) return;
    try {
      await confirm(component.current);
      window.location.assign('/thanks');
    } catch {
      // Le formulaire affiche la raison, et le payeur peut y réessayer.
    }
  }

  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')} />
          Carte
        </label>
      </fieldset>

      {fallback ? (
        <p>Vous finirez sur la page de paiement sécurisée de Wajub.</p>
      ) : (
        <Fields
          sessionId={sessionId}
          variant="fields"
          appearance={{ inherit: true }}
          // loader="skeleton" par défaut : le bloc garde sa hauteur pendant le chargement.
          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">Validez le paiement sur votre téléphone.</p>}
      <button type="button" disabled={locked || (!fallback && !complete)} onClick={pay}>
        Payer
      </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 });
}