Duticotac React

Composants React (Tailwind/Shadcn) pour integrer les paiements Duticotac dans vos applications.

Installation


pnpm add @applite/duticotac @applite/duticotac-react

Prerequis : React >= 18, Tailwind CSS configure, tokens de couleur Shadcn (primary, border, etc.).

Demarrage rapide


import { useState } from "react";
import { DuticotacSDK } from "@applite/duticotac";
import { DuticotacPaymentModal } from "@applite/duticotac-react";
 
const sdk = new DuticotacSDK({ apiKey: "your_api_key" });
 
function CheckoutPage() {
  const [open, setOpen] = useState(false);
 
  return (
    <>
      <button onClick={() => setOpen(true)}>Acheter</button>
      <DuticotacPaymentModal
        open={open}
        onClose={() => setOpen(false)}
        sdk={sdk}
        amount={5000}
        getTransactionId={async () => "unique-txn-id"}
        productReference="premium-monthly"
        onSuccess={(tx) => console.log("Confirme:", tx)}
      />
    </>
  );
}

Composants

`DuticotacPaymentModal`

Modal complet : selection provider, telephone, OTP, polling, resultat.

Exemple


<DuticotacPaymentModal
  open={open}
  onClose={() => setOpen(false)}
  sdk={sdk}
  amount={5000}
  providers={["OM_CI", "MTN_CI", "MOOV_CI", "WAVE_CI"]}
  getTransactionId={getTransactionId}
  productReference="product-ref"
  name="Jean Dupont"
  email="jean@example.com"
  onSuccess={(tx) => console.log(tx)}
/>

Prop	Type	Requis	Description
`open`	boolean	Oui	Visibilite du modal
`onClose`	() => void	Oui	Callback de fermeture
`sdk`	DuticotacSDK	Oui	Instance du SDK
`amount`	number	Oui	Montant en FCFA
`getTransactionId`	() => Promise<string>	Oui	Generateur d’ID
`providers`	PaymentProvider[]	Non	Providers disponibles
`productReference`	string	Non	Reference produit
`onSuccess`	(tx: TransactionModel) => void	Non	Callback succes
`initialPhone`	string	Non	Pre-remplir le telephone
`name`	string	Non	Nom du client
`email`	string	Non	Email du client
`customerId`	string	Non	ID client
`kolaboReference`	string	Non	Reference Kolabo
`app`	CoreApp	Non	Application source
`platform`	PlatformType	Non	Plateforme
`title`	string	Non	Titre du modal
`successMessage`	string	Non	Message de succes
`pollTimeout`	number	Non	Timeout polling (defaut: 90000ms)
`renderModal`	(props) => ReactNode	Non	Wrapper modal personnalise
`className`	string	Non	Classes CSS additionnelles

Integration Shadcn Dialog


import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 
<DuticotacPaymentModal
  open={open}
  onClose={() => setOpen(false)}
  sdk={sdk}
  amount={5000}
  getTransactionId={getTransactionId}
  renderModal={({ open, onClose, title, children }) => (
    <Dialog open={open} onOpenChange={(v) => { if (!v) onClose(); }}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
        </DialogHeader>
        {children}
      </DialogContent>
    </Dialog>
  )}
/>

Integration Shadcn Drawer (mobile)


import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from "@/components/ui/drawer";
 
<DuticotacPaymentModal
  open={open}
  onClose={() => setOpen(false)}
  sdk={sdk}
  amount={5000}
  getTransactionId={getTransactionId}
  renderModal={({ open, onClose, title, children }) => (
    <Drawer open={open} onOpenChange={(v) => { if (!v) onClose(); }}>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>{title}</DrawerTitle>
        </DrawerHeader>
        <div className="px-4 pb-6">{children}</div>
      </DrawerContent>
    </Drawer>
  )}
/>

`ProviderSelector`

Grille de selection de provider avec logos.

Exemple


import { ProviderSelector } from "@applite/duticotac-react";
 
<ProviderSelector
  providers={["OM_CI", "MTN_CI", "MOOV_CI", "WAVE_CI"]}
  value={provider}
  onChange={setProvider}
/>

Prop	Type	Requis	Description
`providers`	PaymentProvider[]	Oui	Providers a afficher
`value`	PaymentProvider	Oui	Provider selectionne
`onChange`	(provider) => void	Oui	Callback de changement
`disabled`	boolean	Non	Desactiver la selection
`className`	string	Non	Classes CSS

`PhoneInput`

