React Native SDK (Beta)
Complete guide to integrating Dodo Payments SDK in your React Native application for secure payment processing
React Native SDK Integration
The Dodo Payments React Native SDK enables you to build secure payment experiences in your native Android and iOS apps. Our SDK provides customizable UI components and screens for collecting payment details.
- 📦 Install our SDK from NPM
- 📚 View our demo repository for complete implementation examples
- 🎥 Watch our demo video to see the Dodo Payments SDK in action
Features
Simplified Security
Collect sensitive payment data securely while remaining PCI compliant
Multiple Payment Methods
Accept various payment methods to expand global reach
Native UI
Native screens and elements for Android and iOS
Currently, Apple Pay, Google Pay, Cash App, and UPI are not supported in the React Native SDK. We are actively working to add support for these payment methods in future releases.
Installation
Install the SDK
Install the Dodo Payments SDK using your preferred package manager:
Platform-specific setup
Run pod install in your iOS folder:
Run pod install in your iOS folder:
Run the following command:
Client-Side Setup
Get Publishable Key
Get your publishable key from the Dodo Payments dashboard. (Distinct for both test and live modes) https://app.dodopayments.com/developer/others
Setup Payment Provider
Wrap your app with the DodoPaymentProvider
:
You’ll need to generate API keys from your Dodo Payments dashboard. See our API key generation guide for detailed instructions.
Create payment utility function
Create a utility function to fetch payment parameters from your backend API:
This function assumes you have a backend API endpoint that creates payment intents and returns a client secret. Ensure your backend is properly configured to handle payment creation. See our API Integration Tutorial for backend setup examples.
Implement the payment screen
Create your payment screen using the useCheckout
hook. Here’s a complete implementation:
For complete examples with styling, error handling, and customization options, check out our demo repositories:
Configuration Options
Session Parameters
The client secret from your payment intent, obtained from One time payment or subscription API.
The mode of the payment session (test or live).
Customization options for the payment sheet appearance
Theme mode: 'light'
or 'dark'
Appearance Customization
You can customize the React Native Unified Checkout to match your app’s design by modifying colors, fonts, and more through the appearance parameter when calling initPaymentSession()
.
Color Customization
Each color category determines the color of one or more components in the UI. For example, primary
defines the color of the Pay button.
Color Category | Usage |
---|---|
primary | Primary color for the Pay button and selected items |
background | Background color of the payment page |
componentBackground | Background color for inputs, tabs, and other components |
componentBorder | External border color for inputs, tabs, and other components |
componentDivider | Internal border color (shared borders) for components |
primaryText | Header text color |
secondaryText | Label text color for input fields |
componentText | Input text color (e.g., card number, zip code) |
placeholderText | Placeholder text color for input fields |
icon | Color for icons (e.g., close button) |
error | Color for error messages and destructive actions |
Example configuration with light and dark mode support:
Shape Customization
You can customize the border radius, border width, and shadow used throughout the payment interface:
Component-Specific Customization
You can customize specific UI components like the primary button (Pay button). These settings take precedence over the global appearance settings:
To apply these customizations, include them in your payment session configuration:
Error Handling
Handle different payment states in your checkout function:
Common Error Scenarios
Common Error Scenarios
- Network connectivity issues: Ensure stable internet connection
- Invalid client secret: Verify backend is generating valid payment intents
- Missing peer dependencies: Install all required dependencies
- Platform-specific setup: Complete iOS and Android configuration steps
- API errors: Check our Error Codes Reference for detailed error handling
Debugging Tips
Debugging Tips
- Enable debug logging in development
- Check network requests to your backend
- Verify API keys are correctly configured
- Test on both iOS and Android platforms
- Review our Technical FAQs for common issues
- Use Test vs Live Mode appropriately
Test Payment Methods
Use test card numbers in development to verify your integration without processing real payments. Learn more about our testing process and available test environments.