Passer au contenu principal

GitHub Repository

Boilerplate complet Expo + React Native + Dodo Payments

​
Aperçu

Un boilerplate prêt pour la production pour intégrer Dodo Payments dans des applications Expo/React Native. Ce modèle inclut la création de sessions de caisse, le traitement des paiements et une configuration TypeScript appropriée pour vous aider à commencer à accepter des paiements dans votre application mobile rapidement.
Ce boilerplate utilise Expo SDK avec TypeScript et inclut des exemples d’implémentations pour les sessions de checkout et le traitement des paiements.

​
Prérequis

  • Node.js 18+
  • Expo CLI ou EAS CLI
  • Compte Dodo Payments (clé API depuis le tableau de bord)
  • Simulateur iOS ou Émulateur Android (ou appareil physique)

​
Démarrage Rapide

1

Clone the Repository

Clonez le dépôt du boilerplate et placez-vous dans le répertoire du projet :
git clone https://github.com/dodopayments/expo-boilerplate.git
cd expo-boilerplate
2

Get Your API Credentials

Obtenez vos identifiants depuis le tableau de bord Dodo Payments en mode Test :
  • Clé API : Allez à Développeur → Clés API dans votre tableau de bord
Commencez en mode Test pour pouvoir tester votre intégration en toute sécurité sans traiter de paiements réels.
3

Configure Environment Variables

Créez un fichier .env à la racine du projet :
touch .env
Ajoutez vos identifiants Dodo Payments :
.env
EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here
Ne validez jamais votre fichier .env dans le contrôle de version. Il est déjà inclus dans .gitignore.
4

Install Dependencies

Installez les paquets npm requis :
npm install
5

Start the Development Server

Démarrez le serveur de développement Expo :
npx expo start
Scannez le code QR avec l’application Expo Go sur votre appareil, ou appuyez sur i pour le simulateur iOS ou a pour l’émulateur Android.
Vous êtes prêt·e à commencer le développement ! Le boilerplate inclut des écrans et composants d’exemple pour vous aider à comprendre l’intégration.

​
Ce Qui Est Inclus

Le boilerplate est livré avec les éléments essentiels préconfigurés :

Checkout Integration

Exemple d’implémentation pour créer et gérer des sessions de checkout

Payment Handling

Flux de paiement complet avec gestion des succès et des erreurs

TypeScript Support

Configuration TypeScript complète avec définitions de types appropriées

Expo Router

Configuration de la navigation avec Expo Router pour un routage fluide

​
Structure du Projet

expo-boilerplate/
├── app/
│   ├── (tabs)/
│   │   └── index.tsx          # Home screen with examples
│   └── checkout.tsx           # Checkout screen
├── components/
│   └── PaymentButton.tsx      # Payment button component
├── lib/
│   └── dodo.ts                # Dodo Payments client setup
├── .env.example               # Environment variables template
└── package.json

​
Prochaines Étapes

Une fois que vous avez le boilerplate en cours d’exécution :
1

Create Your Products

Ajoutez des produits dans votre tableau de bord Dodo Payments pour activer la fonctionnalité de checkout.
2

Customize the Integration

Adaptez le code d’exemple pour répondre aux besoins et au design de votre application.
3

Test on Real Devices

Testez le flux de paiement sur des appareils physiques afin de vous assurer que tout fonctionne correctement.
4

Go Live

Lorsque vous serez prêt·e, passez aux clés API en mode Live et compilez votre application pour la production.

​
Construction pour la Production

1

Install EAS CLI

npm install -g eas-cli
2

Configure EAS

eas build:configure
3

Build Your App

Pour iOS :
eas build --platform ios
Pour Android :
eas build --platform android

​
Ressources Supplémentaires

Mobile Integration Guide

Guide détaillé pour implémenter des paiements dans les applications mobiles

React Native Integration

Documentation d’intégration spécifique à React Native

Integration Guide

Guide détaillé pour mettre en œuvre des paiements ponctuels

API Reference

Explorez la documentation complète de l’API Dodo Payments

​
Support

Besoin d’aide avec le boilerplate ?