Champ telephone avec prefixe +225 (Cote d’Ivoire).

Exemple


import { PhoneInput } from "@applite/duticotac-react";
 
<PhoneInput
  value={phone}
  onChange={setPhone}
  error={phoneError}
  autoFocus
/>

Prop	Type	Requis	Description
`value`	string	Oui	Valeur (sans +225)
`onChange`	(value) => void	Oui	Callback de changement
`label`	string	Non	Label du champ
`placeholder`	string	Non	Placeholder
`error`	string \| null	Non	Message d’erreur
`disabled`	boolean	Non	Desactiver
`autoFocus`	boolean	Non	Focus auto
`className`	string	Non	Classes CSS

`OtpInput`

Saisie de code OTP a 4 chiffres (Orange Money). Auto-focus, collage, navigation clavier.

Exemple


import { OtpInput } from "@applite/duticotac-react";
 
<OtpInput value={otp} onChange={setOtp} />

Prop	Type	Requis	Description
`value`	string	Oui	Code OTP
`onChange`	(value) => void	Oui	Callback de changement
`length`	number	Non	Nombre de chiffres (defaut: 4)
`disabled`	boolean	Non	Desactiver
`className`	string	Non	Classes CSS

`TransactionStatus`

Affichage du statut : polling (spinner + compteur), succes, ou erreur.

Exemple


import { TransactionStatus } from "@applite/duticotac-react";
 
// Polling
<TransactionStatus status="polling" elapsedSeconds={42} />
 
// Succes
<TransactionStatus status="success" message="500 credits ajoutes." onClose={close} />
 
// Erreur
<TransactionStatus status="error" errorMessage="Echec." onRetry={retry} onClose={close} />

Prop	Type	Requis	Description
`status`	”polling” \| “success” \| “error”	Oui	Etat actuel
`elapsedSeconds`	number	Non	Secondes ecoulees
`message`	string	Non	Message de succes
`errorMessage`	string	Non	Message d’erreur
`paymentUrl`	string \| null	Non	URL paiement Wave
`onRetry`	() => void	Non	Bouton “Reessayer”
`onClose`	() => void	Non	Bouton “Fermer”
`onOpenPaymentUrl`	() => void	Non	Ouvrir URL paiement
`className`	string	Non	Classes CSS

Providers supportes

Code	Nom	OTP	Prefixe	Particularite
`OM_CI`	Orange Money	Oui (4 chiffres)	`07`	#144*82# pour le code OTP
`MTN_CI`	MTN MoMo	Non	`05`	Confirmation sur telephone
`MOOV_CI`	Moov (Flooz)	Non	`01`	Confirmation sur telephone
`WAVE_CI`	Wave	Non	Tous	Ouvre un onglet navigateur
`CREDIT_CARD`	Carte de credit	Non	—	A venir
`CASH`	Especes	Non	—	Paiement en main propre
`IAP`	Achat Integre	Non	—	In-App Purchase

Utilitaires


import {
  validatePhone,   // Validation telephone par provider
  normalizePhone,  // "+2250701020304"
  getPhoneRegex,   // Regex par provider
  needsOtp,        // true pour OM_CI
  formatCFA,       // 5000 → "5 000"
  cn,              // Merge classes Tailwind
} from "@applite/duticotac-react";

Comportement du polling

Backoff exponentiel : 1s → 2s → 3s → 5s → 8s
Timeout : 90s par defaut (configurable)
Tab-aware : Pause quand l’onglet est cache, reprend au retour
Compteur : “Verification en cours… 42s”
Wave : Ouvre automatiquement l’URL de paiement dans un nouvel onglet

Gestion des erreurs

Les erreurs du SDK sont automatiquement affichees en francais dans le modal :

Code	Message
`otp-required`	Code OTP requis pour les paiements Orange Money
`payment-failed`	Echec du paiement
`payment-cancelled`	Paiement annule
`polling-timeout`	Temps d’attente de la transaction expire
`phone-required`	Numero de telephone requis
`unknown-error`	Une erreur inconnue est survenue

Duticotac React

Installation

Demarrage rapide

Composants

`DuticotacPaymentModal`

Exemple

Props

Integration Shadcn Dialog

Integration Shadcn Drawer (mobile)

`ProviderSelector`

Exemple

Props

`PhoneInput`

Exemple

Props

`OtpInput`

Exemple

Props

`TransactionStatus`

Exemple

Props

Providers supportes

Utilitaires

Comportement du polling

Gestion des erreurs