> ## 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.

# Boilerplate do Expo

> Crie aplicativos móveis React Native com <Card title="GitHub Repository" icon="github" href="https://github.com/dodopayments/expo-boilerplate"> usando nosso boilerplate do Expo. Inclui integração de checkout, processamento de pagamentos e suporte a TypeScript.

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

## Visão geral

Um boilerplate pronto para produção para integrar Dodo Payments a aplicativos Expo/React Native. Este modelo inclui criação de sessões de checkout, processamento de pagamentos e configuração adequada do TypeScript para ajudar você a começar a aceitar pagamentos rapidamente em seu aplicativo móvel.

<Info>
  Este boilerplate usa o Expo SDK com TypeScript e inclui implementações de exemplo para sessões de checkout e processamento de pagamentos.
</Info>

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

## Pré-requisitos

* Node.js 18+
* Expo CLI ou EAS CLI
* Conta do Dodo Payments (API key do dashboard)
* iOS Simulator ou Android Emulator (ou dispositivo físico)

## Início rápido

<Steps>
  <Step title="Clone the Repository">
    Clone o repositório do boilerplate e navegue até o diretório do projeto:

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

  <Step title="Get Your API Credentials">
    Obtenha suas credenciais no dashboard do Dodo Payments no Test Mode:

    * **API Key**: acesse **Developer → API Keys** no seu [dashboard](https://app.dodopayments.com)

    <Tip>
      Comece pelo Test Mode para testar sua integração com segurança, sem processar pagamentos reais.
    </Tip>
  </Step>

  <Step title="Configure Environment Variables">
    Crie um arquivo `.env` no diretório raiz:

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

    Adicione suas credenciais do Dodo Payments:

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

    <Warning>
      Nunca faça commit do arquivo `.env` no controle de versão. Ele já está incluído em `.gitignore`.
    </Warning>
  </Step>

  <Step title="Install Dependencies">
    Instale os pacotes npm necessários:

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

  <Step title="Start the Development Server">
    Inicie o servidor de desenvolvimento do Expo:

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

    Leia o código QR com o aplicativo Expo Go em seu dispositivo ou pressione `i` para o iOS simulator ou `a` para o Android emulator.

    <Check>
      Agora você já pode começar a criar! O boilerplate inclui telas e componentes de exemplo para ajudar você a entender a integração.
    </Check>
  </Step>
</Steps>

## O que está incluído

O boilerplate vem com os recursos essenciais pré-configurados:

<CardGroup cols={2}>
  <Card title="Checkout Integration" icon="shopping-cart">
    Implementação de exemplo para criar e processar sessões de checkout
  </Card>

  <Card title="Payment Handling" icon="credit-card">
    Fluxo completo de pagamento com tratamento de sucesso e erro
  </Card>

  <Card title="TypeScript Support" icon="code">
    Configuração completa do TypeScript com definições de tipos adequadas
  </Card>

  <Card title="Expo Router" icon="route">
    Configuração de navegação com Expo Router para roteamento integrado
  </Card>
</CardGroup>

## 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óximas etapas

Depois que o boilerplate estiver em execução:

<Steps>
  <Step title="Create Your Products">
    Adicione produtos no seu [dashboard do Dodo Payments](https://app.dodopayments.com) para habilitar a funcionalidade de checkout.
  </Step>

  <Step title="Customize the Integration">
    Adapte o código de exemplo às necessidades e ao design do seu aplicativo.
  </Step>

  <Step title="Test on Real Devices">
    Teste o fluxo de pagamento em dispositivos físicos para garantir que tudo funcione corretamente.
  </Step>

  <Step title="Go Live">
    Quando estiver pronto, alterne para as API keys do Live Mode e prepare seu aplicativo para produção.
  </Step>
</Steps>

## Compilação para produção

<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">
    Para iOS:

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

    Para Android:

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

## Recursos adicionais

<CardGroup cols={2}>
  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    Guia detalhado para implementar pagamentos em aplicativos móveis
  </Card>

  <Card title="React Native Integration" icon="react" href="/developer-resources/react-native-integration">
    Documentação específica da integração com React Native
  </Card>

  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    Guia detalhado para implementar pagamentos únicos
  </Card>

  <Card title="API Reference" icon="brackets-curly" href="/api-reference/introduction">
    Explore a documentação completa da API do Dodo Payments
  </Card>
</CardGroup>

## Suporte

Precisa de ajuda com o boilerplate?

* Entre na nossa [comunidade do Discord](https://discord.gg/bYqAp4ayYh) para tirar dúvidas e participar de discussões
* Consulte o [repositório no GitHub](https://github.com/dodopayments/expo-boilerplate) para ver problemas e atualizações
* Entre em contato com nossa [equipe de suporte](mailto:support@dodopayments.com) para obter assistência