> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native

> Öffne den gehosteten Checkout von Dodo Payments aus einer React-Native-App in einem Systembrowser-Tab und erhalte das typisierte Ergebnis mit einem Aufruf zurück.

<Info>
  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.
</Info>

<CardGroup cols={2}>
  <Card title="Checkout Sessions API" icon="cart-shopping" href="/developer-resources/checkout-session">
    Erstelle die checkout\_url, die dieses SDK öffnet, in deinem Backend.
  </Card>

  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    Erfahre, wie dies in den vollständigen mobilen Zahlungsablauf passt.
  </Card>
</CardGroup>

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.

<Warning>
  Dieses SDK erfordert ausschließlich **New Architecture**, React Native 0.76+, iOS 16+ und Android `minSdk` 24.
</Warning>

## Installation

<Steps>
  <Step title="Install the Package">
    <Tabs>
      <Tab title="Android">
        Das Paket wird automatisch verknüpft und ruft `com.dodopayments.api:checkout-android` aus Maven ab.

        ```sh theme={null}
        npm i @dodopayments/react-native-checkout
        ```

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

      <Tab title="iOS">
        ```sh theme={null}
        npm i @dodopayments/react-native-checkout
        cd ios && pod install
        ```

        Der Swift-Kern ist im Paket enthalten und wird über CocoaPods installiert.
      </Tab>

      <Tab title="Expo">
        Nur für Development Builds (nicht Expo Go).

        ```sh theme={null}
        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“).
      </Tab>
    </Tabs>
  </Step>

  <Step title="Register a Callback URL Scheme">
    Deine App muss ein URL-Schema registrieren, um die Return-URL vom Checkout zu empfangen.

    <Tabs>
      <Tab title="Android (Gradle)">
        In `android/app/build.gradle`:

        ```kotlin android/app/build.gradle theme={null}
        android {
            defaultConfig {
                manifestPlaceholders["dodoCallbackScheme"] = "myapp"
            }
        }
        ```

        Ersetze `"myapp"` durch das Schema deiner App.
      </Tab>

      <Tab title="iOS (Info.plist)">
        In `ios/YourApp/Info.plist`:

        ```xml Info.plist theme={null}
        <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.
      </Tab>

      <Tab title="Expo (both platforms)">
        In `app.json`:

        ```json app.json theme={null}
        {
          "expo": {
            "plugins": [
              [
                "expo-build-properties",
                {
                  "android": {
                    "manifestPlaceholders": {
                      "dodoCallbackScheme": "myapp"
                    }
                  }
                }
              ]
            ],
            "ios": {
              "infoPlist": {
                "CFBundleURLTypes": [
                  {
                    "CFBundleURLSchemes": ["myapp"]
                  }
                ]
              }
            }
          }
        }
        ```

        <Warning>
          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.
        </Warning>

        <Note>
          Erstelle das native Projekt nach der Bearbeitung von `app.json` neu:

          ```sh theme={null}
          npx expo prebuild --clean
          ```

          Dies funktioniert nur mit Development Builds, nicht mit Expo Go.
        </Note>
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Verwendung

```typescript theme={null}
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.

```typescript theme={null}
import { Linking } from 'react-native';
import { DodoCheckout } from '@dodopayments/react-native-checkout';

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

## Bedeutung des Ergebnisses

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

<ParamField body="status" type="CheckoutStatus" required>
  Einer von `succeeded`, `failed`, `cancelled`, `pending`, `expired`.
</ParamField>

<ParamField body="paymentId" type="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“.
</ParamField>

<ParamField body="subscriptionId" type="string">
  Wird für Subscription-Checkouts gesetzt.
</ParamField>

<ParamField body="licenseKeys" type="string[]">
  Wird gesetzt, wenn der Checkout Produkte mit Lizenzschlüsseln enthält.
</ParamField>

<ParamField body="customerEmail" type="string">
  Wird gesetzt, wenn der Checkout eine E-Mail-Adresse erfasst.
</ParamField>

<ParamField body="raw" type="Record<string, string>">
  Jeder Query-Parameter aus der Return-URL, unverändert.
</ParamField>

## Zahlung überprüfen

<CardGroup cols={2}>
  <Card title="Webhooks" icon="webhook" href="/developer-resources/webhooks">
    Dodo Payments ruft dein Backend auf, wenn eine Zahlung erfolgreich ist oder ein Subscription aktiviert wird.
  </Card>

  <Card title="Get Payment Detail" icon="magnifying-glass" href="/api-reference/payments/get-payments-1">
    Rufe `paymentId` mit deinem Secret Key ab, um den Status direkt zu überprüfen.
  </Card>
</CardGroup>

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.

```typescript theme={null}
import { DodoCheckout } from '@dodopayments/react-native-checkout';

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

## Verwandte Inhalte

<CardGroup cols={2}>
  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    Derselbe Vertrag für Android, iOS und Flutter.
  </Card>

  <Card title="Expo Boilerplate" icon="layer-group" href="/developer-resources/expo-boilerplate">
    Ein vollständiges Expo-Beispiel mit Checkout-Integration.
  </Card>
</CardGroup>