Zum Hauptinhalt springen

GitHub-Repository

Vollständiges Expo + React Native + Dodo Payments Boilerplate

​
Übersicht

Ein produktionsbereites Boilerplate zur Integration von Dodo Payments in Expo/React Native-Anwendungen. Diese Vorlage umfasst die Erstellung von Checkout-Sitzungen, die Zahlungsabwicklung und eine ordnungsgemäße TypeScript-Konfiguration, um Ihnen zu helfen, schnell Zahlungen in Ihrer mobilen App zu akzeptieren.
Dieses Boilerplate verwendet das Expo SDK mit TypeScript und enthält Beispielimplementierungen für Checkout-Sitzungen und Zahlungsabwicklung.

​
Voraussetzungen

  • Node.js 18+
  • Expo CLI oder EAS CLI
  • Dodo Payments-Konto (API-Schlüssel aus dem Dashboard)
  • iOS-Simulator oder Android-Emulator (oder physisches Gerät)

​
Schnellstart

1

Repository klonen

Klonen Sie das Boilerplate-Repository und navigieren Sie zum Projektverzeichnis:
git clone https://github.com/dodopayments/expo-boilerplate.git
cd expo-boilerplate
2

API-Anmeldeinformationen abrufen

Holen Sie sich Ihre Anmeldeinformationen aus dem Dodo Payments-Dashboard im Testmodus:
  • API-Schlüssel: Navigieren Sie zu Entwickler → API-Schlüssel in Ihrem Dashboard
Beginnen Sie mit dem Testmodus, um Ihre Integration sicher zu testen, ohne echte Zahlungen zu verarbeiten.
3

Umgebungsvariablen konfigurieren

Erstellen Sie eine .env Datei im Stammverzeichnis:
touch .env
Fügen Sie Ihre Dodo Payments-Anmeldeinformationen hinzu:
.env
EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here
Verpflichten Sie niemals Ihre .env Datei zur Versionskontrolle. Sie ist bereits in .gitignore enthalten.
4

Abhängigkeiten installieren

Installieren Sie die erforderlichen npm-Pakete:
npm install
5

Entwicklungsserver starten

Starten Sie den Expo-Entwicklungsserver:
npx expo start
Scannen Sie den QR-Code mit der Expo Go-App auf Ihrem Gerät oder drücken Sie i für den iOS-Simulator oder a für den Android-Emulator.
Sie sind bereit, mit dem Bauen zu beginnen! Das Boilerplate enthält Beispielbildschirme und Komponenten, um Ihnen zu helfen, die Integration zu verstehen.

​
Was ist enthalten

Das Boilerplate kommt mit vorab konfigurierten Essentials:

Checkout-Integration

Beispielimplementierung zur Erstellung und Handhabung von Checkout-Sitzungen

Zahlungsabwicklung

Vollständiger Zahlungsfluss mit Erfolgs- und Fehlerbehandlung

TypeScript-Unterstützung

Vollständige TypeScript-Konfiguration mit ordnungsgemäßen Typdefinitionen

Expo Router

Navigationseinrichtung mit Expo Router für nahtloses Routing

​
Projektstruktur

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

​
Nächste Schritte

Sobald Sie das Boilerplate ausgeführt haben:
1

Erstellen Sie Ihre Produkte

Fügen Sie Produkte in Ihrem Dodo Payments-Dashboard hinzu, um die Checkout-Funktionalität zu aktivieren.
2

Passen Sie die Integration an

Passen Sie den Beispielcode an die Bedürfnisse und das Design Ihrer Anwendung an.
3

Auf echten Geräten testen

Testen Sie den Zahlungsfluss auf physischen Geräten, um sicherzustellen, dass alles korrekt funktioniert.
4

Live gehen

Wenn Sie bereit sind, wechseln Sie zu Live-Modus-API-Schlüsseln und erstellen Sie Ihre App für die Produktion.

​
Produktion erstellen

1

EAS CLI installieren

npm install -g eas-cli
2

EAS konfigurieren

eas build:configure
3

Ihre App erstellen

Für iOS:
eas build --platform ios
Für Android:
eas build --platform android

​
Zusätzliche Ressourcen

Mobile Integrationsleitfaden

Detaillierter Leitfaden zur Implementierung von Zahlungen in mobilen Apps

React Native Integration

React Native spezifische Integrationsdokumentation

Integrationsleitfaden

Detaillierter Leitfaden zur Implementierung von Einmalzahlungen

API-Referenz

Erforschen Sie die vollständige Dodo Payments API-Dokumentation

​
Unterstützung

Brauchen Sie Hilfe mit dem Boilerplate?