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

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 Info → URL Types-gränssnitt.

Paketets eget konfigurationsplugin registrerar schemat för båda plattformarna i prebuild. Ge det ett alternativ för scheme i app.json:

app.json

{
  "expo": {
    "scheme": "myapp",
    "plugins": [
      [
        "@dodopayments/react-native-checkout",
        { "scheme": "myappcheckout" }
      ]
    ]
  }
}

scheme måste matcha det du skickar som returnUrl (t.ex. myappcheckout://return), och måste skilja sig från expo.scheme. Expo registrerar redan det senare i MainActivity, och om du återanvänder det kan checkoutens retur dirigeras till fel skärm.Bygg om det inbyggda projektet efter att du redigerat app.json:

npx expo prebuild --clean

Detta fungerar endast med utvecklingsbyggen, inte Expo Go.Om android/app/build.gradle underhålls manuellt och inte har något standardiserat defaultConfig { }-block som pluginet kan hitta, lägger du till platshållaren själv i stället. Se Android-fliken ovan.

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 gränssnittet, men använd den inte för att bevilja åtkomst. Se Verifiera betalningen nedan.

string

Anges för subscription-checkouter.

string[]

Anges när checkouten innehåller produkter med licensnycklar.

string

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

Record<string, string>

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

Verifiera betalningen

Webhooks

Dodo Payments kontaktar din backend när en betalning lyckas eller en prenumeration aktiveras.

Get Payment Detail

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

Bevilja åtkomst efter att en av dessa har bekräftat betalningen, aldrig enbart utifrån result.status.

Anpassning av utseendet

Anpassa checkout-webbläsarens verktygsfält, knappar och färgschema via customization på start(...). Alternativen är grupperade efter plattform eftersom Androids Custom Tab och iOS:s SFSafariViewController exponerar olika inbyggda kontroller. Alla fält är valfria; om customization utelämnas används respektive plattformens standardutseende.

Android — Custom Tab

Bakgrundsfärg för verktygsfältet.

Färg på navigeringsfältet.

Avdelarfärg ovanför navigeringsfältet.

'default' | 'back'

default visar systemets “X”-ikon; back ritar i stället en bakåtpil.

'start' | 'end'

Vilken sida av verktygsfältet som stängningsknappen visas på.

Visar verktygsfältets delningsikon.

boolean

Visar sidans titel under URL:en i verktygsfältet.

boolean

Låter verktygsfältet döljas automatiskt när sidan rullas.

boolean

Visar “Bokmärk den här sidan” i overflow-menyn.

boolean

Visar “Ladda ned sidan” i overflow-menyn.

'system' | 'light' | 'dark'

Tvingar fram ljust eller mörkt utseende oavsett enhetens systeminställning.

iOS — SFSafariViewController

'done' | 'close' | 'cancel'

Etikett eller ikon för avvisningsknappen.

'pageSheet' | 'fullScreen'

pageSheet visas som ett kort som kan svepas bort; fullScreen täcker hela skärmen.

boolean

Låter verktygsfältet fällas ihop vid rullning. Visas endast när presentationStyle är fullScreen — pageSheet håller fälten fixerade oavsett den här inställningen.

'system' | 'light' | 'dark'

Tvingar fram ljust eller mörkt utseende oavsett enhetens systeminställning.

const result = await DodoCheckout.start({
  checkoutUrl,
  returnUrl: 'myapp://checkout/return',
  customization: {
    android: { toolbarColor: '#6366F1', closeButtonStyle: 'back' },
    ios: { presentationStyle: 'fullScreen', colorScheme: 'dark' },
  },
});

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 checkout.dodopayments.com-session-URL.
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-paketet avslutas mitt under checkout försvinner promise-objektet, 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

Anpassning av utseendet

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

​Anpassning av utseendet

​Fel

​Övergivna sessioner

​Relaterat

Mobile Integration Guide

Expo Boilerplate

Installation

Användning

Vidarebefordra retur-URL:en

Vad resultatet betyder

Verifiera betalningen

Anpassning av utseendet

Fel

Övergivna sessioner

Relaterat