Koneksi Stripe

Persyaratan

Sebelum mengintegrasikan Stripe, pastikan Anda memiliki:

• Aplikasi MGX yang berfungsi.
• Proyek MGX sudah terhubung ke Proyek Supabase. (Pelajari lebih lanjut tentang Supabase.)
• Produk yang sudah dibuat beserta harga yang sesuai di dashboard Stripe Anda.

Catatan: Mode pratinjau tidak dapat digunakan untuk menguji fungsi pembayaran. Deploy app MGX Anda dan alihkan Stripe ke Test Mode untuk memverifikasi integrasi.

Kartu uji:

• Nomor Kartu: 4242 4242 4242 4242
• Tanggal kedaluwarsa: Tanggal apa pun di masa mendatang
• CVC: Nomor 3 digit apa pun

Penyiapan Pembayaran Stripe

1. Hubungkan Supabase

   • Klik tombol Supabase di kanan atas MGX
   • Ikuti Panduan Koneksi Supabase untuk memilih Proyek Supabase target Anda
   • Setelah terhubung, Anda dapat mengonfigurasi pengaturan pembayaran melalui Supabase

2. Jelaskan Persyaratan Langganan Anda dalam Bahasa Alami

   • Contoh: Buat sistem pembayaran yang mendukung tiga paket langganan dengan harga $4.99 per minggu, $14.99 per bulan, dan $149.99 per tahun.

   Setelah dikirim, Agen MGX akan membuat tombol konfigurasi. Anda perlu mengisi setidaknya dua kolom.

3. Klik Tombol Add Stripe Secret Key

   

   • Masukkan secret key Stripe Anda pada kolom STRIPE_SECRET_KEY.
   • Untuk setiap paket, masukkan Stripe Price ID yang sesuai pada kolom yang diakhiri dengan PRICE_ID.

   

   Anda dapat mengambil secret key Stripe Anda di sini: https://dashboard.stripe.com/test/apikeys

   Buka Product Catalog > Products, lalu dapatkan price ID dengan salah satu metode berikut:

   • Di daftar "Pricing", klik tombol “More” di sebelah kanan harga yang sesuai, lalu klik "Copy Price ID".

   

   Anda juga dapat langsung mengklik nama harga untuk membuka halaman detail, lalu menyalin price ID yang ditampilkan di sudut kanan atas.

   

   Terakhir, tempelkan setiap price ID dengan akurat ke kolom input yang sesuai.

   

   Catatan: Demi privasi dan keamanan, jangan pernah menempelkan secret key Anda langsung ke chat MGX. Kebocoran dapat memungkinkan akses tidak sah ke akun Stripe Anda. Sebagai gantinya, gunakan tombol "Add API Key" milik MGX untuk menyimpannya dengan aman.

4. Klik Tombol Add Stripe Webhook Secret Key

   

   • Masukkan Webhook Secret Key Anda

5. Cara Menemukan Webhook Secret Key:

   Di Stripe, klik “Developers” di sudut kiri bawah, lalu pilih opsi Webhooks.

   

   Di halaman Webhooks, klik tombol "Add destination".

   

   Pilih event webhook yang sesuai dengan kebutuhan proyek Anda:

   • checkout.session.async_payment_failed
   • checkout.session.async_payment_succeeded
   • checkout.session.completed
   • checkout.session.expired

   

   Setelah mengklik "Continue", pilih "Webhook endpoint."

   

   Masukkan URL endpoint dari Supabase.

   

6. Cara Menemukan URL Endpoint Supabase Anda:

   Klik View Edge Function di MGX.

   

   • Klik untuk memilih edge function dengan sufiks _webhook yang sesuai.

     

   • Di panel Details dari edge function yang sesuai, salin Endpoint URL lalu tempelkan ke Stripe Event Destination.

     

7. Uji Integrasi Anda

   Gunakan Test Mode Stripe untuk menguji pembayaran.

   Detail kartu uji:

   • Nomor kartu: 4242 4242 4242 4242
   • Tanggal kedaluwarsa apa pun di masa mendatang
   • CVC 3 digit apa pun

FAQ

Mengapa saya tidak bisa menguji pembayaran di Preview Mode?

Preview Mode berjalan di lingkungan lokal, yang tidak menyediakan URL Webhook yang dapat diakses secara publik. Anda harus men-deploy app Anda untuk menerima event Stripe.

Bagaimana cara beralih ke Production Mode?

Anda dapat menonaktifkan Test Mode di Stripe Dashboard dan menggunakan Secret Key serta Webhook Secret live Anda.

Bagaimana saya bisa memverifikasi apakah pembayaran uji berhasil?

Setelah menyelesaikan pembayaran uji, buka halaman Payments di Stripe untuk melihat catatan transaksi uji Anda.