Vai al contenuto principale

Repository GitHub

Boilerplate completo Expo + React Native + Dodo Payments

​
Panoramica

Un boilerplate pronto per la produzione per integrare Dodo Payments nelle applicazioni Expo/React Native. Questo template include la creazione di sessioni di checkout, gestione dei pagamenti e una corretta configurazione di TypeScript per aiutarti a iniziare ad accettare pagamenti nella tua app mobile rapidamente.
Questo boilerplate utilizza Expo SDK con TypeScript e include implementazioni di esempio per sessioni di checkout e elaborazione dei pagamenti.

​
Requisiti

  • Node.js 18+
  • Expo CLI o EAS CLI
  • Account Dodo Payments (chiave API dal dashboard)
  • Simulatore iOS o Emulatore Android (o dispositivo fisico)

​
Avvio Veloce

1

Clona il Repository

Clona il repository del boilerplate e naviga nella directory del progetto:
git clone https://github.com/dodopayments/expo-boilerplate.git
cd expo-boilerplate
2

Ottieni le tue Credenziali API

Ottieni le tue credenziali dal dashboard di Dodo Payments in Modalità Test:
  • Chiave API: Naviga su Sviluppatore → Chiavi API nel tuo dashboard
Inizia con la Modalità Test per testare in sicurezza la tua integrazione senza elaborare pagamenti reali.
3

Configura le Variabili d'Ambiente

Crea un .env file nella directory principale:
touch .env
Aggiungi le tue credenziali Dodo Payments:
.env
EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here
Non impegnare mai il tuo .env file nel controllo di versione. È già incluso in .gitignore.
4

Installa le Dipendenze

Installa i pacchetti npm richiesti:
npm install
5

Avvia il Server di Sviluppo

Avvia il server di sviluppo Expo:
npx expo start
Scansiona il codice QR con l’app Expo Go sul tuo dispositivo, oppure premi i per il simulatore iOS o a per l’emulatore Android.
Sei pronto per iniziare a costruire! Il boilerplate include schermate e componenti di esempio per aiutarti a comprendere l’integrazione.

​
Cosa è Incluso

Il boilerplate viene fornito con essenziali pre-configurati:

Integrazione del Checkout

Implementazione di esempio per la creazione e gestione delle sessioni di checkout

Gestione dei Pagamenti

Flusso di pagamento completo con gestione di successo e errore

Supporto per TypeScript

Configurazione completa di TypeScript con definizioni di tipo appropriate

Router Expo

Configurazione della navigazione con Router Expo per un routing senza soluzione di continuità

​
Struttura del Progetto

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

​
Prossimi Passi

Una volta che hai il boilerplate in esecuzione:
1

Crea i Tuoi Prodotti

Aggiungi prodotti nel tuo dashboard Dodo Payments per abilitare la funzionalità di checkout.
2

Personalizza l'Integrazione

Adatta il codice di esempio per soddisfare le esigenze e il design della tua applicazione.
3

Test su Dispositivi Reali

Testa il flusso di pagamento su dispositivi fisici per assicurarti che tutto funzioni correttamente.
4

Vai in Produzione

Quando sei pronto, passa alle chiavi API in Modalità Live e costruisci la tua app per la produzione.

​
Costruire per la Produzione

1

Installa EAS CLI

npm install -g eas-cli
2

Configura EAS

eas build:configure
3

Costruisci la Tua App

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

​
Risorse Aggiuntive

Guida all'Integrazione Mobile

Guida dettagliata per implementare pagamenti nelle app mobili

Integrazione React Native

Documentazione specifica per l’integrazione React Native

Guida all'Integrazione

Guida dettagliata per implementare pagamenti una tantum

Riferimento API

Esplora la documentazione completa dell’API Dodo Payments

​
Supporto

Hai bisogno di aiuto con il boilerplate?