Saltar al contenido principal

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:
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?