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

# Plantilla de Expo

> Construye aplicaciones móviles en React Native con Dodo Payments utilizando nuestra plantilla de Expo. Incluye integración de checkout, manejo de pagos y soporte para TypeScript.

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

## Descripción general

Una plantilla lista para producción para integrar Dodo Payments en aplicaciones de Expo/React Native. Esta plantilla incluye la creación de sesiones de checkout, manejo de pagos y una configuración adecuada de TypeScript para ayudarte a comenzar a aceptar pagos en tu aplicación móvil rápidamente.

<Info>
  Esta plantilla usa Expo SDK con TypeScript e incluye implementaciones de ejemplo para sesiones de pago y procesamiento de pagos.
</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>

## Requisitos previos

* Node.js 18+
* Expo CLI o EAS CLI
* Cuenta de Dodo Payments (clave API desde el panel de control)
* Simulador de iOS o emulador de Android (o dispositivo físico)

## Inicio rápido

<Steps>
  <Step title="Clone the Repository">
    Clona el repositorio de la plantilla y navega al directorio del proyecto:

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

  <Step title="Get Your API Credentials">
    Obtén tus credenciales desde el panel de Dodo Payments en Modo de Prueba:

    * **Clave API**: Navega a **Desarrollador → Claves API** en tu [panel de control](https://app.dodopayments.com)

    <Tip>
      Comienza en Modo de Prueba para probar tu integración de forma segura sin procesar pagos reales.
    </Tip>
  </Step>

  <Step title="Configure Environment Variables">
    Crea un archivo `.env` en el directorio raíz:

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

    Agrega tus credenciales de Dodo Payments:

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

    <Warning>
      Nunca subas tu archivo `.env` al control de versiones. Ya está incluido en `.gitignore`.
    </Warning>
  </Step>

  <Step title="Install Dependencies">
    Instala los paquetes npm requeridos:

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

  <Step title="Start the Development Server">
    Inicia el servidor de desarrollo de Expo:

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

    Escanea el código QR con la app Expo Go en tu dispositivo, o pulsa `i` para el simulador de iOS o `a` para el emulador de Android.

    <Check>
      ¡Listo para comenzar a construir! La plantilla incluye pantallas y componentes de ejemplo para ayudarte a comprender la integración.
    </Check>
  </Step>
</Steps>

## Qué está incluido

La plantilla viene con elementos esenciales preconfigurados:

<CardGroup cols={2}>
  <Card title="Checkout Integration" icon="shopping-cart">
    Ejemplo de implementación para crear y manejar sesiones de pago
  </Card>

  <Card title="Payment Handling" icon="credit-card">
    Flujo de pagos completo con manejo de éxito y errores
  </Card>

  <Card title="TypeScript Support" icon="code">
    Configuración completa en TypeScript con definiciones de tipo adecuadas
  </Card>

  <Card title="Expo Router" icon="route">
    Configuración de navegación con Expo Router para enrutamiento fluido
  </Card>
</CardGroup>

## Estructura del Proyecto

```
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 Pasos

Una vez que tengas la plantilla en funcionamiento:

<Steps>
  <Step title="Create Your Products">
    Agrega productos en tu [panel de Dodo Payments](https://app.dodopayments.com) para habilitar la funcionalidad de pago.
  </Step>

  <Step title="Customize the Integration">
    Adapta el código de ejemplo para que coincida con las necesidades y el diseño de tu aplicación.
  </Step>

  <Step title="Test on Real Devices">
    Prueba el flujo de pagos en dispositivos físicos para asegurar que todo funcione correctamente.
  </Step>

  <Step title="Go Live">
    Cuando estés listo, cambia a las claves de API de Modo en Vivo y compila tu aplicación para producción.
  </Step>
</Steps>

## Construyendo para Producción

<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 Adicionales

<CardGroup cols={2}>
  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    Guía detallada para implementar pagos en aplicaciones móviles
  </Card>

  <Card title="React Native Integration" icon="react" href="/developer-resources/react-native-integration">
    Documentación de integración específica para React Native
  </Card>

  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    Guía detallada para implementar pagos únicos
  </Card>

  <Card title="API Reference" icon="brackets-curly" href="/api-reference/introduction">
    Explora la documentación completa de la API de Dodo Payments
  </Card>
</CardGroup>

## Soporte

¿Necesitas ayuda con la plantilla?

* Únete a nuestra [comunidad de Discord](https://discord.gg/bYqAp4ayYh) para preguntas y discusiones
* Consulta el [repositorio de GitHub](https://github.com/dodopayments/expo-boilerplate) para problemas y actualizaciones
* Contacta a nuestro [equipo de soporte](mailto:support@dodopayments.com) para asistencia