SDK React

npm install @fluxx/collect @fluxx/collect-react

import { CollectProvider } from '@fluxx/collect-react'

export function App({ children }: { children: React.ReactNode }) {
  return (
    <CollectProvider
      apiKey={process.env.FLUXX_API_KEY!}
      environment="test"
    >
      {children}
    </CollectProvider>
  )
}

import { useCollectOperators, useCollectActions } from '@fluxx/collect-react'

function PayButton() {
  const { data, loading } = useCollectOperators()
  const { createPayment, confirmPayment, busy } = useCollectActions()

  async function handlePay() {
    const init = await createPayment(
      {
        reference: 'ORDER-001',
        amount: 3000,
        country: 'BJ',
        mode: 'direct',
        operator: 'mtn',
        customer: { phone: '2290166000000' },
      },
      { idempotencyKey: 'ORDER-001' },
    )
    if (init.status === 'awaiting_otp') {
      await confirmPayment({ reference: 'ORDER-001', otp: '123456' })
    }
  }

  if (loading) return <span>Chargement…</span>
  return (
    <button type="button" disabled={busy} onClick={() => void handlePay()}>
      Payer
    </button>
  )
}