- Proyek Next.js yang sudah ada
- Akses Stripe Test Mode
Akses repositori tidak wajib. Akses proyek hanya diperlukan jika Anda ingin Bacodo mengintegrasikannya langsung.
Pengaya Next.js
Tambahkan Stripe Checkout atau Elemen Pembayaran, PaymentIntents, dan webhook bertanda tangan ke proyek Router Aplikasi Next.js Anda yang sudah ada tanpa membuat kabel checkout, 3-D Secure, dan Route Handler dari awal.
Mulai
$145
USD · Next.js
Integrasi Stripe untuk Next.js · Next.js
Requirements
Akses repositori tidak wajib. Akses proyek hanya diperlukan jika Anda ingin Bacodo mengintegrasikannya langsung.
Fungsinya
Bacodo mengintegrasikan Stripe ke dalam proyek Next.js yang sudah Anda miliki. Setelah serah terima, implementasinya ada di repo Anda sehingga tim Anda dapat membaca, mengubah, dan memperluasnya. Anda masih memiliki akun Stripe, kunci API, dan biaya Stripe.
Pembayaran kartu dan dompet di Next.js memerlukan PaymentIntents, Checkout atau Elemen Pembayaran, Aman 3-D, kunci rahasia khusus server, dan Route Handler webhook yang memverifikasi tanda tangan. Membangun jalur itu dari awal adalah hal yang lambat dan mudah terjadi kesalahan.
Kami menambahkan Stripe.js pada klien Next.js, Route Handler (atau Tindakan Server) yang membuat PaymentIntents atau Checkout Sessions, verifikasi webhook, halaman sukses/batal, dan konfigurasi lingkungan pengujian/langsung untuk Router Aplikasi.
Tim Anda melewatkan implementasi produksi pertama Stripe Next.js: Pengendali Router Aplikasi, SCA, status kesalahan, dan serah terima yang mendokumentasikan cara mengirimkan kunci langsung.
Pengembang, tim teknis, agensi, dan startup yang sudah memiliki aplikasi Next.js dan menginginkan jalur pembayaran produksi yang dapat mereka pertahankan.
Fitur utama
Gunakan Stripe Checkout yang dihosting atau Elemen Pembayaran yang tertanam di halaman checkout Next.js Anda. Tombol entri kartu, 3-D Secure, dan dompet tetap berada di jalur PCI Stripe — bukan formulir kartu khusus yang Anda simpan.
Buat Sesi Checkout atau PaymentIntents di Route Handler Next.js. Browser hanya menggunakan kunci yang dapat dipublikasikan dan rahasia klien — kunci rahasia tidak pernah dikirimkan dalam Komponen Klien.
Aktifkan tombol dompet di Stripe Checkout atau Elemen Pembayaran ketika akun dan domain Stripe Anda diverifikasi. Penggantian Next.js tetap pada pembayaran kartu.
Kirimkan aplikasi Next.js dengan kunci pengujian Stripe, kartu pengujian, dan peralihan yang terdokumentasi ke kunci aktif. Variabel lingkungan Next.js tetap berada di luar paket klien.
Keberhasilan pembayaran di UI Next.js bukanlah sumber kebenaran. Route Handler memverifikasi tanda tangan Stripe dan memperbarui status pesanan atau hak sebelum pemenuhan.
Tangani kartu yang ditolak, Checkout yang dibatalkan, kegagalan jaringan, dan Keamanan 3-D yang tidak lengkap sehingga UI Next.js tidak meninggalkan pelanggan pada halaman mati.
Kasus penggunaan
Anda sudah menerima pesanan atau pemesanan di Next.js dan memerlukan pembayaran kartu tanpa menulis ulang katalog atau alur pemesanan.
Anda memerlukan jalur Stripe yang dapat dipelihara di Next.js, sumber di repo klien, dan peralihan kunci langsung yang terdokumentasi alih-alih prototipe Next.js yang hanya ada satu kali.
Aplikasi Next.js harus mengumpulkan pembayaran pertama atau memperbarui metode pembayaran sementara langganan dan faktur tetap berada di server Anda dan Stripe Billing jika Anda sudah menggunakannya.
Mulailah dengan tagihan pelanggan di aplikasi Next.js. Stripe Connect atau biaya tujuan dapat dicakup secara terpisah jika model pasar Next.js Anda memerlukannya.
Demo
Pratinjau jalur checkout Next.js: tindakan keranjang atau pembayaran, Elemen Checkout atau Pembayaran, konfirmasi, dan status kegagalan. Sandbox langsung terhadap akun Stripe Anda tersedia setelah pemeriksaan kompatibilitas. Halaman ini tidak memproses tagihan sebenarnya.
Cara kerja
Alur kerja add-on Bacodo standar, dengan pemeriksaan khusus Next.js dan Stripe untuk App Router, Route Handler, dan lapisan data Anda yang ada.
01
Konfirmasikan Integrasi Stripe untuk Next.js dan apakah checkout hari pertama dihosting di Checkout atau Elemen Pembayaran.
02
Tinjau versi Next.js, Router Aplikasi vs Router Halaman, UI checkout yang ada, database, dan apakah Anda sudah memiliki akun Stripe.
03
Tambahkan Stripe.js, halaman checkout, Route Handler untuk sesi atau PaymentIntents, dan handler webhook yang ditandatangani.
04
Kunci pengujian Wire Next.js, titik akhir webhook, dan konfigurasi server khusus lingkungan.
05
Jalankan kartu pengujian Stripe, 3-D Secure, jalur pembatalan/penolakan, dan konfirmasi webhook di aplikasi Next.js.
06
Kirimkan sumber Next.js, catatan konfigurasi, dan daftar periksa live-key. Implementasi Next.js adalah milik Anda untuk dipertahankan.
Arsitektur
Browser Next.js tidak pernah berkomunikasi dengan Stripe dengan kunci rahasia. Elemen Checkout atau Pembayaran menggunakan rahasia klien dari Route Handler. Stripe memberi tahu webhook Next.js Anda sebelum Anda memenuhinya.
Teknologi yang didukung
Next.js yang stabil saat ini dengan App Router adalah defaultnya. Pages Router dapat dicakup jika itu yang sudah digunakan oleh repo Next.js Anda.
Stripe.js resmi di klien Next.js dan stripe di server untuk sesi, PaymentIntents, dan verifikasi webhook.
Pembaruan pesanan atau hak tetap berada di database atau API yang sudah digunakan aplikasi Next.js Anda. Kami tidak mengganti backend Anda dengan layanan khusus Bacodo.
Akun Stripe Anda, kunci pengujian dan aktif yang digunakan oleh Next.js, titik akhir webhook, dan peristiwa Dasbor. Biaya pemrosesan Stripe tetap menjadi tanggungan Stripe.
Host yang dapat menjalankan Next.js Route Handler dan menerima webhook Stripe (misalnya Vercel atau server Node). Ekspor statis saja tidak cukup untuk jalur pembayaran ini.
Yang termasuk
Pricing
Harga ini hanya untuk platform Next.js. Itu tidak menggunakan harga tambahan Django atau Flutter.
Integrasi Stripe untuk Next.js
Tambahkan pembayaran Stripe siap produksi ke aplikasi Next.js yang sudah ada dan simpan kode sumbernya.
Persyaratan
$145
sekali bayarNext.js
Butuh backend?
Checkout aman olehstripe
Penyerahan + keamanan
Integrasi checkout Next.js Stripe yang umum dicakup setelah pemeriksaan kompatibilitas Next.js. Garis waktu bergantung pada UI checkout dan lapisan data Next.js Anda saat ini.
Kartu mode uji, jalur Aman 3-D, pembatalan, dan penolakan dilakukan di aplikasi Next.js sebelum kami serah terima.
Kunci rahasia Stripe dan rahasia penandatanganan webhook tetap berada di lingkungan server. Browser Next.js hanya menerima kunci yang dapat dipublikasikan dan rahasia klien yang berumur pendek.
Route Handler webhook Next.js memverifikasi tanda tangan Stripe sebelum memperbarui status pesanan atau hak.
Kami tidak mengklaim sertifikasi PCI, tidak ada penipuan, atau jaminan tingkat persetujuan. Data kartu Next.js dikumpulkan melalui Stripe Checkout atau Elemen Pembayaran, bukan formulir kartu khusus yang kami simpan.
FAQ
Integrasi Stripe untuk Next.js mencakup Stripe.js, Checkout, atau Elemen Pembayaran di halaman checkout Next.js yang ada, pembuatan PaymentIntent atau Sesi Checkout di Route Handler, pengendali webhook yang ditandatangani, cakupan pengujian, dan catatan serah terima. Anda menerima sumber Next.js di proyek Anda. Biaya Stripe dan akun Stripe Anda terpisah.
Ya. Integrasi Stripe untuk Next.js dibuat untuk proyek Next.js yang sudah Anda miliki. Kami menyesuaikan checkout dan titik masuk pembayaran ke dalam rute dan UI Next.js Anda saat ini alih-alih mengirimkan aplikasi demo terpisah sebagai hasil.
Ya untuk jalur produksi Next.js Stripe. PaymentIntents, Checkout Sessions, dan kunci rahasia harus ada di server. Browser Next.js hanya menerima kunci yang dapat diterbitkan dan rahasia klien. Ekspor Next.js yang hanya bersifat statis tidak dapat menghosting jalur webhook ini.
Integrasi Stripe untuk Next.js menggunakan Stripe.js resmi pada klien dan Stripe Node SDK di Route Handler Next.js. Kami tidak menggabungkan checkout Next.js dalam plugin yang tidak berdokumen kecuali Anda secara eksplisit memerlukannya.
Ya jika akun Stripe, verifikasi domain, dan perangkat Anda mendukungnya. Di Next.js, tombol dompet adalah cakupan opsional. Card Checkout atau Elemen Pembayaran di Next.js tetap menjadi fallback default.
Integrasi Stripe default untuk cakupan Next.js adalah Router Aplikasi. Rute API Router Halaman dapat disertakan jika itu yang sudah digunakan oleh repo Next.js Anda dan kami menyetujuinya selama pemeriksaan kompatibilitas Next.js.
Klien Next.js dapat mengonfirmasi PaymentIntent atau memulai Sesi Checkout melalui Stripe.js. Produk Stripe Billing berulang, portal pelanggan, dan logika faktur langsung ada di server. Karya Next.js yang banyak berlangganan mungkin memerlukan Penawaran Khusus.
Browser Next.js hanya menggunakan kunci Stripe yang dapat diterbitkan. Kunci rahasia dan rahasia penandatanganan webhook tetap berada di variabel lingkungan server yang digunakan oleh Route Handler. Integrasi Stripe untuk Next.js tidak memasukkan kunci rahasia ke dalam Komponen Klien.
Kami menerapkan Integrasi Stripe untuk Next.js terhadap kunci pengujian dan kartu pengujian Stripe terlebih dahulu. Tayang adalah peralihan kunci dan webhook yang terdokumentasi di Dasbor Stripe dan lingkungan server Next.js Anda, bukan aktivasi lisensi tambahan.
Stripe Checkout dan Elemen Pembayaran menangani 3-D Secure melalui Stripe.js. Halaman Next.js harus menjaga alur checkout tetap berjalan hingga Stripe mengembalikan status akhir; Integrasi Stripe untuk Next.js menyambungkan status tersebut secara eksplisit.
Ya untuk pemenuhan setelah Next.js Checkout atau Elemen Pembayaran. UI Next.js bukanlah sumber kebenaran. Route Handler memverifikasi tanda tangan webhook Stripe dan kemudian menandai pesanan telah dibayar, membuka kunci konten, atau memberi tahu pemenuhan.
Ya. Integrasi Stripe untuk Next.js biasanya menyimpan produk, keranjang, dan tombol pembayaran Next.js Anda serta membuka Checkout atau memasang Elemen Pembayaran dari tindakan tersebut. Formulir kartu Next.js khusus yang menyentuh data PAN mentah berada di luar cakupan default karena Checkout atau Elemen Pembayaran adalah jalur PCI yang lebih aman.
Tidak. Anda membuat dan memiliki akun Stripe, kunci API, dan biaya pemrosesan Stripe. Harga tambahan Next.js diterapkan ke proyek Next.js Anda, bukan lisensi pembayaran Bacodo.
Tidak. Barang digital yang dijual di dalam toko aplikasi sering kali masih memerlukan IAP. Integrasi Stripe untuk Next.js adalah untuk pembayaran Stripe di situs web atau aplikasi web Next.js dengan Stripe sebagai jalur pembayaran yang diizinkan untuk jenis produk Anda.
Ya. Metadata PaymentIntent atau Sesi Checkout, catatan pelanggan, dan bidang yang Anda pertahankan setelah konfirmasi webhook diselaraskan dengan model pesanan Next.js yang ada selama Integrasi Stripe untuk Next.js.
Sumber Next.js ada di repo Anda, sehingga tim Anda dapat memeliharanya. Dukungan 30 hari yang disertakan mencakup pertanyaan teknis dan cacat dalam cakupan Integrasi Stripe untuk Next.js yang dikirimkan, bukan pekerjaan fitur Next.js yang tidak terkait.
Selama jangka waktu 30 hari, kami membantu mengatasi kerusakan dalam integrasi Next.js yang disebabkan oleh perubahan Stripe atau Stripe.js yang terdokumentasi. Peningkatan paket Next.js yang berkelanjutan setelah itu adalah pemeliharaan Anda, atau Dukungan Teknis yang Diperpanjang jika Anda membelinya.
Kami mendokumentasikan cara membaca status PaymentIntent atau Sesi Checkout, log Stripe Dashboard, dan pengiriman webhook dari jalur checkout Next.js. Dukungan 30 hari mencakup pemecahan masalah penolakan, penurunan 3-D Secure, dan kunci yang salah dikonfigurasi untuk alur Next.js yang dikirimkan.
Kami mengonfirmasi versi Next.js Anda, Router Aplikasi atau Router Halaman, dan waktu proses Node terhadap Stripe SDK yang kami sematkan pada waktu integrasi. Runtime Next.js yang lebih lama atau sangat bercabang mungkin memerlukan cakupan tambahan.
30 hari setelah serah terima sudah termasuk untuk jalur Next.js Stripe yang dikirimkan. Dukungan Teknis yang Diperpanjang bersifat opsional sebesar 20% dari harga tambahan Next.js ini dan mencakup bantuan teknis enam bulan lagi pada integrasi Next.js yang sama, bukan pembuatan produk baru.
Tambahkan pembayaran Stripe siap produksi ke aplikasi Next.js Anda yang sudah ada, simpan kode sumbernya, dan lewati proses checkout dari awal.
$145