React Native

Dies ist das offizielle Dodo Payments React Native Checkout SDK, @dodopayments/react-native-checkout. Es öffnet den gehosteten Checkout von Dodo in einer nativen Browseransicht und gibt ein typisiertes Ergebnis zurück. Hinweis: Es gibt ein älteres, nicht verwandtes Paket namens dodopayments-react-native-sdk (unscoped) mit einer vollständig anderen API. Diese Seite dokumentiert ausschließlich das aktuelle offizielle Scoped-Paket.

Checkout Sessions API

Erstelle die checkout_url, die dieses SDK öffnet, in deinem Backend.

Mobile Integration Guide

Erfahre, wie dies in den vollständigen mobilen Zahlungsablauf passt.

Das React Native SDK ist ein schlanker Turbo-Module-Wrapper über denselben nativen Swift- und Kotlin-Kern. Es öffnet SFSafariViewController auf iOS und einen Chrome Custom Tab auf Android, enthält keinen API-Schlüssel und ruft die Dodo API niemals direkt auf. Die gesamte Checkout-Logik läuft im Browser; das SDK verwaltet lediglich den Lebenszyklus der Ansicht und erfasst die Return-URL.

Dieses SDK erfordert ausschließlich New Architecture, React Native 0.76+, iOS 16+ und Android minSdk 24.

Installation

Install the Package

Android
iOS
Expo

Das Paket wird automatisch verknüpft und ruft com.dodopayments.api:checkout-android aus Maven ab.

npm i @dodopayments/react-native-checkout

Keine zusätzliche Einrichtung erforderlich; die native Abhängigkeit wird automatisch aufgelöst.

npm i @dodopayments/react-native-checkout
cd ios && pod install

Der Swift-Kern ist im Paket enthalten und wird über CocoaPods installiert.

Nur für Development Builds (nicht Expo Go).

npm i @dodopayments/react-native-checkout
npx expo install expo-build-properties

Konfiguriere anschließend dein app.json (siehe unten unter „Callback-URL-Schema registrieren“).

Deine App muss ein URL-Schema registrieren, um die Return-URL vom Checkout zu empfangen.

Android (Gradle)
iOS (Info.plist)
Expo (both platforms)

In android/app/build.gradle:

android/app/build.gradle

android {
    defaultConfig {
        manifestPlaceholders["dodoCallbackScheme"] = "myapp"
    }
}

Ersetze "myapp" durch das Schema deiner App.

In ios/YourApp/Info.plist:

Info.plist

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLName</key>
    <string>myapp</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myapp</string>
    </array>
  </dict>
</array>

Du kannst dies auch über die Benutzeroberfläche Info → URL Types von Xcode hinzufügen.

In app.json:

app.json

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "manifestPlaceholders": {
              "dodoCallbackScheme": "myapp"
            }
          }
        }
      ]
    ],
    "ios": {
      "infoPlist": {
        "CFBundleURLTypes": [
          {
            "CFBundleURLSchemes": ["myapp"]
          }
        ]
      }
    }
  }
}

Das Paket enthält außerdem ein @dodopayments/react-native-checkout Expo-Konfigurations- Plugin, das derzeit weder ein URL-Schema noch einen Manifest-Platzhalter schreibt. Durch das alleinige Hinzufügen wird dein Callback-Schema nicht registriert — verwende die expo-build-properties- und infoPlist-Konfiguration oben.

Erstelle das native Projekt nach der Bearbeitung von app.json neu:

npx expo prebuild --clean

Dies funktioniert nur mit Development Builds, nicht mit Expo Go.

Verwendung

import { Linking } from 'react-native';
import { DodoCheckout } from '@dodopayments/react-native-checkout';

// Required for iOS's return-URL handling.
Linking.addEventListener('url', ({ url }) => DodoCheckout.handleOpenURL(url));

const result = await DodoCheckout.start({
  checkoutUrl,                          // from your backend's checkout session
  returnUrl: 'myapp://checkout/return', // scheme must be registered (see Installation)
  onEvent: (e) => console.log(e.type),  // logging only
});

