> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Expo Boilerplate

> Build React Native mobile apps with Dodo Payments using our Expo boilerplate. Includes checkout integration, payment handling, and TypeScript support.

<Card title="GitHub Repository" icon="github" href="https://github.com/dodopayments/expo-boilerplate">
  Complete Expo + React Native + Dodo Payments boilerplate
</Card>

## Overview

A production-ready boilerplate for integrating Dodo Payments into Expo/React Native applications. This template includes checkout session creation, payment handling, and proper TypeScript configuration to help you start accepting payments in your mobile app quickly.

<Info>
  This boilerplate uses Expo SDK with TypeScript and includes example implementations for checkout sessions and payment processing.
</Info>

<Frame>
  <iframe className="w-full aspect-video rounded-md" src="https://www.youtube.com/embed/78N1qw14m0Y" title="Expo Boilerplate Demo | Dodo Payments" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

## Prerequisites

* Node.js 18+
* Expo CLI or EAS CLI
* Dodo Payments account (API key from dashboard)
* iOS Simulator or Android Emulator (or physical device)

## Quick Start

<Steps>
  <Step title="Clone the Repository">
    Clone the boilerplate repository and navigate to the project directory:

    ```bash theme={null}
    git clone https://github.com/dodopayments/expo-boilerplate.git
    cd expo-boilerplate
    ```
  </Step>

  <Step title="Get Your API Credentials">
    Obtain your credentials from the Dodo Payments dashboard in Test Mode:

    * **API Key**: Navigate to **Developer → API Keys** in your [dashboard](https://app.dodopayments.com)

    <Tip>
      Start with Test Mode to safely test your integration without processing real payments.
    </Tip>
  </Step>

  <Step title="Configure Environment Variables">
    Create a `.env` file in the root directory:

    ```bash theme={null}
    touch .env
    ```

    Add your Dodo Payments credentials:

    ```bash .env theme={null}
    EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here
    ```

    <Warning>
      Never commit your `.env` file to version control. It's already included in `.gitignore`.
    </Warning>
  </Step>

  <Step title="Install Dependencies">
    Install the required npm packages:

    ```bash theme={null}
    npm install
    ```
  </Step>

  <Step title="Start the Development Server">
    Start the Expo development server:

    ```bash theme={null}
    npx expo start
    ```

    Scan the QR code with Expo Go app on your device, or press `i` for iOS simulator or `a` for Android emulator.

    <Check>
      You're ready to start building! The boilerplate includes example screens and components to help you understand the integration.
    </Check>
  </Step>
</Steps>

## What's Included

The boilerplate comes with pre-configured essentials:

<CardGroup cols={2}>
  <Card title="Checkout Integration" icon="shopping-cart">
    Example implementation for creating and handling checkout sessions
  </Card>

  <Card title="Payment Handling" icon="credit-card">
    Complete payment flow with success and error handling
  </Card>

  <Card title="TypeScript Support" icon="code">
    Full TypeScript configuration with proper type definitions
  </Card>

  <Card title="Expo Router" icon="route">
    Navigation setup with Expo Router for seamless routing
  </Card>
</CardGroup>

## Project Structure

```
expo-boilerplate/
├── app/
│   ├── (tabs)/
│   │   └── index.tsx          # Home screen with examples
│   └── checkout.tsx           # Checkout screen
├── components/
│   └── PaymentButton.tsx      # Payment button component
├── lib/
│   └── dodo.ts                # Dodo Payments client setup
├── .env.example               # Environment variables template
└── package.json
```

## Next Steps

Once you have the boilerplate running:

<Steps>
  <Step title="Create Your Products">
    Add products in your [Dodo Payments dashboard](https://app.dodopayments.com) to enable checkout functionality.
  </Step>

  <Step title="Customize the Integration">
    Adapt the example code to match your application's needs and design.
  </Step>

  <Step title="Test on Real Devices">
    Test the payment flow on physical devices to ensure everything works correctly.
  </Step>

  <Step title="Go Live">
    When ready, switch to Live Mode API keys and build your app for production.
  </Step>
</Steps>

## Building for Production

<Steps>
  <Step title="Install EAS CLI">
    ```bash theme={null}
    npm install -g eas-cli
    ```
  </Step>

  <Step title="Configure EAS">
    ```bash theme={null}
    eas build:configure
    ```
  </Step>

  <Step title="Build Your App">
    For iOS:

    ```bash theme={null}
    eas build --platform ios
    ```

    For Android:

    ```bash theme={null}
    eas build --platform android
    ```
  </Step>
</Steps>

## Additional Resources

<CardGroup cols={2}>
  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    Detailed guide for implementing payments in mobile apps
  </Card>

  <Card title="React Native Integration" icon="react" href="/developer-resources/react-native-integration">
    React Native specific integration documentation
  </Card>

  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    Detailed guide for implementing one-time payments
  </Card>

  <Card title="API Reference" icon="brackets-curly" href="/api-reference/introduction">
    Explore the full Dodo Payments API documentation
  </Card>
</CardGroup>

## Support

Need help with the boilerplate?

* Join our [Discord community](https://discord.gg/bYqAp4ayYh) for questions and discussions
* Check the [GitHub repository](https://github.com/dodopayments/expo-boilerplate) for issues and updates
* Contact our [support team](mailto:support@dodopayments.com) for assistance