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.

GitHub Repository

Plantilla completa de Expo + React Native + Dodo Payments

​

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.

Esta plantilla usa Expo SDK con TypeScript e incluye implementaciones de ejemplo para sesiones de pago y procesamiento de pagos.

​

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

1. Clone the Repository

   Clona el repositorio de la plantilla y navega al directorio del proyecto:

   git clone https://github.com/dodopayments/expo-boilerplate.git
   cd expo-boilerplate
   
2. 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

   Comienza en Modo de Prueba para probar tu integración de forma segura sin procesar pagos reales.

3. Configure Environment Variables

   Crea un archivo .env en el directorio raíz:

   touch .env
   

   Agrega tus credenciales de Dodo Payments:

   .env

   EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here
   

   Nunca subas tu archivo .env al control de versiones. Ya está incluido en .gitignore.

4. Install Dependencies

   Instala los paquetes npm requeridos:

   npm install
   
5. Start the Development Server

   Inicia el servidor de desarrollo de Expo:

   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.

   ¡Listo para comenzar a construir! La plantilla incluye pantallas y componentes de ejemplo para ayudarte a comprender la integración.

​

Qué está incluido

La plantilla viene con elementos esenciales preconfigurados:

Checkout Integration

Ejemplo de implementación para crear y manejar sesiones de pago

Payment Handling

Flujo de pagos completo con manejo de éxito y errores

TypeScript Support

Configuración completa en TypeScript con definiciones de tipo adecuadas

Expo Router

Configuración de navegación con Expo Router para enrutamiento fluido

​

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:

1. Create Your Products

   Agrega productos en tu panel de Dodo Payments para habilitar la funcionalidad de pago.

2. Customize the Integration

   Adapta el código de ejemplo para que coincida con las necesidades y el diseño de tu aplicación.

3. Test on Real Devices

   Prueba el flujo de pagos en dispositivos físicos para asegurar que todo funcione correctamente.

4. Go Live

   Cuando estés listo, cambia a las claves de API de Modo en Vivo y compila tu aplicación para producción.

​

Construyendo para Producción

1. Install EAS CLI

   npm install -g eas-cli
   
2. Configure EAS

   eas build:configure
   
3. Build Your App

   Para iOS:

   eas build --platform ios
   

   Para Android:

   eas build --platform android
   

​

Recursos Adicionales

Mobile Integration Guide

Guía detallada para implementar pagos en aplicaciones móviles

React Native Integration

Documentación de integración específica para React Native

Integration Guide

Guía detallada para implementar pagos únicos

API Reference

Explora la documentación completa de la API de Dodo Payments

​

Soporte

¿Necesitas ayuda con la plantilla?

• Únete a nuestra comunidad de Discord para preguntas y discusiones
• Consulta el repositorio de GitHub para problemas y actualizaciones
• Contacta a nuestro equipo de soporte para asistencia