Boilerplate do Expo

GitHub Repository

O boilerplate de Expo, React Native e Dodo Payments.

Visão geral

O boilerplate Expo é um app Expo funcional que vende um plano de assinatura por meio do checkout hospedado do Dodo Payments. Ele tem duas partes: um app Expo Router em TypeScript e um pequeno servidor Express em server/ que cria sessões de checkout com sua chave de API. O app solicita uma URL de checkout ao servidor, abre essa URL no navegador do sistema com expo-web-browser e recebe o resultado por meio de um deep link.

O boilerplate usa Expo SDK 54, Expo Router e TypeScript. A chave de API permanece no servidor. O app conhece apenas a URL do servidor.

Pré-requisitos

Node.js 18 ou posterior.
Expo CLI ou EAS CLI.
Uma conta do Dodo Payments com um produto. Crie o produto em Products no dashboard.
Um iOS Simulator, um Android Emulator ou um dispositivo físico.

Início rápido

Clone the Repository

Clone o repositório do boilerplate e acesse o diretório do projeto:

git clone https://github.com/dodopayments/expo-boilerplate.git
cd expo-boilerplate

Get Your API Credentials

Obtenha sua chave de API no dashboard do Dodo Payments no modo de teste:

API Key: acesse Developer → API Keys no seu dashboard.

Faça o build no modo de teste, que simula pagamentos sem movimentar dinheiro real.

Configure Environment Variables

O app e o servidor leem, cada um, seu próprio arquivo .env. Copie os dois arquivos de exemplo:

cp .env.example .env
cp server/.env.example server/.env

Em server/.env, adicione sua chave de API. DODOPAYMENTS_RETURN_URL deve usar o scheme de app.json, que é dodoexpo no boilerplate:

server/.env

DODOPAYMENTS_API_KEY=your_test_api_key_here
DODOPAYMENTS_ENVIRONMENT=test_mode
DODOPAYMENTS_RETURN_URL=dodoexpo://payment/result
PORT=3000

No arquivo .env raiz, defina EXPO_PUBLIC_BACKEND_URL como a URL do servidor, por exemplo, http://localhost:3000. O app envia solicitações de checkout para EXPO_PUBLIC_BACKEND_URL/checkout.Em seguida, abra server/server.js e substitua your-product-id pelo ID do seu produto. Os IDs de produto começam com pdt_.

Nunca faça commit dos arquivos .env no controle de versão. O arquivo .gitignore raiz já exclui .env.Nunca coloque uma chave de API do Dodo Payments em uma variável EXPO_PUBLIC_*. O Expo incorpora essas variáveis ao bundle JavaScript, portanto qualquer pessoa que baixar seu app poderá lê-las. Mantenha a chave no servidor, como o boilerplate faz, e passe ao app apenas o checkout_url resultante. Consulte Mobile Integration.

Install Dependencies

Instale os pacotes do app e do servidor:

npm install
cd server && npm install && cd ..

Start the Development Server

Inicie o backend em um terminal e, em seguida, inicie o Expo em um segundo terminal:

# Terminal 1: the checkout server
cd server && npm run dev

# Terminal 2: the Expo app
npx expo start

Pressione i para o iOS Simulator ou a para o Android Emulator, ou escaneie o código QR no seu dispositivo. O projeto inclui expo-dev-client, e o link de retorno dodoexpo:// precisa do próprio scheme do seu app; portanto, execute o app em um development build (npx expo run:ios ou npx expo run:android), em vez do Expo Go.Um dispositivo físico não consegue acessar localhost no seu computador. Para testar em um dispositivo, defina EXPO_PUBLIC_BACKEND_URL como o endereço da rede local do seu computador, por exemplo, http://192.168.1.10:3000.

A tela inicial mostra um cartão do plano com um botão de checkout. Toque nele para abrir o checkout, pague com o cartão de teste 4242 4242 4242 4242, e o app abrirá sua tela de resultado do pagamento.

