Module Nuxt pour l'intégration de PayGateGlobal - Support FLOOZ et T-Money
npm install @filanodev/paygate-nuxt
Module Nuxt 3/4 pour l'intégration de PayGateGlobal - Support FLOOZ et T-Money.
> 📝 Package communautaire développé par Filano pour aider les développeurs Nuxt à intégrer plus rapidement PayGateGlobal.
- ✅ Nuxt 3 & Nuxt 4 - Support complet des versions modernes
- 🔄 SSR/SPA/SSG - Compatible avec tous les modes de rendu Nuxt
- 🎯 Auto-imports - Composables disponibles globalement
- 🛠 TypeScript - Support complet avec types
- ⚡ Plugin auto - Configuration automatique
- 🔧 Utilitaires serveur - API routes simplifiées
``bash`
npm install @filanodev/paygate-nuxtou
yarn add @filanodev/paygate-nuxtou
pnpm add @filanodev/paygate-nuxt
Ajoutez le module dans votre nuxt.config.ts :
`typescript`
export default defineNuxtConfig({
modules: [
'@filanodev/paygate-nuxt'
],
paygate: {
authToken: process.env.PAYGATE_TOKEN,
verifySSL: false // pour le développement local uniquement
}
})
`typescript`
export default defineNuxtConfig({
modules: [
'@filanodev/paygate-nuxt'
],
paygate: {
// Configuration PayGate
authToken: process.env.PAYGATE_TOKEN,
verifySSL: true,
// Options du module
autoImports: true, // Auto-import des composables
prefix: 'paygate', // Préfixe des composables
serverUtils: true // Activer les utilitaires serveur
}
})
Créez un fichier .env :
`env`
PAYGATE_TOKEN=your-paygate-token-here
` vue
{{ error }}
Paiement initié: {{ lastPayment.txReference }}
`
` vue
✅ Paiement réussi: {{ paymentResult.txReference }}
`
` vue
{{ status.message }}
Montant: {{ status.amount }} FCFA
Méthode: {{ status.paymentMethod }}
🔄 Surveillance en cours...
`
Créez server/api/payment/initiate.post.ts :
`typescript
import { serverInitiatePayment } from '#paygate/server/utils'
export default defineEventHandler(async (event) => {
const body = await readBody(event)
try {
const result = await serverInitiatePayment({
phoneNumber: body.phoneNumber,
amount: body.amount,
identifier: API_${Date.now()},`
network: body.network,
description: body.description
})
return result
} catch (error) {
throw createError({
statusCode: 400,
statusMessage: error.message
})
}
})
Créez server/api/payment/status/[reference].get.ts :
`typescript
import { serverCheckPaymentStatus } from '#paygate/server/utils'
export default defineEventHandler(async (event) => {
const reference = getRouterParam(event, 'reference')
try {
const status = await serverCheckPaymentStatus(reference!)
return status
} catch (error) {
throw createError({
statusCode: 404,
statusMessage: 'Paiement non trouvé'
})
}
})
`
`typescript
// utils/payment.server.ts
import { getPayGateClient } from '#paygate/server/utils'
export async function processPayment(orderData: any) {
const client = getPayGateClient()
return await client.initiatePayment({
phoneNumber: orderData.phone,
amount: orderData.total,
identifier: orderData.id,
network: orderData.network,
description: Commande ${orderData.id}`
})
}
` Référence: {{ paymentResult.txReference }} Montant: {{ currentStatus.amount }} FCFA Téléphone: {{ currentStatus.phoneNumber }} Méthode: {{ currentStatus.paymentMethod }} Date: {{ formatDate(currentStatus.datetime) }} vue
Paiement PayGate
Paiement initié
{{ getStatusIcon(currentStatus.status) }} {{ currentStatus.message }}
{{ error }}
`
Le module ajoute automatiquement les types. Créez types/paygate.d.ts si nécessaire :
`typescript
import type { PayGateClient } from '@filanodev/paygate-core'
declare module '#app' {
interface NuxtApp {
$paygate: PayGateClient
}
}
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$paygate: PayGateClient
}
}
`
- usePayGate() - Composable principal avec toutes les fonctionnalitésusePaymentInitiation()
- - Spécialisé pour l'initiation de paiementsusePaymentStatus(reference?, pollInterval?)
- - Vérification de statut avec polling
- getPayGateClient() - Obtenir l'instance client côté serveurserverInitiatePayment(params)
- - Initier un paiement côté serveurserverCheckPaymentStatus(reference)
- - Vérifier le statut côté serveurserverCheckPaymentStatusByIdentifier(identifier)
- - Vérifier par identifiant
`vue``
Pour toute question sur ce package, créez une issue sur GitHub.
Pour le support PayGateGlobal officiel :
- Site : https://paygateglobal.com/
- Email : info@paygateglobal.com
MIT