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 nutzt 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

Clone the Repository

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

Get Your API Credentials

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

Configure Environment Variables

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
Committen Sie Ihre .env Datei niemals in die Versionskontrolle. Sie ist bereits in .gitignore enthalten.
4

Install Dependencies

Installieren Sie die erforderlichen npm-Pakete:
npm install
5

Start the Development Server

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 können mit der Entwicklung beginnen! Das Boilerplate enthält Beispielbildschirme und -komponenten, die Ihnen helfen, die Integration zu verstehen.

​
Was ist enthalten

Das Boilerplate kommt mit vorab konfigurierten Essentials:

Checkout Integration

Beispielimplementierung zum Erstellen und Verwalten von Checkout-Sitzungen

Payment Handling

Vollständiger Zahlungsablauf mit Erfolgs- und Fehlerbehandlung

TypeScript Support

Vollständige TypeScript-Konfiguration mit korrekten 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

Create Your Products

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

Customize the Integration

Passen Sie den Beispielcode an die Anforderungen und das Design Ihrer Anwendung an.
3

Test on Real Devices

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

Go Live

Wenn Sie bereit sind, wechseln Sie zu den Live-Mode-API-Schlüsseln und bauen Sie Ihre App für den Produktionsbetrieb.

​
Produktion erstellen

1

Install EAS CLI

npm install -g eas-cli
2

Configure EAS

eas build:configure
3

Build Your App

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

​
Zusätzliche Ressourcen

Mobile Integration Guide

Detaillierte Anleitung zur Implementierung von Zahlungen in mobilen Apps

React Native Integration

React Native-spezifische Integrationsdokumentation

Integration Guide

Detaillierte Anleitung zur Implementierung von Einmalzahlungen

API Reference

Entdecken Sie die vollständige Dodo Payments API-Dokumentation

​
Unterstützung

Brauchen Sie Hilfe mit dem Boilerplate?