Langsung ke konten utama

Repositori GitHub

Boilerplate lengkap Expo + React Native + Dodo Payments

​
Ikhtisar

Sebuah boilerplate siap produksi untuk mengintegrasikan Dodo Payments ke dalam aplikasi Expo/React Native. Template ini mencakup pembuatan sesi checkout, penanganan pembayaran, dan konfigurasi TypeScript yang tepat untuk membantu Anda mulai menerima pembayaran di aplikasi mobile Anda dengan cepat.
Boilerplate ini menggunakan Expo SDK dengan TypeScript dan mencakup implementasi contoh untuk sesi checkout dan pemrosesan pembayaran.

​
Prasyarat

  • Node.js 18+
  • Expo CLI atau EAS CLI
  • Akun Dodo Payments (API key dari dashboard)
  • Simulator iOS atau Emulator Android (atau perangkat fisik)

​
Memulai dengan Cepat

1

Kloning Repositori

Klon repositori boilerplate dan navigasikan ke direktori proyek:
git clone https://github.com/dodopayments/expo-boilerplate.git
cd expo-boilerplate
2

Dapatkan Kredensial API Anda

Dapatkan kredensial Anda dari dashboard Dodo Payments dalam Mode Uji:
  • API Key: Navigasikan ke Developer → API Keys di dashboard Anda
Mulailah dengan Mode Uji untuk menguji integrasi Anda dengan aman tanpa memproses pembayaran nyata.
3

Konfigurasi Variabel Lingkungan

Buat file .env di direktori root:
touch .env
Tambahkan kredensial Dodo Payments Anda:
.env
EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here
Jangan pernah mengkomit file .env Anda ke kontrol versi. File ini sudah termasuk dalam .gitignore.
4

Instal Dependensi

Instal paket npm yang diperlukan:
npm install
5

Mulai Server Pengembangan

Mulai server pengembangan Expo:
npx expo start
Pindai kode QR dengan aplikasi Expo Go di perangkat Anda, atau tekan i untuk simulator iOS atau a untuk emulator Android.
Anda siap untuk mulai membangun! Boilerplate ini mencakup layar dan komponen contoh untuk membantu Anda memahami integrasi.

​
Apa yang Termasuk

Boilerplate ini dilengkapi dengan hal-hal penting yang telah dikonfigurasi sebelumnya:

Integrasi Checkout

Implementasi contoh untuk membuat dan menangani sesi checkout

Penanganan Pembayaran

Alur pembayaran lengkap dengan penanganan sukses dan kesalahan

Dukungan TypeScript

Konfigurasi TypeScript penuh dengan definisi tipe yang tepat

Router Expo

Pengaturan navigasi dengan Router Expo untuk routing yang mulus

​
Struktur Proyek

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

​
Langkah Selanjutnya

Setelah Anda menjalankan boilerplate:
1

Buat Produk Anda

Tambahkan produk di dashboard Dodo Payments Anda untuk mengaktifkan fungsionalitas checkout.
2

Sesuaikan Integrasi

Sesuaikan kode contoh agar sesuai dengan kebutuhan dan desain aplikasi Anda.
3

Uji di Perangkat Nyata

Uji alur pembayaran di perangkat fisik untuk memastikan semuanya berfungsi dengan baik.
4

Go Live

Ketika siap, beralih ke kunci API Mode Live dan bangun aplikasi Anda untuk produksi.

​
Membangun untuk Produksi

1

Instal EAS CLI

npm install -g eas-cli
2

Konfigurasi EAS

eas build:configure
3

Bangun Aplikasi Anda

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

​
Sumber Daya Tambahan

Panduan Integrasi Mobile

Panduan rinci untuk menerapkan pembayaran di aplikasi mobile

Integrasi React Native

Dokumentasi integrasi khusus React Native

Panduan Integrasi

Panduan rinci untuk menerapkan pembayaran satu kali

Referensi API

Jelajahi dokumentasi lengkap API Dodo Payments

​
Dukungan

Butuh bantuan dengan boilerplate?