Passer au contenu principal

Dépôt GitHub

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 implémentations d’exemple pour les sessions de caisse 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

Cloner le Dépôt

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

Obtenez Vos Identifiants API

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 par le Mode Test pour tester votre intégration en toute sécurité sans traiter de paiements réels.
3

Configurer les Variables d'Environnement

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

Installer les Dépendances

Installez les paquets npm requis :
npm install
5

Démarrer le Serveur de Développement

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 à commencer à construire ! Le boilerplate inclut des écrans et des 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 :

Intégration de la Caisse

Implémentation d’exemple pour créer et gérer des sessions de caisse

Traitement des Paiements

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

Support TypeScript

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

Routeur Expo

Configuration de la navigation avec le Routeur Expo 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

Créez Vos Produits

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

Personnalisez l'Intégration

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

Testez sur des Appareils Réels

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

Mettez en Ligne

Lorsque vous êtes prêt, passez aux clés API en Mode Live et construisez votre application pour la production.

​
Construction pour la Production

1

Installer EAS CLI

npm install -g eas-cli
2

Configurer EAS

eas build:configure
3

Construisez Votre Application

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

​
Ressources Supplémentaires

Guide d'Intégration Mobile

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

Intégration React Native

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

Guide d'Intégration

Guide détaillé pour implémenter des paiements uniques

Référence API

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

​
Support

Besoin d’aide avec le boilerplate ?