mobile-checkout

Mobile In-App Checkout

This skill covers integrating Dodo Payments hosted checkout into native and cross-platform mobile apps using secure system browser contexts.

When to use this skill

• Building a React Native app with Turbo Module checkout integration
• Adding checkout to a Flutter app via native bridge
• Implementing native iOS or Android checkout with secure browser contexts
• Registering custom URL schemes and deep links for payment return
• Handling abandoned checkout sessions and recovery flows
• Confirming payment authority server-side before granting access

Core principle: Backend creates, mobile opens

Your backend creates the checkout session and returns a URL. The mobile app opens that URL in a secure browser context. Your API key must never be embedded in the app binary. The mobile SDK result is informational only; always verify the payment server-side via webhook or API before unlocking features or granting access.

Architecture overview

1. Backend: Create a checkout session via client.checkoutSessions.create(...) and return the checkout_url to your mobile app.
2. Mobile app: Call the platform-specific SDK with the checkout URL and a registered return URL scheme.
3. Browser context: The SDK opens the URL in a secure system browser: SFSafariViewController on iOS and Chrome Custom Tabs on Android.
4. Return: After payment, the browser navigates to your return URL. The SDK captures the result and passes it to your app.
5. Verification: Query the checkout session or listen for a webhook to confirm the payment before granting access.

React Native (Turbo Module)

Installation

npm install @dodopayments/react-native-checkout

For Expo projects, add the plugin to app.json:

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

The plugin registers a custom URL scheme (myappcheckout://) that the checkout flow uses to return to your app.