> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native

> Guide complet pour intégrer le SDK Dodo Payments dans votre application React Native pour un traitement des paiements sécurisé

# Intégration du SDK React Native

Le SDK React Native de Dodo Payments vous permet de créer des expériences de paiement sécurisées dans vos applications Android et iOS natives. Notre SDK fournit des composants et des écrans UI personnalisables pour la collecte des détails de paiement.

* 📦 Installez notre SDK depuis [NPM](https://www.npmjs.com/package/dodopayments-react-native-sdk)
* 📚 Consultez notre [dépôt de démonstration](https://github.com/dodopayments/dodopayments-react-native-demo) pour des exemples d'implémentation complets
* 🎥 Regardez notre [vidéo de démonstration](https://youtu.be/eicctkqK04Y) pour voir le SDK Dodo Payments en action

<Frame>
  <iframe className="w-full aspect-video rounded-md" src="https://www.youtube.com/embed/eicctkqK04Y" title="React Native SDK Demo | Dodo Payments" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

## Fonctionnalités

<CardGroup cols={1}>
  <Card title="Simplified Security" icon="shield-check">
    Collectez les données de paiement sensibles en toute sécurité tout en restant conforme à la norme PCI
  </Card>

  <Card title="Multiple Payment Methods" icon="credit-card">
    Acceptez différents [moyens de paiement](/features/payment-methods) pour étendre votre portée mondiale
  </Card>

  <Card title="Native UI" icon="mobile">
    Écrans et éléments natifs pour Android et iOS
  </Card>
</CardGroup>

<Note>
  Actuellement, Apple Pay, Google Pay, Cash App et UPI ne sont pas pris en charge dans le SDK React Native. Nous travaillons activement à l’ajout de ces moyens de paiement dans de futures versions.
</Note>

## Installation

<Steps>
  <Step title="Install the SDK">
    Installez le SDK Dodo Payments avec le gestionnaire de paquets de votre choix :

    <Tabs>
      <Tab title="npm">
        ```bash theme={null}
        npm install dodopayments-react-native-sdk
        ```
      </Tab>

      <Tab title="yarn">
        ```bash theme={null}
        yarn add dodopayments-react-native-sdk
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Platform-specific setup">
    <Tabs>
      <Tab title="iOS">
        Exécutez pod install dans votre dossier iOS :

        ```bash theme={null}
        cd ios && pod install && npm run ios
        ```
      </Tab>

      <Tab title="Android">
        Exécutez la commande suivante :

        ```bash theme={null}
        npm run android
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Configuration côté client

<Steps>
  <Step title="Get Publishable Key">
    Récupérez votre clé publique depuis le tableau de bord Dodo Payments. (Distincte pour les modes test et production)
    [https://app.dodopayments.com/developer/others](https://app.dodopayments.com/developer/others)
  </Step>

  <Step title="Setup Payment Provider">
    Enveloppez votre application avec le `DodoPaymentProvider` :

    ```tsx App.tsx theme={null}
    import React from 'react';
    import { DodoPaymentProvider } from 'dodopayments-react-native-sdk';
    import PaymentScreen from './PaymentScreen';

    function App() {
      return (
        <DodoPaymentProvider publishableKey="YOUR_PUBLISHABLE_KEY">
          <PaymentScreen />
        </DodoPaymentProvider>
      );
    }

    export default App;
    ```

    <Note>
      Vous devrez générer des clés API depuis votre tableau de bord Dodo Payments. Consultez notre [guide de génération de clés API](/api-reference/introduction#api-key-generation) pour des instructions détaillées.
    </Note>
  </Step>

  <Step title="Create payment utility function">
    Créez une fonction utilitaire pour récupérer les paramètres de paiement depuis votre API backend :

    ```tsx utils/fetchPaymentParams.ts theme={null}
    const API_URL = 'YOUR_BACKEND_URL'; // Replace with your server URL

    const fetchPaymentParams = async () => {
      const response = await fetch(`${API_URL}/create-payment`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      });
      
      if (!response.ok) {
        throw new Error('Failed to fetch payment parameters');
      }
      
      return await response.json();
    };

    export default fetchPaymentParams;
    ```

    <Note>
      Cette fonction suppose que vous disposez d’un point de terminaison API backend qui crée des intents de paiement et renvoie un client secret. Assurez-vous que votre backend est correctement configuré pour gérer la création de paiements. Consultez notre [tutoriel d’intégration API](/developer-resources/integration-guide) pour des exemples de configuration backend.
    </Note>
  </Step>

  <Step title="Implement the payment screen">
    Créez votre écran de paiement en utilisant le hook `useCheckout`. Voici une implémentation complète :

    ```tsx PaymentScreen.tsx theme={null}
    import React from 'react';
    import { View, Text, useColorScheme } from 'react-native';
    import { useCheckout, type sessionParams } from 'dodopayments-react-native-sdk';
    import fetchPaymentParams from './utils/fetchPaymentParams';

    const PaymentScreen = () => {
      const { initPaymentSession, presentPaymentSheet } = useCheckout();
      const [error, setError] = React.useState('');
      const [message, setMessage] = React.useState('');
      const [loading, setLoading] = React.useState(false);
      const [showSuccessScreen, setShowSuccessScreen] = React.useState(false);
      const isDarkMode = useColorScheme() === 'dark';

      const processPayment = async () => {
        setLoading(true);
        setMessage('');
        setError('');

        try {
          // 1. Get payment parameters from your backend
          const key = await fetchPaymentParams();
          
          // 2. Initialize payment session
          const paymentSheetParamsResult = await initPaymentSession({
            clientSecret: key.clientSecret,
          });
          
          // 3. Configure and present payment sheet
          const params: sessionParams = {
            ...(paymentSheetParamsResult as sessionParams),
            configuration: {
              appearance: {
                themes: isDarkMode ? 'dark' : 'light',
                primaryButton: {
                  colors: {
                    light: {
                      background: 'green',
                      componentBorder: 'green',
                      placeholderText: 'yellow',
                    },
                    dark: {
                      background: 'green',
                      componentBorder: 'green',
                      placeholderText: 'yellow',
                    },
                  },
                  shapes: {
                    borderRadius: 30,
                    borderWidth: 3,
                  },
                },
              },
              mode: 'test', // DEFAULTS TO TEST MODE
            },
          };

          const paymentSheetResponse = await presentPaymentSheet(params);

          // 4. Handle payment result
          switch (paymentSheetResponse?.status) {
            case 'cancelled':
              setError('Payment cancelled by user.');
              break;
            case 'succeeded':
              setMessage('');
              setShowSuccessScreen(true);
              break;
            case 'failed':
              setError('Payment failed : \n' + paymentSheetResponse?.message);
              break;
            default:
              setError(paymentSheetResponse?.message);
              setMessage('');
          }
        } catch (err) {
          setError('Failed to process payment');
        } finally {
          setLoading(false);
        }
      };

      return (
        <View>
          <Button 
            onPress={processPayment}
            disabled={loading}
            title={loading ? 'Processing...' : 'Pay Now'}
          />
          {error && <Text style={{ color: 'red' }}>{error}</Text>}
          {message && <Text style={{ color: 'green' }}>{message}</Text>}
          {showSuccessScreen && (
            <PaymentSuccessScreen
              amount={total}
              onContinue={() => setShowSuccessScreen(false)}
            />
          )}
        </View>
      );
    };

    export default PaymentScreen;
    ```

    <Note>
      Pour des exemples complets avec style, gestion des erreurs et options de personnalisation, consultez nos dépôts de démonstration :

      * [Basic Integration Demo](https://github.com/dodopayments/dodopayments-react-native-demo)
    </Note>
  </Step>
</Steps>

## Options de configuration

### Paramètres de session

<ParamField path="clientSecret" type="string" required>
  Le client secret de votre intent de paiement, obtenu via l’API de paiement unique ou d’abonnement.
</ParamField>

<ParamField path="mode" type="string" required>
  Le mode de la session de paiement (test ou production).
</ParamField>

<ParamField path="configuration.appearance" type="object">
  Options de personnalisation pour l’apparence de la feuille de paiement
</ParamField>

<ParamField path="configuration.appearance.themes" type="string">
  Mode du thème : `'light'` ou `'dark'`
</ParamField>

### Personnalisation de l'apparence

Vous pouvez personnaliser l’Unified Checkout React Native pour qu’il corresponde au design de votre application en modifiant les couleurs, les polices, etc. via le paramètre appearance lors de l’appel de `initPaymentSession()`.

#### Personnalisation des couleurs

Chaque catégorie de couleur détermine la couleur d’un ou plusieurs composants de l’interface. Par exemple, `primary` définit la couleur du bouton Payer.

| Catégorie de couleur  | Utilisation                                                              |
| --------------------- | ------------------------------------------------------------------------ |
| `primary`             | Couleur principale pour le bouton Payer et les éléments sélectionnés     |
| `background`          | Couleur d’arrière-plan de la page de paiement                            |
| `componentBackground` | Couleur d’arrière-plan pour les champs, onglets et autres composants     |
| `componentBorder`     | Couleur de bordure externe pour les champs, onglets et autres composants |
| `componentDivider`    | Couleur de bordure interne (bords partagés) pour les composants          |
| `primaryText`         | Couleur du texte d’en-tête                                               |
| `secondaryText`       | Couleur du texte des étiquettes des champs                               |
| `componentText`       | Couleur du texte des champs (par ex., numéro de carte, code postal)      |
| `placeholderText`     | Couleur du texte des espaces réservés pour les champs                    |
| `icon`                | Couleur des icônes (par ex., bouton de fermeture)                        |
| `error`               | Couleur des messages d’erreur et des actions destructrices               |

Configuration d'exemple avec support pour les modes clair et sombre :

```tsx theme={null}
const appearance = {
  colors: {
    light: {
      primary: '#F8F8F2',
      background: '#ffffff',
      componentBackground: '#E6DB74',
      componentBorder: '#FD971F',
      componentDivider: '#FD971F',
      primaryText: '#F8F8F2',
      secondaryText: '#75715E',
      componentText: '#AE81FF',
      placeholderText: '#E69F66',
      icon: '#F92672',
      error: '#FF0000',
    },
    dark: {
      primary: '#00ff0099',
      background: '#ff0000',
      componentBackground: '#ff0080',
      componentBorder: '#62ff08',
      componentDivider: '#d6de00',
      primaryText: '#5181fc',
      secondaryText: '#ff7b00',
      componentText: '#00ffff',
      placeholderText: '#00ffff',
      icon: '#f0f0f0',
      error: '#0f0f0f',
    },
  },
};
```

#### Personnalisation de la forme

Vous pouvez personnaliser le rayon de bordure, la largeur de bordure et l'ombre utilisées dans toute l'interface de paiement :

```tsx theme={null}
const appearance = {
  shapes: {
    borderRadius: 10, // Border radius for input fields, tabs, and components
    borderWidth: 1,   // Border width for components
  },
};
```

#### Personnalisation spécifique aux composants

Vous pouvez personnaliser des composants UI spécifiques comme le bouton principal (bouton de paiement). Ces paramètres ont la priorité sur les paramètres d'apparence globaux :

```tsx theme={null}
const appearance = {
  primaryButton: {
    colors: {
      background: '#000000',
      text: '#ffffff',
      border: '#ff00ff',
    },
    shapes: {
      borderRadius: 10,
      borderWidth: 1.5,
    },
  },
};
```

Pour appliquer ces personnalisations, incluez-les dans votre configuration de session de paiement :

```tsx theme={null}
const params: sessionParams = {
  ...paymentSheetParams,
  configuration: {
    appearance: {
      themes: isDarkMode ? 'dark' : 'light',
      ...appearance, // Include your custom appearance settings
    },
  },
};
```

## Gestion des erreurs

Gérez différents états de paiement dans votre fonction de paiement :

```tsx theme={null}
const handlePaymentResult = (paymentSheetResponse) => {
  switch (paymentSheetResponse?.status) {
    case 'cancelled':
      // User cancelled the payment
      console.log('Payment cancelled by user');
      break;
    case 'succeeded':
      // Payment completed successfully
      console.log('Payment succeeded');
      // Navigate to success screen or update UI
      break;
    case 'failed':
      // Payment failed
      console.log('Payment failed:', paymentSheetResponse?.message);
      // Show error message to user
      break;
    default:
      console.log('Unknown payment status:', paymentSheetResponse?.status);
  }
};
```

<AccordionGroup>
  <Accordion title="Common Error Scenarios">
    * **Problèmes de connectivité réseau** : Assurez une connexion internet stable
    * **Client secret invalide** : Vérifiez que votre backend génère des intents de paiement valides
    * **Dépendances manquantes** : Installez toutes les dépendances requises
    * **Configuration spécifique à la plateforme** : Finalisez les étapes de configuration iOS et Android
    * **Erreurs d’API** : Consultez notre [référence des codes d’erreur](/api-reference/error-codes) pour la gestion détaillée des erreurs
  </Accordion>

  <Accordion title="Debugging Tips">
    * Activez la journalisation de débogage en développement
    * Vérifiez les requêtes réseau vers votre backend
    * Vérifiez que les clés API sont correctement configurées
    * Testez sur les plateformes iOS et Android
    * Consultez notre [FAQ Technique](/miscellaneous/faq) pour les problèmes courants
    * Utilisez [Mode Test vs Mode Live](/miscellaneous/test-mode-vs-live-mode) de manière appropriée
  </Accordion>
</AccordionGroup>

### Méthodes de paiement de test

<Tip>
  Utilisez des numéros de carte de test en développement pour vérifier votre intégration sans traiter de paiements réels. En savoir plus sur notre [processus de test](/miscellaneous/testing-process) et les environnements de test disponibles.
</Tip>