GitHub Repository
Expo, React Native और Dodo Payments boilerplate।
अवलोकन
Expo boilerplate एक काम करने वाला Expo app है, जो Dodo Payments hosted checkout के ज़रिए subscription plan बेचता है। इसके दो भाग हैं: TypeScript में बना Expo Router app औरserver/ में बना एक छोटा Express server, जो आपकी API key से checkout sessions बनाता है। app server से checkout URL मांगता है, उसे expo-web-browser के साथ system browser में खोलता है और deep link के ज़रिए परिणाम प्राप्त करता है।
Boilerplate में Expo SDK 54, Expo Router और TypeScript का उपयोग किया गया है। API key server पर रहती है। app को केवल server का URL पता होता है।
पूर्वापेक्षाएँ
- Node.js 18 या उसके बाद का संस्करण।
- Expo CLI या EAS CLI।
- product वाला Dodo Payments account। Dashboard में Products के अंतर्गत product बनाएं।
- iOS Simulator, Android Emulator या physical device।
त्वरित प्रारंभ
1
Clone the Repository
Boilerplate repository को clone करें और project directory में जाएं:
2
Get Your API Credentials
Test mode में Dodo Payments dashboard से अपनी API key प्राप्त करें:
- API Key: अपने dashboard में Developer → API Keys पर जाएं।
3
Configure Environment Variables
app और server, दोनों अपनी-अपनी Root
.env file पढ़ते हैं। दोनों example files को copy करें:server/.env में अपनी API key जोड़ें। DODOPAYMENTS_RETURN_URL को app.json की scheme का उपयोग करना चाहिए, जो boilerplate में dodoexpo है:server/.env
.env में EXPO_PUBLIC_BACKEND_URL को server के URL पर set करें, उदाहरण के लिए http://localhost:3000। app checkout requests को EXPO_PUBLIC_BACKEND_URL/checkout पर भेजता है।फिर server/server.js खोलें और your-product-id को अपने product की ID से replace करें। Product IDs की शुरुआत pdt_ से होती है।4
Install Dependencies
app और server के लिए packages install करें:
5
Start the Development Server
एक terminal में backend शुरू करें, फिर दूसरे terminal में Expo शुरू करें:iOS Simulator के लिए
i या Android Emulator के लिए a दबाएँ, या अपने डिवाइस पर QR code स्कैन करें। प्रोजेक्ट में expo-dev-client शामिल है, और dodoexpo:// return link के लिए आपके ऐप की अपनी scheme आवश्यक है, इसलिए Expo Go के बजाय ऐप को development build (npx expo run:ios या npx expo run:android) में चलाएँ।Physical device आपके computer पर localhost तक नहीं पहुंच सकता। Device पर test करने के लिए EXPO_PUBLIC_BACKEND_URL को अपने computer के local network address पर set करें, उदाहरण के लिए http://192.168.1.10:3000।Home screen पर checkout button वाला plan card दिखाई देता है। Checkout खोलने के लिए उसे tap करें, test card
4242 4242 4242 4242 से pay करें और app अपना payment result screen खोल देता है।इसमें क्या शामिल है
Boilerplate में शामिल हैं:Checkout Integration
एक demo server, जो checkout sessions बनाता है, और एक app service, जो उन्हें request और open करती है।
Payment Handling
एक result screen, जो
dodoexpo://payment/result deep link से status पढ़ती है और success या failure दिखाती है।TypeScript Support
Checkout request और response के लिए types वाली TypeScript configuration।
Expo Router
Expo Router के साथ file-based navigation, जिसमें tab layout और payment result route शामिल हैं।
Project Structure
Repository में मुख्य files ये हैं:अगले चरण
Boilerplate चलने के बाद:1
Create Your Products
अपने Dodo Payments dashboard में products जोड़ें और उनकी IDs को
server/server.js में उपयोग करें।2
Customize the Integration
config/product.ts में plan text बदलें और app.json में app name, scheme और bundle identifiers बदलें। यदि आप scheme बदलते हैं, तो मेल खाने के लिए DODOPAYMENTS_RETURN_URL को update करें।3
Test on Real Devices
Physical iOS और Android devices पर payment flow और deep-link return को test करें।
4
Go Live
Demo server को अपने ऐसे backend से replace करें, जो users को authenticate करता हो और webhooks से access प्रदान करता हो। फिर live mode API key पर switch करें और production के लिए अपना app build करें।
Production के लिए Building
EAS Build के साथ store-ready binaries build करें:1
Install EAS CLI
2
Configure EAS
Repository में
eas.json नहीं है। यह command इसे बनाती है:3
Build Your App
iOS के लिए:Android के लिए:
अतिरिक्त Resources
Mobile Integration Guide
Mobile checkout SDKs, deep-link setup और mobile checkout settings।
Integration Guide
Checkout sessions, payment links और webhooks।
API Reference
हर Dodo Payments API endpoint।
Support
Boilerplate के लिए सहायता पाने हेतु:- Discord community में प्रश्न पूछें।
- GitHub repository में issues report करें।
- support team को email करें।