Expo Boilerplate

GitHub Repository

Il boilerplate Expo, React Native e Dodo Payments.

Panoramica

Il boilerplate Expo è un’app Expo funzionante che vende un piano di abbonamento tramite il checkout ospitato di Dodo Payments. È composto da due parti: un’app Expo Router in TypeScript e un piccolo server Express in server/ che crea sessioni di checkout con la tua API key. L’app richiede al server un URL di checkout, lo apre nel browser di sistema con expo-web-browser e riceve il risultato tramite un deep link.

Il boilerplate usa Expo SDK 54, Expo Router e TypeScript. L’API key rimane sul server. L’app conosce solo l’URL del server.

Requisiti

Node.js 18 o versione successiva.
Expo CLI o EAS CLI.
Un account Dodo Payments con un prodotto. Crea il prodotto nella sezione Products della dashboard.
Un iOS Simulator, un Android Emulator o un dispositivo fisico.

Avvio Veloce

Clone the Repository

Clona il repository del boilerplate e accedi alla directory del progetto:

git clone https://github.com/dodopayments/expo-boilerplate.git
cd expo-boilerplate

Get Your API Credentials

Recupera la tua API key dalla dashboard di Dodo Payments in modalità test:

API Key: vai a Developer → API Keys nella tua dashboard.

Esegui la build in modalità test, che simula i pagamenti senza trasferire denaro reale.

Configure Environment Variables

L’app e il server leggono ciascuno il proprio file .env. Copia entrambi i file di esempio:

cp .env.example .env
cp server/.env.example server/.env

In server/.env, aggiungi la tua API key. DODOPAYMENTS_RETURN_URL deve usare scheme proveniente da app.json, che nel boilerplate è dodoexpo:

server/.env

DODOPAYMENTS_API_KEY=your_test_api_key_here
DODOPAYMENTS_ENVIRONMENT=test_mode
DODOPAYMENTS_RETURN_URL=dodoexpo://payment/result
PORT=3000

Nel file .env principale, imposta EXPO_PUBLIC_BACKEND_URL sull’URL del server, ad esempio http://localhost:3000. L’app invia le richieste di checkout a EXPO_PUBLIC_BACKEND_URL/checkout.Quindi apri server/server.js e sostituisci your-product-id con l’ID del tuo prodotto. Gli ID dei prodotti iniziano con pdt_.

Non eseguire mai il commit dei file .env nel controllo versione. Il file .gitignore principale esclude già .env.Non inserire mai una API key di Dodo Payments in una variabile EXPO_PUBLIC_*. Expo incorpora queste variabili nel JavaScript bundle, quindi chiunque scarichi la tua app può leggerle. Mantieni la key sul server, come fa il boilerplate, e passa all’app solo checkout_url risultante. Consulta Mobile Integration.

Install Dependencies

Installa i package per l’app e per il server:

npm install
cd server && npm install && cd ..

Start the Development Server

Avvia il backend in un terminale, quindi avvia Expo in un secondo terminale:

# Terminal 1: the checkout server
cd server && npm run dev

# Terminal 2: the Expo app
npx expo start

Premi i per il simulatore iOS o a per l’emulatore Android, oppure scansiona il codice QR sul tuo dispositivo. Il progetto include expo-dev-client e il link di ritorno dodoexpo:// richiede lo schema della tua app, quindi esegui l’app in una build di sviluppo (npx expo run:ios o npx expo run:android) anziché in Expo Go.Un dispositivo fisico non può raggiungere localhost sul tuo computer. Per eseguire il test su un dispositivo, imposta EXPO_PUBLIC_BACKEND_URL sull’indirizzo di rete locale del computer, ad esempio http://192.168.1.10:3000.

La schermata iniziale mostra una scheda del piano con un pulsante di checkout. Toccalo per aprire il checkout, paga con la carta di test 4242 4242 4242 4242 e l’app aprirà la schermata dei risultati del pagamento.

Cosa è incluso

