@bjpay/vue

Widget de paiement BjPay pour Vue 3.

npm install @bjpay/vue

Usage

<script setup>
import { useBjPay } from "@bjpay/vue";

const props = defineProps({ token: String });
const { pay, status, error } = useBjPay({
  baseUrl: "https://bjpay-staging.service-public.bj/widget/v2",
});

function payer() {
  pay({
    token: props.token,
    merchant: "Direction Générale des Impôts",
    title: "Quittance — Impôt foncier 2026",
    ref: "BJ-2026-00482",
    amount: 5000,
    currency: "XOF",
    onSuccess: ({ transaction }) => confirmerCoteServeur(transaction),
    onError: ({ reason }) => afficher(reason),
  });
}
</script>

<template>
  <p v-if="status === 'error'">Paiement indisponible : {{ error.message }}</p>
  <button v-else :disabled="status !== 'ready'" @click="payer">
    {{ status === "ready" ? "Payer" : "Chargement…" }}
  </button>
</template>

Ce que le composable rend

| | | |---|---| | pay(config) | Ouvre le widget. Silencieux tant que le loader n'est pas prêt | | close() | Ferme la modale depuis votre code | | status | Ref — "loading" · "ready" · "error" | | error | ShallowRef<Error \| null> |

baseUrl n'a pas de valeur par défaut

C'est cette valeur qui décide vers quel déploiement part le paiement. Un défaut sur la production ferait engager de vrais débits à une intégration de recette qui l'aurait oubliée. C'est tout ce qui précède /bjpay.min.js, préfixe de chemin compris.

Nuxt et le rendu côté serveur

L'import est sans effet sur le serveur ; le chargement n'a lieu qu'au montage. Aucun <ClientOnly> n'est nécessaire.

onSuccess ne vaut pas preuve de paiement

C'est un événement de navigateur, émis par une page que vous ne contrôlez pas. Confirmez toute transaction côté serveur auprès de TresorPay avant de livrer un service ou de marquer une commande comme réglée.

Licence

MIT