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>

defer ne fonctionne pas en 1.5.1. Il empêche le provider de charger l'environnement d'exécution, et le loadWajub() renvoyé par useLoadWajub() vous renvoie l'environnement sans l'enregistrer dans le provider, si bien que les intégrations et les composants de champs ne se montent jamais. Laissez defer désactivé : le provider commence alors 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.value?.wajub.open({ sessionId: props.sessionId, onSuccess: onUpgraded });
}
</script>

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

C'est la ref qui fait fonctionner ce bouton : elle vaut null lorsque setup s'exécute, car le provider ne commence le chargement qu'une fois monté, puis elle se remplit à l'arrivée de l'environnement d'exécution. Lisez runtime.value dans le script. Le template lit directement sa valeur : !runtime y suffit.

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';
import { CheckoutEmbed } from '@wajub/vue';

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_API_KEY! });

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

  const payment = await wajub.payments.create(
    {
      amount: 25000,
      currency: 'XAF',
      description: `Cart ${cartId}`,
      customer: { email: '[email protected]' },
      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, WajubContextValue et, à partir de la version 1.6.0, WajubRuntimeRef, le type renvoyé par useWajubOptional(), avec tous les exports de @wajub/js.