Il boilerplate include:

Checkout Integration

Un server dimostrativo che crea sessioni di checkout e un app service che le richiede e le apre.

Payment Handling

Una schermata dei risultati che legge status dal deep link dodoexpo://payment/result e mostra l’esito positivo o negativo.

TypeScript Support

Configurazione TypeScript con i tipi per la richiesta e la risposta di checkout.

Expo Router

Navigazione basata sui file con Expo Router, inclusi un layout a schede e la route dei risultati del pagamento.

Struttura del progetto

Questi sono i file principali del repository:

expo-boilerplate/
├── app/
│   ├── (tabs)/
│   │   ├── index.tsx          # Home screen with the plan card and checkout button
│   │   └── profile.tsx
│   ├── payment/
│   │   └── result.tsx         # Payment result screen (deep-link target)
│   └── _layout.tsx            # Root layout and deep-link handling
├── components/
│   └── payments/              # PaymentButton, ProductCard, and related UI
├── config/
│   ├── env.ts                 # Reads EXPO_PUBLIC_BACKEND_URL
│   └── product.ts             # Plan name, price text, and features
├── services/
│   └── dodo-payments.ts       # Requests a checkout URL and opens it
├── types/
│   └── dodo-payments.ts       # Checkout types
├── server/                    # Demo Express server that creates checkout sessions
│   ├── server.js
│   └── .env.example
├── .env.example               # App environment variables template
├── app.json                   # App name, scheme, and bundle identifiers
└── package.json

Prossimi passaggi

Dopo aver avviato il boilerplate:

Create Your Products

Aggiungi i prodotti nella tua dashboard di Dodo Payments e usa i relativi ID in server/server.js.

Customize the Integration

Modifica il testo del piano in config/product.ts e cambia il nome dell’app, scheme e gli identificatori del bundle in app.json. Se modifichi scheme, aggiorna DODOPAYMENTS_RETURN_URL in modo che corrisponda.

Test on Real Devices

Testa il flusso di pagamento e il ritorno tramite deep link su dispositivi iOS e Android fisici.

Go Live

Sostituisci il server dimostrativo con un tuo backend che autentichi gli utenti e conceda l’accesso tramite webhook. Quindi passa a una API key in modalità live e crea la build della tua app per la produzione.

Creazione per la produzione

Crea binary pronti per gli store con EAS Build:

Install EAS CLI

npm install -g eas-cli

Configure EAS

Il repository non contiene eas.json. Questo comando ne crea uno:

eas build:configure

Build Your App

Per iOS:

eas build --platform ios

Per Android:

eas build --platform android

Risorse aggiuntive

Mobile Integration Guide

Gli SDK mobile per il checkout, la configurazione dei deep link e le impostazioni del checkout mobile.

Integration Guide

Sessioni di checkout, payment link e webhook.

API Reference

Ogni endpoint dell’API di Dodo Payments.

Supporto

Per ricevere assistenza sul boilerplate:

Fai domande nella community Discord.
Segnala i problemi nel repository GitHub.
Invia un’email al team di supporto.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

GitHub Repository

Panoramica

Requisiti

Avvio Veloce

Cosa è incluso

Checkout Integration

Payment Handling

TypeScript Support

Expo Router

Struttura del progetto

Prossimi passaggi

Creazione per la produzione

Risorse aggiuntive

Mobile Integration Guide

Integration Guide

API Reference

Supporto

GitHub Repository

​Panoramica

​Requisiti

​Avvio Veloce

​Cosa è incluso

Checkout Integration

Payment Handling

TypeScript Support

Expo Router

​Struttura del progetto

​Prossimi passaggi

​Creazione per la produzione

​Risorse aggiuntive

Mobile Integration Guide

Integration Guide

API Reference

​Supporto

Panoramica

Requisiti

Avvio Veloce

Cosa è incluso

Struttura del progetto

Prossimi passaggi

Creazione per la produzione

Risorse aggiuntive

Supporto