@filanodev/paygate-react


Hooks et composants React pour l'intégration de PayGateGlobal - Support FLOOZ et T-Money.

> 📝 Package communautaire développé par Filano pour aider les développeurs React à intégrer plus rapidement PayGateGlobal.

Installation

``bash
npm install @filanodev/paygate-react


ou

Enveloppez votre application avec le PayGateProvider :

`jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { PayGateProvider } from '@filanodev/paygate-react'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
authToken="your-paygate-token"
verifySSL={false} // pour le développement local uniquement
>


)
`

Usage avec les Hooks

$3

`jsx
import React from 'react'
import { usePayGate } from '@filanodev/paygate-react'

function PaymentComponent() {
const {
initiatePayment,
loading,
error,
lastPayment,
clearError
} = usePayGate()

const handlePayment = async () => {
const result = await initiatePayment({
phoneNumber: '+22890123456',
amount: 1000,
identifier: ORDER_${Date.now()},
network: 'FLOOZ',
description: 'Test paiement React'
})

if (result) {
console.log('Paiement initié:', result.txReference)
}
}

return (


`jsx
import { usePaymentInitiation } from '@filanodev/paygate-react'

function InitiationComponent() {
const {
initiate,
loading,
error,
paymentResult,
isSuccess,
reset
} = usePaymentInitiation()

const handlePayment = async () => {
const result = await initiate({
phoneNumber: '+22890123456',
amount: 1500,
identifier: 'ORDER_123',
network: 'TMONEY'
})

if (result) {
console.log('Paiement:', result)
}
}

return (


`jsx
import { useState } from 'react'
import { usePaymentStatus } from '@filanodev/paygate-react'

function StatusComponent() {
const [reference, setReference] = useState('')

const {
status,
loading,
error,
isPolling,
check,
startPolling,
stopPolling,
reset
} = usePaymentStatus(reference, 5000) // polling toutes les 5s

return (


`jsx
import { PaymentForm } from '@filanodev/paygate-react'

function App() {
const handleSuccess = (result) => {
console.log('Paiement réussi:', result)
// Rediriger ou afficher confirmation
}

const handleError = (error) => {
console.error('Erreur paiement:', error)
}

return (
onSuccess={handleSuccess}
onError={handleError}
submitLabel="Payer maintenant"
showReset={true}
defaultDescription="Achat produit XYZ"
identifierPrefix="SHOP"
/>
)
}
`

$3

Composant pour vérifier les statuts :

`jsx
import { StatusChecker } from '@filanodev/paygate-react'

function App() {
const handleStatusUpdate = (status) => {
console.log('Nouveau statut:', status)
}

const handleError = (error) => {
console.error('Erreur:', error)
}

return (
showPolling={true}
pollInterval={3000}
onStatusUpdated={handleStatusUpdate}
onError={handleError}
/>
)
}
`

API des Hooks

$3

Hook principal avec toutes les fonctionnalités :

`typescript
const {
// État
loading: boolean,
error: string | null,
lastPayment: PaymentResponse | null,
lastStatus: PaymentStatus | null,

// Actions
clearError: () => void,
initiatePayment: (params) => Promise,
generatePaymentUrl: (params) => PaymentUrlResponse | null,
checkPaymentStatus: (reference) => Promise,
checkPaymentStatusByIdentifier: (identifier) => Promise,
checkStatus: (reference) => Promise,
disburse: (params) => Promise,
checkBalance: () => Promise,

// Client direct
client: PayGateClient
} = usePayGate()
`

$3

Hook spécialisé pour l'initiation de paiements :

`typescript
const {
loading: boolean,
error: string | null,
paymentResult: PaymentResponse | null,
isSuccess: boolean,
initiate: (params) => Promise,
reset: () => void,
clearError: () => void
} = usePaymentInitiation()
`

$3

Hook pour la vérification de statut avec polling optionnel :

`typescript
const {
status: PaymentStatus | null,
loading: boolean,
error: string | null,
isPolling: boolean,
check: (ref?) => Promise,
startPolling: () => void,
stopPolling: () => void,
reset: () => void
} = usePaymentStatus(reference, pollInterval)
`

Types TypeScript

Le package inclut tous les types TypeScript :

`typescript
import type {
PayGateProviderProps,
UsePayGateState,
PayGateNetwork,
InitiatePaymentParams,
PaymentStatus
} from '@filanodev/paygate-react'
`

Gestion des erreurs

`jsx
import { usePayGate, PayGateError } from '@filanodev/paygate-react'

function PaymentComponent() {
const { initiatePayment } = usePayGate()

const handlePayment = async () => {
try {
await initiatePayment(params)
} catch (error) {
if (error instanceof PayGateError) {
console.error('Erreur PayGate:', error.status, error.message)
}
}
}

return Payer
}
`

Utilisation avec TypeScript

`tsx
import React from 'react'
import {
PayGateProvider,
usePayGate,
type PayGateNetwork,
type InitiatePaymentParams
} from '@filanodev/paygate-react'

interface PaymentFormData {
phoneNumber: string
amount: number
network: PayGateNetwork
}

function TypedComponent() {
const { initiatePayment } = usePayGate()

const handleSubmit = async (data: PaymentFormData) => {
const params: InitiatePaymentParams = {
phoneNumber: data.phoneNumber,
amount: data.amount,
identifier: ORDER_${Date.now()},
network: data.network,
description: 'Paiement TypeScript'
}

const result = await initiatePayment(params)
console.log(result?.txReference)
}

// ... rest of component
}
``

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