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

Fonctionnalités

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

Installation

``bash
npm install @filanodev/paygate-nuxt


ou

yarn add @filanodev/paygate-nuxt

ou

pnpm add @filanodev/paygate-nuxt
`

Configuration

$3

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
}
})
`

$3

`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
}
})
`

$3

Créez un fichier .env :

`env
PAYGATE_TOKEN=your-paygate-token-here
`

Usage avec les Composables

$3

`vue



`

$3

`vue



`

$3

`vue



`

Usage côté serveur

$3

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é'
})
}
})
`

$3

`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}
})
}
`

Exemple complet

`vue



`

Configuration TypeScript

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

API

$3

- usePayGate() - Composable principal avec toutes les fonctionnalités
- usePaymentInitiation() - Spécialisé pour l'initiation de paiements
- usePaymentStatus(reference?, pollInterval?) - Vérification de statut avec polling

$3

- getPayGateClient() - Obtenir l'instance client côté serveur
- serverInitiatePayment(params) - Initier un paiement côté serveur
- serverCheckPaymentStatus(reference) - Vérifier le statut côté serveur
- serverCheckPaymentStatusByIdentifier(identifier) - Vérifier par identifiant

Gestion des erreurs

`vue

``

Support

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

Licence

MIT