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

> Öppna Dodo Payments' hosted checkout från en React Native-app i en systemwebbläsarflik och få tillbaka ett typat resultat i ett enda anrop.

<Info>
  Detta är det officiella Dodo Payments React Native checkout-SDK:t, `@dodopayments/react-native-checkout`. Det öppnar Dodo's hosted checkout i en inbyggd webbläsarvy och returnerar ett typat resultat. Obs! Det finns ett äldre, orelaterat paket med namnet `dodopayments-react-native-sdk` (utan scope) med ett helt annat API. Den här sidan dokumenterar endast det aktuella officiella paketet med scope.
</Info>

<CardGroup cols={2}>
  <Card title="Checkout Sessions API" icon="cart-shopping" href="/developer-resources/checkout-session">
    Skapa checkout\_url som detta SDK öppnar från din backend.
  </Card>

  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    Se hur detta passar in i det fullständiga mobila betalningsflödet.
  </Card>
</CardGroup>

React Native SDK är ett tunt Turbo Module-omslag runt samma inbyggda Swift- och Kotlin-kärnor. Det öppnar `SFSafariViewController` på iOS och en Chrome Custom Tab på Android, innehåller ingen API-nyckel och anropar aldrig Dodo API direkt. All checkout-logik körs i webbläsaren; SDK:t hanterar bara vyernas livscykel och fångar upp retur-URL:en.

<Warning>
  Detta SDK kräver **endast New Architecture**, React Native 0.76+, iOS 16+ och Android `minSdk` 24.
</Warning>

## Installation

<Steps>
  <Step title="Install the Package">
    <Tabs>
      <Tab title="Android">
        Paketet länkas automatiskt och hämtar `com.dodopayments.api:checkout-android` från Maven.

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

        Ingen ytterligare konfiguration krävs; den inbyggda beroendet löses automatiskt.
      </Tab>

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

        Swift-kärnan ingår i paketet och installeras via CocoaPods.
      </Tab>

      <Tab title="Expo">
        Endast för utvecklingsbyggen (inte Expo Go).

        ```sh theme={null}
        npm i @dodopayments/react-native-checkout
        npx expo install expo-build-properties
        ```

        Konfigurera sedan din `app.json` (se Registrera ett callback-URL-schema nedan).
      </Tab>
    </Tabs>
  </Step>

  <Step title="Register a Callback URL Scheme">
    Din app måste registrera ett URL-schema för att ta emot retur-URL:en från checkout.

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

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

        Ersätt `"myapp"` med din apps schema.
      </Tab>

      <Tab title="iOS (Info.plist)">
        I `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 kan också lägga till detta via Xcodes gränssnitt **Info → URL Types**.
      </Tab>

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

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

        <Warning>
          Paketet innehåller även ett `@dodopayments/react-native-checkout` Expo-konfigurationsplugin,
          men det skriver för närvarande inte något URL-schema eller någon manifest-placeholder.
          Att bara lägga till det registrerar **inte** ditt callback-schema — använd
          `expo-build-properties` och `infoPlist`-konfigurationen ovan.
        </Warning>

        <Note>
          Bygg om det inbyggda projektet efter att du har redigerat `app.json`:

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

          Detta fungerar endast med utvecklingsbyggen, inte Expo Go.
        </Note>
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Användning

```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;
}
```

## Vidarebefordra retur-URL:en

Lyssnaren `Linking` krävs för iOS-hantering av retur-URL:er. På Android är `handleOpenURL` en no-op som löser `false`, eftersom Android-kärnan hanterar omdirigeringen inbyggt. Det är säkert att registrera lyssnaren ovillkorligen på båda plattformarna.

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

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

## Vad resultatet betyder

<Warning>
  `result.status` är en UI-ledtråd, inte ett bevis på betalning. Bekräfta varje betalning från din backend via webhooken `payment.succeeded` / `subscription.active`.
</Warning>

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

<ParamField body="paymentId" type="string">
  Anges när retur-URL:en innehöll en sådan. Visa den i UI:t, men använd den inte för att bevilja åtkomst. Se Verifiera betalningen nedan.
</ParamField>

<ParamField body="subscriptionId" type="string">
  Anges för subscription-checkouts.
</ParamField>

<ParamField body="licenseKeys" type="string[]">
  Anges när checkout innehåller produkter med license keys.
</ParamField>

<ParamField body="customerEmail" type="string">
  Anges när checkout samlar in en e-postadress.
</ParamField>

<ParamField body="raw" type="Record<string, string>">
  Varje query-parameter från retur-URL:en, ordagrant.
</ParamField>

## Verifiera betalningen

<CardGroup cols={2}>
  <Card title="Webhooks" icon="webhook" href="/developer-resources/webhooks">
    Dodo Payments anropar din backend när en betalning lyckas eller en subscription aktiveras.
  </Card>

  <Card title="Get Payment Detail" icon="magnifying-glass" href="/api-reference/payments/get-payments-1">
    Slå upp `paymentId` med din secret key för att kontrollera dess status direkt.
  </Card>
</CardGroup>

Bevilja åtkomst först när någon av dessa bekräftar betalningen, aldrig enbart från `result.status`.

## Fel

`start` avvisar med ett `CheckoutError` endast vid felaktig användning eller ett plattformsfel. En avbruten eller nekad betalning är alltid ett resultat, aldrig ett undantag.

* `INVALID_CHECKOUT_URL`: inte en session-URL för `checkout.dodopayments.com`.
* `INVALID_RETURN_URL`: inte en giltig absolut URL.
* `ALREADY_IN_PROGRESS`: en checkout körs redan.
* `PLATFORM_ERROR`: oväntat plattformsfel.

## Övergivna sessioner

Om appen eller JS-bundlen avslutas mitt under checkout går promiset förlorat, men det inbyggda lagret behåller sessionen. Återställ den vid nästa mount och stäm av den mot din backend.

```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();
}
```

## Relaterat

<CardGroup cols={2}>
  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    Samma kontrakt för Android, iOS och Flutter.
  </Card>

  <Card title="Expo Boilerplate" icon="layer-group" href="/developer-resources/expo-boilerplate">
    Ett komplett Expo-exempel med checkout-integration.
  </Card>
</CardGroup>