Complete guide to integrating Dodo Payments SDK in your React Native application for secure payment processing
Install the SDK
Platform-specific setup
Get Publishable Key
Setup Payment Provider
DodoPaymentProvider
:Create payment utility function
Implement the payment screen
useCheckout
hook. Here’s a complete implementation:'light'
or 'dark'
initPaymentSession()
.
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 |
Common Error Scenarios
Debugging Tips