GitHub Repository
La plantilla base de Expo, React Native y Dodo Payments.
Descripción general
La plantilla base de Expo es una aplicación de Expo funcional que vende un plan de suscripción mediante el checkout alojado de Dodo Payments. Tiene dos partes: una aplicación de Expo Router en TypeScript y un pequeño servidor de Express enserver/ que crea sesiones de checkout con tu API key. La aplicación solicita al servidor una URL de checkout, la abre en el navegador del sistema con expo-web-browser y recibe el resultado mediante un deep link.
La plantilla base usa Expo SDK 54, Expo Router y TypeScript. La API key permanece en el servidor. La aplicación solo conoce la URL del servidor.
Requisitos previos
- Node.js 18 o posterior.
- Expo CLI o EAS CLI.
- Una cuenta de Dodo Payments con un producto. Crea el producto en Products, dentro del dashboard.
- Un iOS Simulator, un Android Emulator o un dispositivo físico.
Inicio rápido
1
Clone the Repository
Clona el repositorio de la plantilla base y ve al directorio del proyecto:
2
Get Your API Credentials
Obtén tu API key del dashboard de Dodo Payments en modo de prueba:
- API Key: Ve a Developer → API Keys en tu dashboard.
3
Configure Environment Variables
La aplicación y el servidor leen cada uno su propio archivo En En el archivo
.env. Copia ambos archivos de ejemplo:server/.env, añade tu API key. DODOPAYMENTS_RETURN_URL debe usar el scheme de app.json, que es dodoexpo en la plantilla base:server/.env
.env raíz, establece EXPO_PUBLIC_BACKEND_URL en la URL del servidor, por ejemplo, http://localhost:3000. La aplicación envía las solicitudes de checkout a EXPO_PUBLIC_BACKEND_URL/checkout.Después, abre server/server.js y sustituye your-product-id por el ID de tu producto. Los ID de producto comienzan con pdt_.4
Install Dependencies
Instala los paquetes para la aplicación y el servidor:
5
Start the Development Server
Inicia el backend en una terminal y, después, inicia Expo en una segunda terminal:Pulsa
i para el iOS Simulator o a para el Android Emulator, o escanea el código QR en tu dispositivo. El proyecto incluye expo-dev-client, y el enlace de retorno dodoexpo:// necesita el esquema propio de tu aplicación, así que ejecuta la aplicación en una compilación de desarrollo (npx expo run:ios o npx expo run:android) en lugar de Expo Go.Un dispositivo físico no puede acceder a localhost en tu ordenador. Para probar en un dispositivo, establece EXPO_PUBLIC_BACKEND_URL en la dirección de red local de tu ordenador, por ejemplo, http://192.168.1.10:3000.La pantalla de inicio muestra una tarjeta del plan con un botón de checkout. Tócalo para abrir el checkout, paga con la tarjeta de prueba
4242 4242 4242 4242 y la aplicación abrirá su pantalla de resultado del pago.Qué incluye
La plantilla base incluye:Checkout Integration
Un servidor de demostración que crea sesiones de checkout y un servicio de la aplicación que las solicita y abre.
Payment Handling
Una pantalla de resultados que lee
status del deep link de dodoexpo://payment/result y muestra si la operación tuvo éxito o falló.TypeScript Support
Configuración de TypeScript con tipos para la solicitud y la respuesta de checkout.
Expo Router
Navegación basada en archivos con Expo Router, incluido un diseño de pestañas y la ruta de resultado del pago.
Estructura del proyecto
Estos son los archivos principales del repositorio:Próximos pasos
Después de ejecutar la plantilla base:1
Create Your Products
Añade productos en tu dashboard de Dodo Payments y usa sus ID en
server/server.js.2
Customize the Integration
Cambia el texto del plan en
config/product.ts y cambia el nombre de la aplicación, scheme y los bundle identifiers en app.json. Si cambias scheme, actualiza DODOPAYMENTS_RETURN_URL para que coincida.3
Test on Real Devices
Prueba el flujo de pago y el retorno mediante deep link en dispositivos físicos iOS y Android.
4
Go Live
Sustituye el servidor de demostración por tu propio backend, que autentique a los usuarios y conceda acceso a partir de webhooks. Después, cambia a una API key de modo activo y compila tu aplicación para producción.
Compilación para producción
Crea binarios listos para las tiendas con EAS Build:1
Install EAS CLI
2
Configure EAS
El repositorio no tiene ningún
eas.json. Este comando crea uno:3
Build Your App
Para iOS:Para Android:
Recursos adicionales
Mobile Integration Guide
Los SDK de checkout para móviles, la configuración de deep links y los ajustes de checkout para móviles.
Integration Guide
Sesiones de checkout, enlaces de pago y webhooks.
API Reference
Cada endpoint de la API de Dodo Payments.
Soporte
Para obtener ayuda con la plantilla base:- Haz preguntas en la comunidad de Discord.
- Informa de problemas en el repositorio de GitHub.
- Envía un correo electrónico al equipo de soporte.