React Native

Ini adalah checkout SDK React Native resmi dari Dodo Payments, @dodopayments/react-native-checkout. SDK ini membuka hosted checkout Dodo di tampilan browser native dan mengembalikan hasil bertipe. Catatan: terdapat package lama yang tidak terkait bernama dodopayments-react-native-sdk (unscoped) dengan API yang sepenuhnya berbeda. Halaman ini hanya mendokumentasikan package scoped resmi yang saat ini digunakan.

Checkout Sessions API

Buat checkout_url yang dibuka SDK ini, dari backend Anda.

Mobile Integration Guide

Lihat bagaimana hal ini menjadi bagian dari alur pembayaran mobile secara keseluruhan.

React Native SDK ini adalah wrapper Turbo Module tipis di atas core Swift dan Kotlin native yang sama. SDK ini membuka SFSafariViewController di iOS dan Chrome Custom Tab di Android, tidak menyimpan API key, serta tidak pernah memanggil Dodo API secara langsung. Semua logika checkout berjalan di browser; SDK hanya mengelola siklus hidup tampilan dan menangkap return URL.

SDK ini hanya memerlukan New Architecture, React Native 0.76+, iOS 16+, dan Android minSdk 24.

Instalasi

Install the Package

Android
iOS
Expo

Package ini ditautkan secara otomatis dan menarik com.dodopayments.api:checkout-android dari Maven.

npm i @dodopayments/react-native-checkout

Tidak diperlukan konfigurasi tambahan; dependency native diselesaikan secara otomatis.

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

Core Swift disertakan dalam package dan diinstal melalui CocoaPods.

Hanya untuk development build (bukan Expo Go).

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

Selanjutnya, konfigurasikan app.json Anda (lihat Daftarkan Callback URL Scheme di bawah).

Aplikasi Anda harus mendaftarkan URL scheme untuk menerima return URL dari checkout.

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

Di android/app/build.gradle:

android/app/build.gradle

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

Ganti "myapp" dengan scheme aplikasi Anda.

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

Anda juga dapat menambahkannya melalui UI Info → URL Types di Xcode.

Di app.json:

app.json

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

Package ini juga menyertakan plugin konfigurasi Expo @dodopayments/react-native-checkout, namun saat ini plugin tersebut tidak menulis URL scheme maupun manifest placeholder. Menambahkannya saja tidak akan mendaftarkan callback scheme Anda — gunakan konfigurasi expo-build-properties dan infoPlist di atas.

Bangun ulang project native setelah mengedit app.json:

npx expo prebuild --clean

Ini hanya berfungsi dengan development build, bukan Expo Go.

Penggunaan

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

Meneruskan Return URL

Listener Linking diperlukan untuk penanganan return URL di iOS. Di Android, handleOpenURL tidak melakukan apa pun dan menyelesaikan false karena core Android menangani redirect-nya secara native. Listener ini aman untuk didaftarkan tanpa syarat di kedua platform.

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

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

Arti Hasil

result.status adalah petunjuk UI, bukan bukti pembayaran. Konfirmasikan setiap pembayaran dari backend Anda melalui webhook payment.succeeded / subscription.active.

CheckoutStatus

wajib

Salah satu dari succeeded, failed, cancelled, pending, expired.

string

Diatur ketika return URL menyertakan salah satunya. Tampilkan di UI, tetapi jangan gunakan untuk memberikan akses. Lihat Verifikasi Pembayaran di bawah.

string

Diatur untuk subscription checkout.

string[]

Diatur ketika checkout menyertakan produk license key.

string

Diatur ketika checkout mengambil email.

Record<string, string>

Setiap query parameter dari return URL, secara verbatim.

Verifikasi Pembayaran

Webhooks

Dodo Payments memanggil backend Anda ketika pembayaran berhasil atau subscription diaktifkan.

Get Payment Detail

Cari paymentId menggunakan secret key Anda untuk memeriksa statusnya secara langsung.

Berikan akses setelah salah satu metode ini mengonfirmasi pembayaran, jangan pernah hanya berdasarkan result.status.

Error

start menolak dengan CheckoutError hanya jika terjadi penyalahgunaan atau kegagalan platform. Pembayaran yang dibatalkan atau ditolak selalu berupa hasil, bukan exception.

INVALID_CHECKOUT_URL: bukan session URL checkout.dodopayments.com.
INVALID_RETURN_URL: bukan absolute URL yang valid.
ALREADY_IN_PROGRESS: checkout sedang berjalan.
PLATFORM_ERROR: kegagalan platform yang tidak terduga.

Session yang Ditinggalkan

Jika aplikasi atau JS bundle dihentikan di tengah checkout, promise akan hilang tetapi layer native tetap mempertahankan session. Pulihkan pada mount berikutnya dan rekonsiliasikan dengan backend Anda.

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

Instalasi

Penggunaan

Meneruskan Return URL

Arti Hasil

Verifikasi Pembayaran

Webhooks

Get Payment Detail

Error

Session yang Ditinggalkan

Terkait

Mobile Integration Guide

Expo Boilerplate

Checkout Sessions API

Mobile Integration Guide

​Instalasi

​Penggunaan

​Meneruskan Return URL

​Arti Hasil

​Verifikasi Pembayaran

Webhooks

Get Payment Detail

​Error

​Session yang Ditinggalkan

​Terkait

Mobile Integration Guide

Expo Boilerplate

Instalasi

Penggunaan

Meneruskan Return URL

Arti Hasil

Verifikasi Pembayaran

Error

Session yang Ditinggalkan

Terkait