Svelte

@wajub/svelte enveloppe @wajub/js avec la syntaxe Svelte : un provider qui charge une fois l'environnement d'exécution, cinq composants de champs et quatre helpers basés sur des stores. L'API de paiement ne change pas. Le comportement de chaque option est présenté dans Checkout hébergé et Champs de paiement. Cette page traite des éléments propres à Svelte.

Installer

@wajub/js est une dépendance homologue, non intégrée. Installez-la donc sur la même ligne. Le package est uniquement ESM et déclare une condition d'export svelte. Le bundler résout ainsi directement les composants.

npm install @wajub/svelte @wajub/js

Provider

WajubProvider appelle loadWajub() depuis @wajub/js/pure et place l'environnement d'exécution dans le contexte Svelte. Un provider couvre toute une sous-arborescence. Placez-le donc au niveau de la mise en page, pas autour de chaque composant.

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

<WajubProvider>
  <slot />
</WajubProvider>

Stores et helpers

Tous les éléments réactifs sont des stores Svelte. Lisez-les donc avec $ dans le template.

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

useWajubContext() renvoie les mêmes stores { runtime, loading, error } si vous préférez créer votre propre helper. Il s'agit d'un alias de getWajubContext(). Le provider appelle lui-même setWajubContext().

CheckoutEmbed

Le checkout hébergé dans votre propre mise en page. Chaque option de EmbeddedConfig est une prop, comme chaque callback.

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

  export let sessionId: string;
</script>

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

L'enveloppe {#key sessionId} reconstruit l'intégration pour une seconde session. La conservation de l'instance reçue par onReady permet de modifier son style sans la reconstruire.

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

  export let sessionId: string;
  export let dark = false;

  let checkout: CheckoutInstance | null = null;

  $: checkout?.update({ appearance: { colorScheme: dark ? 'dark' : 'light' } });
</script>

{#key sessionId}
  <CheckoutEmbed {sessionId} onReady={(instance) => (checkout = instance)} />
{/key}

Champs de paiement

Les cinq composants affichent chacun un groupe de champs : CardComponent, MobileMoneyComponent, WalletComponent, PaymentComponent et AddressComponent. Ils partagent les props de ComponentConfig, et chacun est un ComponentEmbed avec son type déjà défini. Utilisez directement ComponentEmbed lorsque le choix intervient pendant l'exécution.

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

useConfirmPayment protège contre les doubles envois. Un second clic lorsque $isConfirming vaut true est ignoré. Il réussit avec { status } et rejette avec une WajubError, dont confirmation_timeout après 60 secondes.

Types

Chaque helper est entièrement typé, comme tous les exports de @wajub/js. Les composants ne le sont pas.

import type { AppearanceConfig, CheckoutLayout } from '@wajub/js';

const appearance: AppearanceConfig = { primaryColor: '#0f172a', labels: 'floating' };
const layout: CheckoutLayout = 'tabs';

SvelteKit

La session est créée sur votre serveur. Aucun élément de ce package ne nécessite ni ne doit recevoir de clé secrète.

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

const wajub = new Wajub({ secretKey: WAJUB_SECRET_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}`,
      metadata: { cart_id: cartId },
    },
    { idempotencyKey: `cart-${cartId}` },
  );

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

SvelteKit impose deux autres règles :

• Désactivez le rendu serveur des routes de checkout avec export const ssr = false dans +page.ts, ou montez l'intégration dans un bloc {#if browser}. L'environnement d'exécution nécessite un window.
• Placez WajubProvider dans +layout.svelte pour éviter qu'une navigation dans le flux de checkout recharge l'environnement d'exécution.

Éléments exportés par le package

WajubContextValue est le seul type déclaré par le package.