O que está incluído

O boilerplate inclui:

Checkout Integration

Um servidor de demonstração que cria sessões de checkout e um serviço do app que as solicita e abre.

Payment Handling

Uma tela de resultado que lê o status do deep link dodoexpo://payment/result e mostra sucesso ou falha.

TypeScript Support

Configuração do TypeScript com tipos para a solicitação e a resposta do checkout.

Expo Router

Navegação baseada em arquivos com Expo Router, incluindo um layout de abas e a rota de resultado do pagamento.

Estrutura do projeto

Estes são os principais arquivos do repositório:

expo-boilerplate/
├── app/
│   ├── (tabs)/
│   │   ├── index.tsx          # Home screen with the plan card and checkout button
│   │   └── profile.tsx
│   ├── payment/
│   │   └── result.tsx         # Payment result screen (deep-link target)
│   └── _layout.tsx            # Root layout and deep-link handling
├── components/
│   └── payments/              # PaymentButton, ProductCard, and related UI
├── config/
│   ├── env.ts                 # Reads EXPO_PUBLIC_BACKEND_URL
│   └── product.ts             # Plan name, price text, and features
├── services/
│   └── dodo-payments.ts       # Requests a checkout URL and opens it
├── types/
│   └── dodo-payments.ts       # Checkout types
├── server/                    # Demo Express server that creates checkout sessions
│   ├── server.js
│   └── .env.example
├── .env.example               # App environment variables template
├── app.json                   # App name, scheme, and bundle identifiers
└── package.json

Próximas etapas

Depois que o boilerplate estiver funcionando:

Create Your Products

Adicione produtos ao seu dashboard do Dodo Payments e use os IDs deles em server/server.js.

Customize the Integration

Altere o texto do plano em config/product.ts e altere o nome do app, scheme e os bundle identifiers em app.json. Se você alterar scheme, atualize DODOPAYMENTS_RETURN_URL para corresponder.

Test on Real Devices

Teste o fluxo de pagamento e o retorno por deep link em dispositivos físicos iOS e Android.

Go Live

Substitua o servidor de demonstração pelo seu próprio backend, que autentica usuários e concede acesso a partir de webhooks. Em seguida, mude para uma chave de API de modo live e faça o build do seu app para produção.

Build para produção

Crie binários prontos para as lojas com o EAS Build:

Install EAS CLI

npm install -g eas-cli

Configure EAS

O repositório não tem um eas.json. Este comando cria um:

eas build:configure

Build Your App

Para iOS:

eas build --platform ios

Para Android:

eas build --platform android

Recursos adicionais

Mobile Integration Guide

Os SDKs de checkout para dispositivos móveis, a configuração de deep links e as configurações de checkout para dispositivos móveis.

Integration Guide

Sessões de checkout, links de pagamento e webhooks.

API Reference

Todos os endpoints da API do Dodo Payments.

Suporte

Para obter ajuda com o boilerplate:

Faça perguntas na comunidade do Discord.
Relate problemas no repositório do GitHub.
Envie um e-mail para a equipe de suporte.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

GitHub Repository

Visão geral

Pré-requisitos

Início rápido

O que está incluído

Checkout Integration

Payment Handling

TypeScript Support

Expo Router

Estrutura do projeto

Próximas etapas

Build para produção

Recursos adicionais

Mobile Integration Guide

Integration Guide

API Reference

Suporte

GitHub Repository

​Visão geral

​Pré-requisitos

​Início rápido

​O que está incluído

Checkout Integration

Payment Handling

TypeScript Support

Expo Router

​Estrutura do projeto

​Próximas etapas

​Build para produção

​Recursos adicionais

Mobile Integration Guide

Integration Guide

API Reference

​Suporte

Visão geral

Pré-requisitos

Início rápido

O que está incluído

Estrutura do projeto

Próximas etapas

Build para produção

Recursos adicionais

Suporte