Pular para o conteúdo principal

Repositório do GitHub

Boilerplate completo Expo + React Native + Dodo Payments

​
Visão Geral

Um boilerplate pronto para produção para integrar Dodo Payments em aplicativos Expo/React Native. Este template inclui criação de sessão de checkout, manuseio de pagamentos e configuração adequada do TypeScript para ajudá-lo a começar a aceitar pagamentos em seu aplicativo móvel rapidamente.
Este boilerplate usa o SDK do Expo com TypeScript e inclui implementações de exemplo para sessões de checkout e processamento de pagamentos.

​
Pré-requisitos

  • Node.js 18+
  • Expo CLI ou EAS CLI
  • Conta Dodo Payments (chave API do painel)
  • Simulador iOS ou Emulador Android (ou dispositivo físico)

​
Início Rápido

1

Clone o Repositório

Clone o repositório do boilerplate e navegue até o diretório do projeto:
git clone https://github.com/dodopayments/expo-boilerplate.git
cd expo-boilerplate
2

Obtenha suas Credenciais de API

Obtenha suas credenciais no painel Dodo Payments em Modo de Teste:
  • Chave API: Navegue até Desenvolvedor → Chaves API em seu painel
Comece com o Modo de Teste para testar sua integração com segurança, sem processar pagamentos reais.
3

Configure Variáveis de Ambiente

Crie um .env arquivo no diretório raiz:
touch .env
Adicione suas credenciais Dodo Payments:
.env
EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here
Nunca comite seu .env arquivo no controle de versão. Ele já está incluído em .gitignore.
4

Instale Dependências

Instale os pacotes npm necessários:
npm install
5

Inicie o Servidor de Desenvolvimento

Inicie o servidor de desenvolvimento do Expo:
npx expo start
Escaneie o código QR com o aplicativo Expo Go em seu dispositivo, ou pressione i para simulador iOS ou a para emulador Android.
Você está pronto para começar a construir! O boilerplate inclui telas e componentes de exemplo para ajudá-lo a entender a integração.

​
O que está incluído

O boilerplate vem com essenciais pré-configurados:

Integração de Checkout

Implementação de exemplo para criar e gerenciar sessões de checkout

Manuseio de Pagamentos

Fluxo de pagamento completo com manuseio de sucesso e erro

Suporte a TypeScript

Configuração completa do TypeScript com definições de tipo adequadas

Roteador Expo

Configuração de navegação com Roteador Expo para roteamento sem costura

​
Estrutura do Projeto

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

​
Próximos Passos

Uma vez que você tenha o boilerplate em funcionamento:
1

Crie Seus Produtos

Adicione produtos em seu painel Dodo Payments para habilitar a funcionalidade de checkout.
2

Personalize a Integração

Adapte o código de exemplo para atender às necessidades e ao design de seu aplicativo.
3

Teste em Dispositivos Reais

Teste o fluxo de pagamento em dispositivos físicos para garantir que tudo funcione corretamente.
4

Vá ao Vivo

Quando estiver pronto, mude para as chaves de API do Modo Ao Vivo e construa seu aplicativo para produção.

​
Construindo para Produção

1

Instale EAS CLI

npm install -g eas-cli
2

Configure EAS

eas build:configure
3

Construa Seu Aplicativo

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

​
Recursos Adicionais

Guia de Integração Móvel

Guia detalhado para implementar pagamentos em aplicativos móveis

Integração React Native

Documentação de integração específica para React Native

Guia de Integração

Guia detalhado para implementar pagamentos únicos

Referência da API

Explore a documentação completa da API Dodo Payments

​
Suporte

Precisa de ajuda com o boilerplate?