Skip to main content

GitHub Repository

Complete Expo + React Native + Dodo Payments boilerplate

​
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.
This boilerplate uses Expo SDK with TypeScript and includes example implementations for checkout sessions and payment processing.

​
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

1

Clone the Repository

Clone the boilerplate repository and navigate to the project directory:
git clone https://github.com/dodopayments/expo-boilerplate.git
cd expo-boilerplate
2

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
Start with Test Mode to safely test your integration without processing real payments.
3

Configure Environment Variables

Create a .env file in the root directory:
touch .env
Add your Dodo Payments credentials:
.env
EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here
Never commit your .env file to version control. It’s already included in .gitignore.
4

Install Dependencies

Install the required npm packages:
npm install
5

Start the Development Server

Start the Expo development server:
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.
You’re ready to start building! The boilerplate includes example screens and components to help you understand the integration.

​
What’s Included

The boilerplate comes with pre-configured essentials:

Checkout Integration

Example implementation for creating and handling checkout sessions

Payment Handling

Complete payment flow with success and error handling

TypeScript Support

Full TypeScript configuration with proper type definitions

Expo Router

Navigation setup with Expo Router for seamless routing

​
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:
1

Create Your Products

Add products in your Dodo Payments dashboard to enable checkout functionality.
2

Customize the Integration

Adapt the example code to match your application’s needs and design.
3

Test on Real Devices

Test the payment flow on physical devices to ensure everything works correctly.
4

Go Live

When ready, switch to Live Mode API keys and build your app for production.

​
Building for Production

1

Install EAS CLI

npm install -g eas-cli
2

Configure EAS

eas build:configure
3

Build Your App

For iOS:
eas build --platform ios
For Android:
eas build --platform android

​
Additional Resources

Mobile Integration Guide

Detailed guide for implementing payments in mobile apps

React Native Integration

React Native specific integration documentation

Integration Guide

Detailed guide for implementing one-time payments

API Reference

Explore the full Dodo Payments API documentation

​
Support

Need help with the boilerplate?