Skip to main content

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 in server/, 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.
Erstelle den Build im Testmodus. Dabei werden Zahlungen simuliert, ohne echtes Geld zu bewegen.
3

Configure Environment Variables

Die App und der Server lesen jeweils ihre eigene Datei .env. Kopiere beide Beispieldateien:
Füge deinen API-Schlüssel in server/.env ein. DODOPAYMENTS_RETURN_URL muss den scheme aus app.json verwenden, der im Boilerplate dodoexpo lautet:
server/.env
Setze in der Datei .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_.
Übertrage deine Dateien .env niemals in die Versionsverwaltung. Die Datei .gitignore im Stammverzeichnis schließt .env bereits aus.Lege einen Dodo-Payments-API-Schlüssel niemals in einer EXPO_PUBLIC_*-Variable ab. Expo bettet diese Variablen in das JavaScript-Bundle ein, sodass jeder, der deine App herunterlädt, sie lesen kann. Bewahre den Schlüssel auf deinem Server auf, wie es das Boilerplate tut, und übergib der App nur das daraus resultierende checkout_url. Siehe Mobile Integration.
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:
Zuletzt geändert am 26. September 2026