React Native

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.

Checkout Sessions API

Skapa checkout_url som detta SDK öppnar från din backend.

Mobile Integration Guide

Se hur detta passar in i det fullständiga mobila betalningsflödet.

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.

Detta SDK kräver endast New Architecture, React Native 0.76+, iOS 16+ och Android minSdk 24.

Installation

Install the Package

Android
iOS
Expo

Paketet länkas automatiskt och hämtar com.dodopayments.api:checkout-android från Maven.

npm i @dodopayments/react-native-checkout

Ingen ytterligare konfiguration krävs; den inbyggda beroendet löses automatiskt.

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

Swift-kärnan ingår i paketet och installeras via CocoaPods.

Endast för utvecklingsbyggen (inte Expo Go).

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

Konfigurera sedan din app.json (se Registrera ett callback-URL-schema nedan).

Din app måste registrera ett URL-schema för att ta emot retur-URL:en från checkout.

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

I android/app/build.gradle:

android/app/build.gradle

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

Ersätt "myapp" med din apps schema.

I 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 kan också lägga till detta via Xcodes gränssnitt Info → URL Types.

I app.json:

app.json

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

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.

Bygg om det inbyggda projektet efter att du har redigerat app.json:

npx expo prebuild --clean

Detta fungerar endast med utvecklingsbyggen, inte Expo Go.

Användning

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.

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

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

Vad resultatet betyder

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.

CheckoutStatus

obligatorisk

En av succeeded, failed, cancelled, pending, expired.

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.

string

Anges för subscription-checkouts.

string[]

Anges när checkout innehåller produkter med license keys.

string

Anges när checkout samlar in en e-postadress.

Record<string, string>

Varje query-parameter från retur-URL:en, ordagrant.

Verifiera betalningen

Webhooks

Dodo Payments anropar din backend när en betalning lyckas eller en subscription aktiveras.

Get Payment Detail

Slå upp paymentId med din secret key för att kontrollera dess status direkt.

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.

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

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

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Checkout Sessions API

Mobile Integration Guide

Installation

Användning

Vidarebefordra retur-URL:en

Vad resultatet betyder

Verifiera betalningen

Webhooks

Get Payment Detail

Fel

Övergivna sessioner

Relaterat

Mobile Integration Guide

Expo Boilerplate

Checkout Sessions API

Mobile Integration Guide

​Installation

​Användning

​Vidarebefordra retur-URL:en

​Vad resultatet betyder

​Verifiera betalningen

Webhooks

Get Payment Detail

​Fel

​Övergivna sessioner

​Relaterat

Mobile Integration Guide

Expo Boilerplate

Installation

Användning

Vidarebefordra retur-URL:en

Vad resultatet betyder

Verifiera betalningen

Fel

Övergivna sessioner

Relaterat