Skip to main content

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 dalam server/ 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.
Bangun dalam test mode, yang menyimulasikan pembayaran tanpa memindahkan uang sungguhan.
3

Configure Environment Variables

Aplikasi dan server masing-masing membaca file .env miliknya sendiri. Salin kedua file contoh:
Di server/.env, tambahkan API key Anda. DODOPAYMENTS_RETURN_URL harus menggunakan scheme dari app.json, yaitu dodoexpo dalam boilerplate:
server/.env
Di root .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_.
Jangan pernah commit file .env ke version control. Root .gitignore sudah mengecualikan .env.Jangan pernah menaruh API key Dodo Payments dalam variabel EXPO_PUBLIC_*. Expo menyematkan variabel ini ke dalam JavaScript bundle, sehingga siapa pun yang mengunduh aplikasi Anda dapat membacanya. Simpan key di server, seperti yang dilakukan boilerplate, dan teruskan hanya checkout_url yang dihasilkan ke aplikasi. Lihat Mobile Integration.
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:
Terakhir diubah pada 26 September 2026