@dunopay/react-native

SDK React Native de DunoPay — bottom sheet de paiement Mobile Money (MTN, MOOV, Wave, Orange…). 100 % JavaScript, aucune dépendance native.

Installation

npm install @dunopay/react-native

Usage

import React, { useState } from 'react';
import { Button, View } from 'react-native';
import { DunoPaySheet } from '@dunopay/react-native';

export default function Checkout() {
  const [visible, setVisible] = useState(false);

  return (
    <View>
      <Button title="Payer 5 000 XOF" onPress={() => setVisible(true)} />

      <DunoPaySheet
        visible={visible}
        publicKey="pk_sandbox_xxxxx"
        mode="sandbox"                 // 'sandbox' | 'live'
        amount={5000}
        currency="XOF"
        description="Commande #42"
        // Optionnel — si prénom, nom et téléphone sont fournis,
        // l'étape "Vos informations" est sautée
        customer={{
          firstname: 'Awa',
          lastname: 'Diallo',
          phone: '0196789966',
          email: '[email protected]',
        }}
        primaryColor="#7B2FBE"         // optionnel
        onSuccess={(result) => {
          console.log('Payé !', result.reference);
          setVisible(false);
        }}
        onError={(reason) => console.log('Échec', reason)}
        onCancel={() => setVisible(false)}
      />
    </View>
  );
}

Props

| Prop | Requis | Description | |---|---|---| | visible | ✅ | Affiche/masque la sheet | | publicKey | ✅ | Clé publique pk_… | | amount, currency, description | ✅ | Détails du paiement (montant entier, XOF) | | mode | — | 'sandbox' (défaut) ou 'live' | | customer | — | Pré-remplit (et saute) l'étape infos client | | metadata, returnUrl | — | Transmis à la transaction | | primaryColor | — | Couleur principale du thème | | onSuccess(result) | — | { status, transaction_id, reference, amount, currency } | | onError(reason) | — | 'declined' | 'cancelled' | 'timeout' | | onCancel() | — | Fermez la sheet ici (setVisible(false)) |

⚠️ Vérifiez toujours le paiement côté serveur (API GET /api/v1/transactions/{id} avec votre clé secrète, ou webhooks) avant de livrer — ne vous fiez pas uniquement au callback onSuccess côté mobile.