GitHub Repository
Das Expo-, React-Native- und Dodo-Payments-Boilerplate.
Übersicht
Das Expo-Boilerplate ist eine funktionsfähige Expo-App, die einen Abonnementtarif über den gehosteten Checkout von Dodo Payments verkauft. Es besteht aus zwei Teilen: einer Expo-Router-App in TypeScript und einem kleinen Express-Server inserver/, der mit deinem API-Schlüssel Checkout-Sitzungen erstellt. Die App fordert beim Server eine Checkout-URL an, öffnet sie mit expo-web-browser im Systembrowser und empfängt das Ergebnis über einen Deep Link.
Das Boilerplate verwendet Expo SDK 54, Expo Router und TypeScript. Der API-Schlüssel bleibt auf dem Server. Die App kennt nur die URL des Servers.
Voraussetzungen
- Node.js 18 oder höher.
- Expo CLI oder EAS CLI.
- Ein Dodo-Payments-Konto mit einem Produkt. Erstelle das Produkt unter Products im Dashboard.
- Ein iOS Simulator, ein Android Emulator oder ein physisches Gerät.
Schnellstart
1
Clone the Repository
Klone das Boilerplate-Repository und wechsle in das Projektverzeichnis:
2
Get Your API Credentials
Rufe deinen API-Schlüssel im Dodo-Payments-Dashboard im Testmodus ab:
- API Key: Gehe im Dashboard zu Developer → API Keys.
3
Configure Environment Variables
Die App und der Server lesen jeweils ihre eigene Datei Füge deinen API-Schlüssel in Setze in der Datei
.env. Kopiere beide Beispieldateien:server/.env ein. DODOPAYMENTS_RETURN_URL muss den scheme aus app.json verwenden, der im Boilerplate dodoexpo lautet:server/.env
.env im Stammverzeichnis EXPO_PUBLIC_BACKEND_URL auf die URL des Servers, zum Beispiel http://localhost:3000. Die App sendet Checkout-Anfragen an EXPO_PUBLIC_BACKEND_URL/checkout.Öffne anschließend server/server.js und ersetze your-product-id durch die ID deines Produkts. Produkt-IDs beginnen mit pdt_.4
Install Dependencies
Installiere die Pakete für die App und den Server:
5
Start the Development Server
Starte das Backend in einem Terminal und anschließend Expo in einem zweiten Terminal:Drücke
i für den iOS Simulator oder a für den Android Emulator, oder scanne den QR-Code auf deinem Gerät. Das Projekt enthält expo-dev-client, und der dodoexpo://-Rücklink benötigt das eigene Schema deiner App. Führe die App daher in einem Development Build (npx expo run:ios oder npx expo run:android) statt in Expo Go aus.Ein physisches Gerät kann localhost auf deinem Computer nicht erreichen. Um auf einem Gerät zu testen, setze EXPO_PUBLIC_BACKEND_URL auf die lokale Netzwerkadresse deines Computers, zum Beispiel http://192.168.1.10:3000.Der Startbildschirm zeigt eine Tarifkarte mit einer Checkout-Schaltfläche. Tippe darauf, um den Checkout zu öffnen, bezahle mit der Testkarte
4242 4242 4242 4242, und die App öffnet ihren Bildschirm mit dem Zahlungsergebnis.Enthaltene Komponenten
Das Boilerplate enthält:Checkout Integration
Einen Demo-Server, der Checkout-Sitzungen erstellt, sowie einen App-Service, der sie anfordert und öffnet.
Payment Handling
Einen Ergebnisbildschirm, der
status aus dem dodoexpo://payment/result-Deep-Link liest und Erfolg oder Fehler anzeigt.TypeScript Support
Eine TypeScript-Konfiguration mit Typen für Checkout-Anfrage und -Antwort.
Expo Router
Dateibasierte Navigation mit Expo Router, einschließlich eines Tab-Layouts und der Route für das Zahlungsergebnis.
Projektstruktur
Dies sind die wichtigsten Dateien im Repository:Nächste Schritte
Nachdem das Boilerplate läuft:1
Create Your Products
Füge Produkte in deinem Dodo-Payments-Dashboard hinzu und verwende ihre IDs in
server/server.js.2
Customize the Integration
Ändere den Tariftext in
config/product.ts sowie den App-Namen, scheme und die Bundle-Identifier in app.json. Wenn du scheme änderst, aktualisiere DODOPAYMENTS_RETURN_URL entsprechend.3
Test on Real Devices
Teste den Zahlungsablauf und die Rückkehr über den Deep Link auf physischen iOS- und Android-Geräten.
4
Go Live
Ersetze den Demo-Server durch dein eigenes Backend, das Benutzer authentifiziert und über Webhooks Zugriff gewährt. Wechsle anschließend zu einem API-Schlüssel für den Live-Modus und erstelle deine App für die Produktion.
Für die Produktion erstellen
Erstelle mit EAS Build storefertige Binärdateien:1
Install EAS CLI
2
Configure EAS
Das Repository enthält keine
eas.json. Dieser Befehl erstellt eine solche Datei:3
Build Your App
Für iOS:Für Android:
Zusätzliche Ressourcen
Mobile Integration Guide
Die Mobile-Checkout-SDKs, die Einrichtung von Deep Links und die Einstellungen für den Mobile Checkout.
Integration Guide
Checkout-Sitzungen, Payment Links und Webhooks.
API Reference
Jeden Dodo-Payments-API-Endpunkt.
Support
Wenn du Hilfe zum Boilerplate benötigst:- Stelle Fragen in der Discord-Community.
- Melde Probleme im GitHub-Repository.
- Schreibe dem Support-Team.