switch (result.status) {
  case 'succeeded': showSuccess(result.paymentId); break;
  case 'failed':    showFailure(); break;
  case 'cancelled': dismiss(); break;
  case 'pending':   showPending(); break;
  case 'expired':   showExpired(); break;
}

Return-URL weiterleiten

Der Linking-Listener ist für die Verarbeitung der Return-URL unter iOS erforderlich. Unter Android ist handleOpenURL ein No-op, das false auflöst, da der Android-Kern seine Weiterleitung nativ verarbeitet. Es ist sicher, den Listener auf beiden Plattformen bedingungslos zu registrieren.

import { Linking } from 'react-native';
import { DodoCheckout } from '@dodopayments/react-native-checkout';

Linking.addEventListener('url', ({ url }) => {
  DodoCheckout.handleOpenURL(url);
});

Bedeutung des Ergebnisses

result.status ist ein UI-Hinweis, kein Zahlungsnachweis. Bestätige jede Zahlung in deinem Backend über den payment.succeeded / subscription.active Webhook.

CheckoutStatus

erforderlich

Einer von succeeded, failed, cancelled, pending, expired.

string

Wird gesetzt, wenn die Return-URL einen solchen Wert enthielt. Zeige ihn in der UI an, verwende ihn jedoch nicht, um Zugriff zu gewähren. Siehe unten unter „Zahlung überprüfen“.

string

Wird für Subscription-Checkouts gesetzt.

string[]

Wird gesetzt, wenn der Checkout Produkte mit Lizenzschlüsseln enthält.

string

Wird gesetzt, wenn der Checkout eine E-Mail-Adresse erfasst.

Record<string, string>

Jeder Query-Parameter aus der Return-URL, unverändert.

Zahlung überprüfen

Webhooks

Dodo Payments ruft dein Backend auf, wenn eine Zahlung erfolgreich ist oder ein Subscription aktiviert wird.

Get Payment Detail

Rufe paymentId mit deinem Secret Key ab, um den Status direkt zu überprüfen.

Gewähre Zugriff erst, nachdem einer dieser Mechanismen die Zahlung bestätigt hat, niemals allein aufgrund von result.status.

Fehler

start wird nur bei Fehlbedienung oder einem Plattformfehler mit einem CheckoutError abgelehnt. Eine stornierte oder abgelehnte Zahlung ist immer ein Ergebnis, niemals eine Exception.

INVALID_CHECKOUT_URL: keine checkout.dodopayments.com-Session-URL.
INVALID_RETURN_URL: keine gültige absolute URL.
ALREADY_IN_PROGRESS: Ein Checkout läuft bereits.
PLATFORM_ERROR: unerwarteter Plattformfehler.

Abgebrochene Sessions

Wenn die App oder das JS-Bundle während des Checkouts beendet wird, geht das Promise verloren, aber die native Ebene behält die Session bei. Stelle sie beim nächsten Mount wieder her und gleiche sie mit deinem Backend ab.

import { DodoCheckout } from '@dodopayments/react-native-checkout';

const abandoned = await DodoCheckout.getAbandonedSession();
if (abandoned) {
  // reconcile abandoned.sessionId with your backend, then:
  await DodoCheckout.clearAbandonedSession();
}

Mobile Integration Guide

Derselbe Vertrag für Android, iOS und Flutter.

Expo Boilerplate

Ein vollständiges Expo-Beispiel mit Checkout-Integration.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Checkout Sessions API

Mobile Integration Guide

Installation

Verwendung

Return-URL weiterleiten

Bedeutung des Ergebnisses

Zahlung überprüfen

Webhooks

Get Payment Detail

Fehler

Abgebrochene Sessions

Verwandte Inhalte

Mobile Integration Guide

Expo Boilerplate

Checkout Sessions API

Mobile Integration Guide

​Installation

​Verwendung

​Return-URL weiterleiten

​Bedeutung des Ergebnisses

​Zahlung überprüfen

Webhooks

Get Payment Detail

​Fehler

​Abgebrochene Sessions

​Verwandte Inhalte

Mobile Integration Guide

Expo Boilerplate

Installation

Verwendung

Return-URL weiterleiten

Bedeutung des Ergebnisses

Zahlung überprüfen

Fehler

Abgebrochene Sessions

Verwandte Inhalte