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

# Plugin Framer

> Integrasikan fungsionalitas checkout Dodo Payments ke dalam proyek Framer Anda dengan plugin kami yang kuat. Terima pembayaran dengan pengalaman checkout yang dapat disesuaikan.

## Ikhtisar

Plugin Framer Dodo Payments mengintegrasikan pemrosesan pembayaran ke dalam situs web Framer Anda dengan mulus. Buat pengalaman checkout yang dapat disesuaikan dengan dukungan untuk lingkungan pengujian dan produksi.

<Card title="Official Plugin" icon="link" href="https://www.framer.com/marketplace/plugins/dodo-payments">
  Akses plugin resmi Dodo Payments di marketplace Framer.
</Card>

## Fitur

<CardGroup cols={2}>
  <Card title="Hosted or Overlay Checkout" icon="credit-card">
    Pilih alur halaman penuh atau overlay inline yang terasa alami di situs Anda.
  </Card>

  <Card title="Drag-and-Drop Setup" icon="hand-pointer">
    Tambahkan komponen, tempel kunci Anda, terbitkan.
  </Card>

  <Card title="Instant Digital Delivery" icon="envelope">
    Kirim tautan unduhan aman atau kunci lisensi segera setelah pembayaran selesai.
  </Card>

  <Card title="Worldwide Coverage" icon="globe">
    Akuisisi setingkat bank di enam benua, metode lokal sudah terintegrasi.
  </Card>

  <Card title="Automatic Tax & Invoicing" icon="receipt">
    Pajak pertambahan nilai, GST, pajak penjualan, dan tanda terima ditangani untuk setiap pesanan.
  </Card>

  <Card title="No-Code Subscriptions" icon="toggle-on">
    Hidupkan sakelar untuk menjual paket langganan produk Anda.
  </Card>
</CardGroup>

## Panduan Pengaturan

<Steps>
  <Step title="Generate API Key">
    Kunjungi [Dodo Payments Dashboard](https://app.dodopayments.com/developer/api-keys) dan buat kunci API baru.

    <Tabs>
      <Tab title="Live Mode">
        Untuk penggunaan produksi dengan pemrosesan pembayaran nyata.
      </Tab>

      <Tab title="Test Mode">
        Sempurna untuk pengembangan dan pengujian tanpa biaya nyata.
      </Tab>
    </Tabs>

    <Check>
      Salin kunci API Anda dengan aman - Anda akan membutuhkannya untuk langkah berikutnya.
    </Check>
  </Step>

  <Step title="Authenticate Plugin">
    1. Buka plugin Dodo Payments di Framer
    2. Arahkan ke halaman Autentikasi
    3. Tempel kunci API Anda
    4. Pilih mode yang sesuai (Test atau Live)
    5. Klik **Continue** untuk mengautentikasi

    <Warning>
      Jaga kunci API Anda tetap aman dan jangan pernah membagikannya secara publik.
    </Warning>
  </Step>

  <Step title="Manage Products">
    Setelah autentikasi, Anda akan melihat daftar produk Anda:

    * **Produk yang Ada**: Ditampilkan secara otomatis
    * **Tidak ada produk**: Klik tombol **Plus (+)** di sebelah 'Produk'

    <Info>
      Anda akan diarahkan ke Dodo Payments Dashboard untuk membuat produk dengan harga, deskripsi, dan pengaturan.
    </Info>
  </Step>

  <Step title="Add Buy Buttons">
    1. Pilih produk dari daftar yang tersedia
    2. Klik tombol `Add Buy Button`
    3. Tombol beli dengan teks `Buy {product_name}` akan ditambahkan ke kanvas Anda

    <Warning>
      Tombol Tambah Beli akan dinonaktifkan jika Anda tidak memiliki izin proyek yang benar.
    </Warning>
  </Step>
</Steps>

## Kustomisasi

<Steps>
  <Step title="Select Checkout Experience">
    Pilih pengalaman checkout yang Anda sukai:

    * **Overlay (Embedded)**: Checkout muncul sebagai overlay dalam proyek Framer Anda, menjaga pengguna tetap di situs Anda.
    * **Hosted**: Pengguna diarahkan ke halaman checkout yang dihosting Dodo Payments untuk pengalaman yang lebih lancar.
  </Step>

  <Step title="Customize Appearance Options">
    Sesuaikan pengalaman checkout Anda dengan pengaturan tampilan berikut:

    * **Checkout Theme**: Pilih antara tema terang atau gelap untuk menyesuaikan estetika merek Anda.
    * **Button Label**: Sesuaikan teks (misal, 'Buy Now', 'Purchase', 'Get Started').
    * **Button Styles**: Sesuaikan warna, font, ukuran, dan properti gaya lainnya.
    * **Return URL**: Tetapkan halaman Framer agar pengguna kembali setelah checkout.
  </Step>
</Steps>

## Pemecahan Masalah

<AccordionGroup>
  <Accordion title="Authentication Issues">
    **Masalah**: Plugin gagal mengautentikasi

    **Solusi**:

    * Verifikasi kunci API Anda benar
    * Pastikan Anda menggunakan mode yang benar (Test/Live)
    * Periksa koneksi internet Anda
  </Accordion>

  <Accordion title="Button Creation Issues">
    **Masalah**: Tombol Tambah Beli dinonaktifkan

    **Solusi**:

    * Verifikasi Anda memiliki izin yang benar di proyek Framer Anda
    * Pastikan Anda terautentikasi dengan benar
    * Coba muat ulang plugin
  </Accordion>

  <Accordion title="Product Display Issues">
    **Masalah**: Produk tidak muncul

    **Solusi**:

    * Pastikan Anda telah membuat produk di dashboard Dodo Payments
    * Periksa bahwa kunci API Anda memiliki izin yang benar
    * Coba autentikasi ulang
  </Accordion>
</AccordionGroup>