React Native

यह आधिकारिक Dodo Payments React Native checkout SDK है, @dodopayments/react-native-checkout। यह Dodo’s hosted checkout को native browser view में खोलता है और typed result लौटाता है। ध्यान दें: dodopayments-react-native-sdk (unscoped) नाम का एक पुराना, असंबंधित package मौजूद है, जिसका API पूरी तरह अलग है। यह पेज केवल वर्तमान आधिकारिक scoped package का documentation है।

Checkout Sessions API

अपने backend से वह checkout_url बनाएँ जिसे यह SDK खोलता है।

Mobile Integration Guide

देखें कि यह पूरे mobile payment flow में कैसे फिट होता है।

React Native SDK उसी native Swift और Kotlin cores के ऊपर एक thin Turbo Module wrapper है। यह iOS पर SFSafariViewController और Android पर Chrome Custom Tab खोलता है, कोई API key नहीं रखता और Dodo API को सीधे कभी call नहीं करता। Checkout का पूरा logic browser में चलता है; SDK केवल view lifecycle को manage करता है और return URL को capture करता है।

इस SDK के लिए केवल New Architecture, React Native 0.76+, iOS 16+ और Android minSdk 24 आवश्यक हैं।

Installation

Install the Package

Android
iOS
Expo

Package autolinked है और Maven से com.dodopayments.api:checkout-android प्राप्त करता है।

npm i @dodopayments/react-native-checkout

किसी अतिरिक्त setup की आवश्यकता नहीं है; native dependency अपने-आप resolve हो जाती है।

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

Swift core package में bundled है और CocoaPods के माध्यम से install होता है।

केवल development builds के लिए (Expo Go के लिए नहीं)।

npm i @dodopayments/react-native-checkout

इसके बाद अपना app.json configure करें (नीचे Register a Callback URL Scheme देखें)।

आपके app को checkout से return URL प्राप्त करने के लिए एक URL scheme register करनी होगी।

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

android/app/build.gradle में:

android/app/build.gradle

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

"myapp" को अपने app की scheme से बदलें।

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>

आप इसे Xcode के Info → URL Types UI के माध्यम से भी जोड़ सकते हैं।

पैकेज का अपना config plugin दोनों platforms के लिए scheme को prebuild पर register करता है। इसे app.json में एक scheme option दें:

app.json

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

