> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Expo Boilerplate

> Bangun aplikasi mobile React Native dengan Dodo Payments menggunakan boilerplate Expo kami. Termasuk integrasi checkout, penanganan pembayaran, dan dukungan TypeScript.

<Card title="GitHub Repository" icon="github" href="https://github.com/dodopayments/expo-boilerplate">
  Boilerplate lengkap Expo + React Native + Dodo Payments
</Card>

## 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.

<Info>
  Boilerplate ini menggunakan Expo SDK dengan TypeScript dan menyertakan implementasi contoh untuk sesi checkout dan pemrosesan pembayaran.
</Info>

<Frame>
  <iframe className="w-full aspect-video rounded-md" src="https://www.youtube.com/embed/78N1qw14m0Y" title="Expo Boilerplate Demo | Dodo Payments" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

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

<Steps>
  <Step title="Clone the Repository">
    Clone repositori boilerplate dan masuk ke direktori proyek:

    ```bash theme={null}
    git clone https://github.com/dodopayments/expo-boilerplate.git
    cd expo-boilerplate
    ```
  </Step>

  <Step title="Get Your API Credentials">
    Dapatkan kredensial Anda dari dasbor Dodo Payments dalam Mode Tes:

    * **API Key**: Navigasikan ke **Developer → API Keys** di [dashboard](https://app.dodopayments.com) Anda

    <Tip>
      Mulailah dengan Mode Tes untuk menguji integrasi Anda dengan aman tanpa memproses pembayaran nyata.
    </Tip>
  </Step>

  <Step title="Configure Environment Variables">
    Buat file `.env` di direktori root:

    ```bash theme={null}
    touch .env
    ```

    Tambahkan kredensial Dodo Payments Anda:

    ```bash .env theme={null}
    EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here
    ```

    <Warning>
      Jangan pernah meng-commit file `.env` ke kontrol versi. File tersebut sudah termasuk dalam `.gitignore`.
    </Warning>
  </Step>

  <Step title="Install Dependencies">
    Pasang paket npm yang diperlukan:

    ```bash theme={null}
    npm install
    ```
  </Step>

  <Step title="Start the Development Server">
    Jalankan server pengembangan Expo:

    ```bash theme={null}
    npx expo start
    ```

    Pindai kode QR dengan aplikasi Expo Go di perangkat Anda, atau tekan `i` untuk simulator iOS atau `a` untuk emulator Android.

    <Check>
      Anda siap memulai pengembangan! Boilerplate ini mencakup layar dan komponen contoh untuk membantu Anda memahami integrasi.
    </Check>
  </Step>
</Steps>

## Apa yang Termasuk

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

<CardGroup cols={2}>
  <Card title="Checkout Integration" icon="shopping-cart">
    Implementasi contoh untuk membuat dan menangani sesi checkout
  </Card>

  <Card title="Payment Handling" icon="credit-card">
    Alur pembayaran lengkap dengan penanganan sukses dan kesalahan
  </Card>

  <Card title="TypeScript Support" icon="code">
    Konfigurasi TypeScript lengkap dengan definisi tipe yang tepat
  </Card>

  <Card title="Expo Router" icon="route">
    Pengaturan navigasi dengan Expo Router untuk routing yang lancar
  </Card>
</CardGroup>

## 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:

<Steps>
  <Step title="Create Your Products">
    Tambahkan produk di [dasbor Dodo Payments](https://app.dodopayments.com) untuk mengaktifkan fungsionalitas checkout.
  </Step>

  <Step title="Customize the Integration">
    Sesuaikan kode contoh agar sesuai dengan kebutuhan dan desain aplikasi Anda.
  </Step>

  <Step title="Test on Real Devices">
    Uji alur pembayaran di perangkat fisik untuk memastikan semuanya berfungsi dengan benar.
  </Step>

  <Step title="Go Live">
    Saat siap, beralihlah ke kunci API Mode Langsung dan bangun aplikasi Anda untuk produksi.
  </Step>
</Steps>

## Membangun untuk Produksi

<Steps>
  <Step title="Install EAS CLI">
    ```bash theme={null}
    npm install -g eas-cli
    ```
  </Step>

  <Step title="Configure EAS">
    ```bash theme={null}
    eas build:configure
    ```
  </Step>

  <Step title="Build Your App">
    Untuk iOS:

    ```bash theme={null}
    eas build --platform ios
    ```

    Untuk Android:

    ```bash theme={null}
    eas build --platform android
    ```
  </Step>
</Steps>

## Sumber Daya Tambahan

<CardGroup cols={2}>
  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    Panduan rinci untuk mengimplementasikan pembayaran di aplikasi seluler
  </Card>

  <Card title="React Native Integration" icon="react" href="/developer-resources/react-native-integration">
    Dokumentasi integrasi khusus React Native
  </Card>

  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    Panduan rinci untuk mengimplementasikan pembayaran sekali bayar
  </Card>

  <Card title="API Reference" icon="brackets-curly" href="/api-reference/introduction">
    Jelajahi dokumentasi lengkap API Dodo Payments
  </Card>
</CardGroup>

## Dukungan

Butuh bantuan dengan boilerplate?

* Bergabunglah dengan [komunitas Discord kami](https://discord.gg/bYqAp4ayYh) untuk pertanyaan dan diskusi
* Periksa [repositori GitHub](https://github.com/dodopayments/expo-boilerplate) untuk masalah dan pembaruan
* Hubungi [tim dukungan kami](mailto:support@dodopayments.com) untuk bantuan