Vue 3

@wajub/vue enveloppe @wajub/js avec la syntaxe Vue 3 : un provider qui charge une fois l'environnement d'exécution, cinq composants de champs et quatre composables. 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 à Vue.

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 sideEffects: false.

npm install @wajub/vue @wajub/js

Provider

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

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

<template>
  <ClientOnly>
    <WajubProvider>
      <slot />
    </WajubProvider>
  </ClientOnly>
</template>

Utilisez defer si un parent a déjà chargé l'environnement d'exécution ou si le chargement doit attendre une action de l'utilisateur. Sans cette option, le provider commence le chargement dès son montage.

Composables

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

const props = defineProps<{ sessionId: string }>();
const runtime = useWajubOptional();

function upgrade() {
  runtime?.wajub.open({ sessionId: props.sessionId, onSuccess: onUpgraded });
}
</script>

<template>
  <button :disabled="!runtime" @click="upgrade">Upgrade plan</button>
</template>

useWajubContext() renvoie les mêmes refs { runtime, loading, error } si vous préférez créer votre propre composable. WAJUB_INJECTION_KEY est la clé utilisée par le provider.

CheckoutEmbed

Le checkout hébergé dans votre propre mise en page. Contrairement aux autres frameworks, les props forment une liste fermée : session-id, class, style, min-height, locale, embed-origin, theme, appearance, layout, loading-text, show-loading et les onze callbacks.

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

defineProps<{ sessionId: string }>();
</script>

<template>
  <CheckoutEmbed
    :key="sessionId"
    :session-id="sessionId"
    layout="tabs"
    :min-height="480"
    @success="navigateTo('/order/complete')"
    @error="(error) => console.error(error.code, error.message)"
  />
</template>

Chaque callback est déclaré comme prop. @success et :on-success sont donc équivalents. Vue convertit le listener en prop pour vous.

<script setup lang="ts">
import { ref, watch } from 'vue';
import type { CheckoutInstance } from '@wajub/js';

const props = defineProps<{ sessionId: string; dark: boolean }>();
const checkout = ref<CheckoutInstance | null>(null);

watch(
  () => props.dark,
  (dark) => checkout.value?.update({ appearance: { colorScheme: dark ? 'dark' : 'light' } }),
);
</script>

<template>
  <CheckoutEmbed
    :key="sessionId"
    :session-id="sessionId"
    @ready="(instance) => (checkout = instance)"
  />
</template>

Champs de paiement

Les cinq composants affichent chacun un groupe de champs : CardComponent, MobileMoneyComponent, WalletComponent, PaymentComponent et AddressComponent. Ils partagent les props de ComponentConfig, avec les props du wrapper ci-dessous. ComponentEmbed est le même composant avec un type explicite lorsque le choix intervient pendant l'exécution.

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

const props = defineProps<{ sessionId: string }>();
const { confirm, isConfirming } = useConfirmPayment(props.sessionId);
const field = ref<ComponentInstance | null>(null);

function pay() {
  if (field.value) confirm(field.value);
}
</script>

<template>
  <AddressComponent :session-id="sessionId" address-mode="shipping" />
  <PaymentComponent
    :session-id="sessionId"
    collect-address="shipping"
    collect-name
    @instance="(instance) => (field = instance)"
  />
  <button :disabled="isConfirming || !field" @click="pay">
    {{ isConfirming ? 'Processing…' : 'Pay now' }}
  </button>
</template>

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.

Nuxt

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 { Wajub } from '@wajub/node';

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

export default defineEventHandler(async (event) => {
  const { cartId } = await readBody(event);

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

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

Nuxt impose trois autres règles :

• Placez le checkout dans <ClientOnly>. L'environnement d'exécution nécessite un window. Les composables renvoient null au lieu de générer une erreur pendant le rendu serveur.
• Placez WajubProvider dans une mise en page pour éviter qu'une navigation dans le flux de checkout recharge l'environnement d'exécution.
• Récupérez la session depuis server/api/ et transmettez le jeton comme prop.

Éléments exportés par le package

Les types sont inclus : WajubProviderProps, CheckoutEmbedProps, ComponentEmbedProps et WajubContextValue, avec tous les exports de @wajub/js.