PayGateGlobal React hooks and components - Support FLOOZ and T-Money
npm install @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.
``bash`
npm install @filanodev/paygate-reactou
yarn add @filanodev/paygate-reactou
pnpm add @filanodev/paygate-react
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(
verifySSL={false} // pour le développement local uniquement
>
)
`
`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 (
{error && (
{lastPayment && (
$3
`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 (
{isSuccess && (
â
Paiement réussi: {paymentResult.txReference}
)}
)
}
`$3
`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 (
value={reference}
onChange={(e) => setReference(e.target.value)}
placeholder="TX_REFERENCE"
/>
{status && (
{status.message}
Montant: {status.amount} FCFA
Méthode: {status.paymentMethod}
)}
)
}
`Composants prĂȘts Ă l'emploi
$3
Formulaire de paiement complet avec validation :
`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
}
`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
}
``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