Svelte

compilerOptions: {
  runes: ({ filename }) =>
    filename.split(/[/\\]/).includes('node_modules') ? undefined : true,
},

<script lang="ts">
  import { WajubProvider } from '@wajub/svelte';
</script>

<WajubProvider>
  <slot />
</WajubProvider>

<script lang="ts">
  import { useWajubOptional } from '@wajub/svelte';

  export let sessionId: string;
  const runtime = useWajubOptional();
</script>

<button
  disabled={!$runtime}
  on:click={() => $runtime?.wajub.open({ sessionId, onSuccess: onUpgraded })}
>
  Upgrade plan
</button>

<script lang="ts">
  import { CheckoutEmbed } from '@wajub/svelte';

  export let sessionId: string;
</script>

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

<script lang="ts">
  import type { ComponentInstance } from '@wajub/js';
  import { AddressComponent, PaymentComponent, useConfirmPayment } from '@wajub/svelte';

  export let sessionId: string;

  const { confirm, isConfirming } = useConfirmPayment(() => sessionId);
  let field: ComponentInstance | null = null;
</script>

<AddressComponent {sessionId} addressMode="shipping" />
<PaymentComponent
  {sessionId}
  collectAddress="shipping"
  collectName
  on:instance={(event) => (field = event.detail)}
/>
<button disabled={$isConfirming || !field} on:click={() => field && confirm(field)}>
  {$isConfirming ? 'Processing…' : 'Pay now'}
</button>

<script lang="ts">
  import {
    CardComponent,
    MobileMoneyComponent,
    useConfirmPayment,
    type ComponentInstance,
    type ComponentStateChangeEvent,
  } from '@wajub/svelte';

  export let sessionId: string; // l'authorization_token du paiement préparé, transmis par votre serveur
  export let hostedUrl: string; // son authorization_url, pour la solution de repli

  // 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',
  ];

  let method: 'mobileMoney' | 'card' = 'mobileMoney';
  let component: ComponentInstance | null = null;
  let complete = false;
  let step = 'INITIATED';
  let fallback = false;
  const { confirm, isConfirming } = useConfirmPayment(() => sessionId);
  $: locked = $isConfirming || RUNNING.includes(step);

  // 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é
  }

  function onInstance(instance: ComponentInstance | null) {
    component = instance;
    complete = false;
  }

  function onStateChange(event: ComponentStateChangeEvent) {
    step = event.state;
  }

  function onLoadError(error: { code?: unknown }) {
    if (error.code === 'ready_timeout') fallback = true;
  }

  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) return;
    try {
      await confirm(component);
      window.location.assign('/thanks');
    } catch {
      // Le formulaire affiche la raison, et le payeur peut y réessayer.
    }
  }
</script>

<fieldset disabled={locked}>
  <label><input type="radio" bind:group={method} value="mobileMoney" /> Mobile Money</label>
  <label><input type="radio" bind:group={method} value="card" /> Carte</label>
</fieldset>

{#if fallback}
  <p>Vous finirez sur la page de paiement sécurisée de Wajub.</p>
{:else}
  <!-- loader="skeleton" par défaut : le bloc garde sa hauteur pendant le chargement. -->
  <svelte:component
    this={method === 'card' ? CardComponent : MobileMoneyComponent}
    {sessionId}
    variant="fields"
    appearance={{ inherit: true }}
    readyTimeout={10000}
    fields={method === 'card'
      ? { customer: 'external' }
      : { customer: 'external', country: 'CM', operator: 'detect' }}
    onBeforeSubmit={placeOrder}
    onChange={(event) => (complete = Boolean(event.complete))}
    {onInstance}
    {onStateChange}
    {onLoadError}
  />
{/if}

{#if step === 'APPROVAL_REQUIRED'}<p role="status">Validez le paiement sur votre téléphone.</p>{/if}
<button type="button" disabled={locked || (!fallback && !complete)} on:click={pay}>Payer</button>

import { json } from '@sveltejs/kit';
import { WAJUB_API_KEY } from '$env/static/private';
import { Wajub } from '@wajub/node';
import type { RequestHandler } from './$types';

const wajub = new Wajub({ secretKey: WAJUB_API_KEY });

export const POST: RequestHandler = async ({ request }) => {
  const { cartId } = await request.json();

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

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