scheme का मान आपके द्वारा returnUrl में दिए गए मान से मेल खाना चाहिए (उदाहरण के लिए, myappcheckout://return), और यह expo.scheme से अलग होना चाहिए। Expo पहले से ही इसे MainActivity पर register करता है, और इसका दोबारा उपयोग checkout return को गलत screen पर भेज सकता है।app.json में बदलाव करने के बाद native project को फिर से build करें:

npx expo prebuild --clean

यह केवल development builds के साथ काम करता है, Expo Go के साथ नहीं।यदि android/app/build.gradle को manually maintain किया जाता है और उसमें plugin को खोजने के लिए कोई standard defaultConfig { } block नहीं है, तो इसके बजाय placeholder स्वयं जोड़ें। ऊपर दिया गया Android tab देखें।

उपयोग

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 को forward करना

Linking listener iOS के return-URL handling के लिए आवश्यक है। Android पर, handleOpenURL एक no-op है जो false को resolve करता है, क्योंकि Android core अपने redirect को native रूप से handle करता है। दोनों platforms पर listener को बिना शर्त register करना सुरक्षित है।

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

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

Result का अर्थ

result.status एक UI hint है, payment का प्रमाण नहीं। प्रत्येक payment की पुष्टि अपने backend से, payment.succeeded / subscription.active webhook के माध्यम से करें।

CheckoutStatus

आवश्यक

इनमें से कोई एक: succeeded, failed, cancelled, pending, expired।

string

जब return URL में कोई URL शामिल हो, तब set होता है। इसे UI में दिखाएँ, access देने के लिए इसका उपयोग न करें। नीचे Verify the Payment देखें।

string

subscription checkouts के लिए set होता है।

string[]

जब checkout में license key products शामिल होते हैं, तब set होता है।

string

जब checkout कोई email capture करता है, तब set होता है।

Record<string, string>

return URL का प्रत्येक query parameter, verbatim।

Payment सत्यापित करें

Webhooks

payment सफल होने या subscription सक्रिय होने पर Dodo Payments आपके backend को call करता है।

Get Payment Detail

इसकी status सीधे जाँचने के लिए अपनी secret key से paymentId को look up करें।

इनमें से कोई एक payment की पुष्टि करने के बाद access दें; केवल result.status के आधार पर कभी नहीं।

Appearance Customization

customization के माध्यम से start(...) पर checkout browser के toolbar, buttons और color scheme को customize करें। विकल्पों को platform के अनुसार समूहित किया गया है, क्योंकि Android का Custom Tab और iOS का SFSafariViewController अलग-अलग native controls expose करते हैं। सभी fields optional हैं; customization छोड़ने पर प्रत्येक platform का default appearance उपयोग होता है।

Android — Custom Tab

Toolbar का background color।

Navigation bar का color।

Navigation bar के ऊपर divider का color।

'default' | 'back'

default system का “X” icon दिखाता है; back इसके बजाय back arrow बनाता है।

'start' | 'end'

Toolbar में close button किस side पर दिखाई देता है।

Toolbar का share icon दिखाता है।

boolean

Toolbar में URL के नीचे page title दिखाता है।

boolean

Page scroll होने पर toolbar को auto-hide करने देता है।

boolean

Overflow menu में “Bookmark this page” दिखाता है।

boolean

Overflow menu में “Download page” दिखाता है।

'system' | 'light' | 'dark'

Device की system setting की परवाह किए बिना light या dark appearance लागू करता है।

iOS — SFSafariViewController

'done' | 'close' | 'cancel'

Dismiss button के लिए label या icon।

'pageSheet' | 'fullScreen'

pageSheet swipe-to-dismiss वाले card के रूप में दिखाई देता है; fullScreen पूरी screen को cover करता है।

boolean

Scroll करने पर toolbar को collapse होने देता है। केवल तभी दिखाई देता है जब presentationStyle, fullScreen हो — pageSheet इस setting की परवाह किए बिना bars को pinned रखता है।

'system' | 'light' | 'dark'

Device की system setting की परवाह किए बिना light या dark appearance लागू करता है।

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

Errors

start केवल misuse या platform failure के लिए CheckoutError के साथ reject होता है। Cancelled या declined payment हमेशा result होता है, exception नहीं।

INVALID_CHECKOUT_URL: यह checkout.dodopayments.com session URL नहीं है।
INVALID_RETURN_URL: यह valid absolute URL नहीं है।
ALREADY_IN_PROGRESS: checkout पहले से चल रहा है।
PLATFORM_ERROR: unexpected platform failure।

Abandoned Sessions

यदि checkout के दौरान app या JS bundle kill हो जाता है, तो promise खो जाता है, लेकिन native layer session को बनाए रखती है। अगले mount पर इसे recover करें और अपने backend के साथ reconcile करें।

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

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

Mobile Integration Guide

Android, iOS और Flutter के लिए यही contract।

Expo Boilerplate

checkout integration के साथ एक complete Expo example।

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Checkout Sessions API

Mobile Integration Guide

Installation

उपयोग

Return URL को forward करना

Result का अर्थ

Payment सत्यापित करें

Webhooks

Get Payment Detail

Appearance Customization

Errors

Abandoned Sessions

Mobile Integration Guide

Expo Boilerplate

Checkout Sessions API

Mobile Integration Guide

​Installation

​उपयोग

​Return URL को forward करना

​Result का अर्थ

​Payment सत्यापित करें

Webhooks

Get Payment Detail

​Appearance Customization

​Errors

​Abandoned Sessions

​Related

Mobile Integration Guide

Expo Boilerplate

Installation

उपयोग

Return URL को forward करना

Result का अर्थ

Payment सत्यापित करें

Appearance Customization

Errors

Abandoned Sessions

Related