Langsung ke konten utama

GitHub Repository

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 menyertakan 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

Clone the Repository

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

Get Your API Credentials

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

Configure Environment Variables

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 meng-commit file .env ke kontrol versi. File tersebut sudah termasuk dalam .gitignore.
4

Install Dependencies

Pasang paket npm yang diperlukan:
npm install
5

Start the Development Server

Jalankan 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 memulai pengembangan! 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:

Checkout Integration

Implementasi contoh untuk membuat dan menangani sesi checkout

Payment Handling

Alur pembayaran lengkap dengan penanganan sukses dan kesalahan

TypeScript Support

Konfigurasi TypeScript lengkap dengan definisi tipe yang tepat

Expo Router

Pengaturan navigasi dengan Expo Router untuk routing yang lancar

​
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

Create Your Products

Tambahkan produk di dasbor Dodo Payments untuk mengaktifkan fungsionalitas checkout.
2

Customize the Integration

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

Test on Real Devices

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

Go Live

Saat siap, beralihlah ke kunci API Mode Langsung dan bangun aplikasi Anda untuk produksi.

​
Membangun untuk Produksi

1

Install EAS CLI

npm install -g eas-cli
2

Configure EAS

eas build:configure
3

Build Your App

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

​
Sumber Daya Tambahan

Mobile Integration Guide

Panduan rinci untuk mengimplementasikan pembayaran di aplikasi seluler

React Native Integration

Dokumentasi integrasi khusus React Native

Integration Guide

Panduan rinci untuk mengimplementasikan pembayaran sekali bayar

API Reference

Jelajahi dokumentasi lengkap API Dodo Payments

​
Dukungan

Butuh bantuan dengan boilerplate?