{"id":51222222,"url":"https://github.com/dodopayments/dodopayments-react-native-demo","last_synced_at":"2026-06-28T08:02:48.946Z","repository":{"id":299044885,"uuid":"1000036109","full_name":"dodopayments/dodopayments-react-native-demo","owner":"dodopayments","description":"React Native Demo for Dodo Payments","archived":false,"fork":false,"pushed_at":"2025-11-30T13:35:09.000Z","size":4964,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-02T19:46:18.931Z","etag":null,"topics":["dodopayments","react-native","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dodopayments.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-11T07:06:03.000Z","updated_at":"2025-11-30T13:35:13.000Z","dependencies_parsed_at":"2025-06-14T10:44:46.939Z","dependency_job_id":null,"html_url":"https://github.com/dodopayments/dodopayments-react-native-demo","commit_stats":null,"previous_names":["dodopayments/dodopayments-react-native-demo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dodopayments/dodopayments-react-native-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dodopayments%2Fdodopayments-react-native-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dodopayments%2Fdodopayments-react-native-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dodopayments%2Fdodopayments-react-native-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dodopayments%2Fdodopayments-react-native-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dodopayments","download_url":"https://codeload.github.com/dodopayments/dodopayments-react-native-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dodopayments%2Fdodopayments-react-native-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34881384,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-28T02:00:05.809Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dodopayments","react-native","typescript"],"created_at":"2026-06-28T08:02:48.318Z","updated_at":"2026-06-28T08:02:48.932Z","avatar_url":"https://github.com/dodopayments.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dodo Payments React Native Demo App\n\nA demonstration application showcasing **two payment integration methods** with Dodo Payments in React Native:\n\n1. **React Native SDK** - Native payment sheet with full customization\n2. **Payment Link (InAppBrowser)** - Hosted checkout page in browser\n\n- 📦 Install our SDK from [NPM](https://www.npmjs.com/package/dodopayments-react-native-sdk)\n- 📚 Read our [Integration Guide](https://docs.dodopayments.com/api-reference/react-native-integration) for detailed documentation.\n- 🎥 Watch our demo video to see the Dodo Payments SDK in action.\n\n\u003ca href=\"https://youtu.be/eicctkqK04Y\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://github.com/dodopayments/dodopayments-react-native-demo/blob/main/images/thumbnail.png?raw=true\"\n      alt=\"React Native SDK Demo\" /\u003e\n\u003c/a\u003e\n\n## Features\n\n- 🔄 **Two Payment Flows**: Switch between SDK and Payment Link methods\n- 🔒 Secure payment processing with PCI compliance\n- 💳 Support for multiple payment methods\n- 📱 Native UI components for Android and iOS\n- 🎨 Customizable payment interface\n- 🌓 Light and dark mode support\n- 🔗 Deep linking for payment callbacks\n\n## Prerequisites\n\n- Node.js (v14 or higher)\n- React Native development environment setup\n- iOS: Xcode and CocoaPods\n- Android: Android Studio and Android SDK\n- Dodo Payments account and API keys\n\n## Installation\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/dodopayments/dodopayments-react-native-demo.git\ncd dodopaymentdemoapp\n```\n\n2. Install dependencies:\n\n```bash\nnpm install\n# or\nyarn install\n```\n\n3. Install iOS dependencies:\n\n```bash\ncd ios \u0026\u0026 pod install \u0026\u0026 cd ..\n```\n\n## Configuration\n\n### Backend Server Setup\n\n1. Navigate to the server directory and create `.env` file:\n\n```bash\ncd server\ncp .env.example .env\n```\n\n2. Get your credentials from [Dodo Payments Dashboard](https://app.dodopayments.com/developer):\n   - API Key: https://app.dodopayments.com/developer/api-keys\n   - Publishable Key: https://app.dodopayments.com/developer/others\n   - Product ID: https://app.dodopayments.com/products\n\n3. Edit `server/.env` with your credentials:\n\n```env\nDODOPAYMENTS_TEST_API_KEY=key_test_your_api_key_here\nDODO_PUBLISHABLE_KEY=pk_test_your_publishable_key_here\nDODO_PRODUCT_ID=pdt_your_product_id_here\n```\n\n4. Install server dependencies and start:\n\n```bash\nnpm install\nnpm start\n```\n\nServer will run on `http://localhost:5252`\n\n### Frontend App Configuration\n\n1. Update `App.tsx` with your publishable key (line 9):\n\n```tsx\nconst PUBLISHABLE_KEY = 'pk_test_your_publishable_key_here';\n```\n\n2. Configure network settings in `src/config.ts` based on your device:\n\n**For Android Emulator:**\n```typescript\nexport const IS_ANDROID_EMULATOR = true;\n```\n\n**For Physical Device:**\n```typescript\nexport const IS_ANDROID_EMULATOR = false;\nexport const YOUR_COMPUTER_IP = '192.168.1.100'; // Your computer's IP\n```\n\n## Running the App\n\n**Important**: Start the backend server first!\n\n1. **Start Backend Server** (in `server/` directory):\n```bash\ncd server\nnpm start\n```\n\n2. **Start Metro Bundler** (in root directory):\n```bash\nnpm start\n```\n\n3. **Launch App**:\n\n### iOS\n```bash\nnpm run ios\n```\n\n### Android\n```bash\nnpm run android\n```\n\n## Using the App\n\nThe app features a **bottom tab bar** with two payment methods:\n\n### 1. SDK Payment (Tab 1)\n- Native payment sheet\n- Fully customizable UI\n- Processes payment via React Native SDK\n- Best for production apps\n\n### 2. Payment Link (Tab 2)\n- Opens hosted checkout in InAppBrowser\n- Quick integration, no SDK setup needed\n- Good for testing or fallback option\n- Returns to app via deep linking\n\n## Project Structure\n\n```\ndodopayments-react-native-demo/\n├── src/\n│   ├── Components/           # Reusable UI components\n│   │   ├── PaymentContent.tsx    # Shared payment UI\n│   │   ├── BottomTabBar.tsx      # Tab navigation\n│   │   └── ...\n│   ├── constants/            # Shared constants \u0026 data\n│   │   └── mockData.ts           # Product data \u0026 calculations\n│   ├── utils/                # Utility functions\n│   ├── PaymentScreen.tsx     # SDK payment flow\n│   ├── PaymentLinkScreen.tsx # InAppBrowser flow\n│   └── config.ts             # Network configuration\n├── server/                   # Backend server\n│   ├── server.js             # Express API server\n│   ├── .env.example          # Environment template\n│   └── package.json\n├── ios/                      # iOS native code\n├── android/                  # Android native code\n└── App.tsx                   # Main app entry\n```\n\n## Integration Guide\n\n### 1. Setup Payment Provider\n\nWrap your app with the `DodoPaymentProvider`:\n\n```tsx\nimport {DodoPaymentProvider} from 'dodopayments-sdk-react-native';\n\nfunction App() {\n  return (\n    \u003cDodoPaymentProvider publishableKey={process.env.DODO_PUBLISHABLE_KEY}\u003e\n      \u003cPaymentScreen /\u003e\n    \u003c/DodoPaymentProvider\u003e\n  );\n}\n```\n\n### 2. Implement Payment Screen\n\n```tsx\nimport { useCheckout } from 'dodopayments-sdk-react-native';\n\nconst PaymentScreen = () =\u003e {\n  const { initPaymentSession, presentPaymentSheet } = useCheckout();\n\n  const handlePayment = async () =\u003e {\n    try {\n      const { clientSecret } = await fetchPaymentParams();\n      const params = await initPaymentSession({ clientSecret });\n      const result = await presentPaymentSheet(params);\n\n      if (result?.status === 'succeeded') {\n        // Handle successful payment\n      }\n    } catch (error) {\n      // Handle error\n    }\n  };\n\n  return (\n    // Your payment UI\n  );\n};\n```\n\n## Customization\n\n### Appearance Configuration\n\n```tsx\nconst appearance = {\n  colors: {\n    light: {\n      primary: '#F8F8F2',\n      background: '#ffffff',\n      // ... other colors\n    },\n    dark: {\n      primary: '#00ff0099',\n      background: '#ff0000',\n      // ... other colors\n    },\n  },\n  shapes: {\n    borderRadius: 10,\n    borderWidth: 1,\n  },\n};\n```\n\n## Testing\n\nUse test card numbers in development:\n\n- Test Card Number: 4242 4242 4242 4242\n- Expiry: Any future date\n- CVC: Any 3 digits\n\n## Error Handling\n\n```tsx\nconst handlePaymentResult = paymentSheetResponse =\u003e {\n  switch (paymentSheetResponse?.status) {\n    case 'cancelled':\n      // Handle cancellation\n      break;\n    case 'succeeded':\n      // Handle success\n      break;\n    case 'failed':\n      // Handle failure\n      break;\n  }\n};\n```\n\n## Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## Support\n\nFor support, email support@dodopayments.com or visit our [documentation](https://docs.dodopayments.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdodopayments%2Fdodopayments-react-native-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdodopayments%2Fdodopayments-react-native-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdodopayments%2Fdodopayments-react-native-demo/lists"}