Saltar al contenido principal

Repositorio de GitHub

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 utiliza Expo SDK con TypeScript e incluye implementaciones de ejemplo para sesiones de checkout 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

Clona el Repositorio

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

Obtén tus Credenciales API

Obtén tus credenciales desde el panel de control de Dodo Payments en Modo de Prueba:
Comienza con el Modo de Prueba para probar tu integración de manera segura sin procesar pagos reales.
3

Configurar Variables de Entorno

Crea un .env archivo 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 cometas tu .env archivo en el control de versiones. Ya está incluido en .gitignore.
4

Instala Dependencias

Instala los paquetes npm requeridos:
npm install
5

Inicia el Servidor de Desarrollo

Inicia el servidor de desarrollo de Expo:
npx expo start
Escanea el código QR con la aplicación Expo Go en tu dispositivo, o presiona i para el simulador de iOS o a para el emulador de Android.
¡Estás listo para comenzar a construir! La plantilla incluye pantallas y componentes de ejemplo para ayudarte a entender la integración.

​
Qué está incluido

La plantilla viene con elementos esenciales preconfigurados:

Integración de Checkout

Implementación de ejemplo para crear y manejar sesiones de checkout

Manejo de Pagos

Flujo de pago completo con manejo de éxito y error

Soporte para TypeScript

Configuración completa de TypeScript con definiciones de tipo adecuadas

Enrutador de Expo

Configuración de navegación con Expo Router para un enrutamiento sin problemas

​
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

Crea tus Productos

Agrega productos en tu panel de control de Dodo Payments para habilitar la funcionalidad de checkout.
2

Personaliza la Integración

Adapta el código de ejemplo para que se ajuste a las necesidades y diseño de tu aplicación.
3

Prueba en Dispositivos Reales

Prueba el flujo de pago en dispositivos físicos para asegurarte de que todo funcione correctamente.
4

Poner en Producción

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

​
Construyendo para Producción

1

Instala EAS CLI

npm install -g eas-cli
2

Configura EAS

eas build:configure
3

Construye tu Aplicación

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

​
Recursos Adicionales

Guía de Integración Móvil

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

Integración de React Native

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

Guía de Integración

Guía detallada para implementar pagos únicos

Referencia de API

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

​
Soporte

¿Necesitas ayuda con la plantilla?