GitHub Repository
Boilerplate Expo, React Native, dan Dodo Payments.
Ikhtisar
Boilerplate Expo adalah aplikasi Expo yang berfungsi dan menjual paket langganan melalui hosted checkout Dodo Payments. Aplikasi ini memiliki dua bagian: aplikasi Expo Router dalam TypeScript, dan server Express kecil dalamserver/ yang membuat sesi checkout dengan API key Anda. Aplikasi meminta URL checkout dari server, membukanya di browser sistem dengan expo-web-browser, lalu menerima hasilnya melalui deep link.
Boilerplate ini menggunakan Expo SDK 54, Expo Router, dan TypeScript. API key tetap berada di server. Aplikasi hanya mengetahui URL server.
Prasyarat
- Node.js 18 atau yang lebih baru.
- Expo CLI atau EAS CLI.
- Akun Dodo Payments dengan sebuah produk. Buat produk di bagian Products pada dashboard.
- iOS Simulator, Android Emulator, atau perangkat fisik.
Memulai dengan Cepat
1
Clone the Repository
Clone repositori boilerplate dan buka direktori proyek:
2
Get Your API Credentials
Dapatkan API key Anda dari dashboard Dodo Payments dalam test mode:
- API Key: Buka Developer → API Keys di dashboard.
3
Configure Environment Variables
Aplikasi dan server masing-masing membaca file Di Di root
.env miliknya sendiri. Salin kedua file contoh:server/.env, tambahkan API key Anda. DODOPAYMENTS_RETURN_URL harus menggunakan scheme dari app.json, yaitu dodoexpo dalam boilerplate:server/.env
.env, atur EXPO_PUBLIC_BACKEND_URL ke URL server, misalnya http://localhost:3000. Aplikasi mengirimkan permintaan checkout ke EXPO_PUBLIC_BACKEND_URL/checkout.Kemudian buka server/server.js dan ganti your-product-id dengan ID produk Anda. ID produk diawali dengan pdt_.4
Install Dependencies
Instal paket untuk aplikasi dan server:
5
Start the Development Server
Mulai backend di satu terminal, lalu mulai Expo di terminal kedua:Tekan
i untuk iOS Simulator atau a untuk Android Emulator, atau pindai kode QR di perangkat Anda. Proyek ini menyertakan expo-dev-client, dan tautan kembali dodoexpo:// memerlukan skema milik aplikasi Anda sendiri, jadi jalankan aplikasi dalam development build (npx expo run:ios atau npx expo run:android), bukan melalui Expo Go.Perangkat fisik tidak dapat mengakses localhost di komputer Anda. Untuk menguji pada perangkat, atur EXPO_PUBLIC_BACKEND_URL ke alamat jaringan lokal komputer Anda, misalnya http://192.168.1.10:3000.Layar beranda menampilkan kartu paket dengan tombol checkout. Ketuk tombol tersebut untuk membuka checkout, bayar menggunakan kartu test
4242 4242 4242 4242, dan aplikasi akan membuka layar hasil pembayaran.Yang Disertakan
Boilerplate ini mencakup:Checkout Integration
Server demo yang membuat sesi checkout, dan service aplikasi yang meminta serta membukanya.
Payment Handling
Layar hasil yang membaca
status dari deep link dodoexpo://payment/result dan menampilkan keberhasilan atau kegagalan.TypeScript Support
Konfigurasi TypeScript dengan types untuk checkout request dan response.
Expo Router
Navigasi berbasis file dengan Expo Router, termasuk layout tab dan route hasil pembayaran.
Struktur Proyek
Berikut adalah file utama dalam repositori:Langkah Berikutnya
Setelah boilerplate berjalan:1
Create Your Products
Tambahkan produk di dashboard Dodo Payments, lalu gunakan ID-nya dalam
server/server.js.2
Customize the Integration
Ubah teks paket di
config/product.ts, lalu ubah nama aplikasi, scheme, dan bundle identifier di app.json. Jika Anda mengubah scheme, perbarui DODOPAYMENTS_RETURN_URL agar sesuai.3
Test on Real Devices
Uji alur pembayaran dan return deep link pada perangkat fisik iOS dan Android.
4
Go Live
Ganti server demo dengan backend Anda sendiri yang mengautentikasi pengguna dan memberikan akses dari webhook. Kemudian beralih ke live mode API key dan build aplikasi Anda untuk production.
Build untuk Production
Buat binary yang siap untuk store dengan EAS Build:1
Install EAS CLI
2
Configure EAS
Repositori ini tidak memiliki
eas.json. Perintah ini akan membuatnya:3
Build Your App
Untuk iOS:Untuk Android:
Sumber Daya Tambahan
Mobile Integration Guide
SDK checkout mobile, penyiapan deep link, dan pengaturan checkout mobile.
Integration Guide
Sesi checkout, payment link, dan webhook.
API Reference
Setiap endpoint API Dodo Payments.
Dukungan
Untuk bantuan terkait boilerplate:- Ajukan pertanyaan di komunitas Discord.
- Laporkan masalah di repositori GitHub.
- Kirim email ke tim dukungan.