BacodoBACODO

Pengaya Next.js

Integrasi Stripe untuk 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.

  • Kode sumber lengkap disertakan & milik Anda secara permanen
  • Tidak diperlukan kunci lisensi tambahan atau lisensi berulang
  • Siap produksi dan diuji
  • Terintegrasi ke dalam proyek dan tumpukan Next.js Anda yang sudah ada
  • Termasuk dukungan teknis 30 hari pasca serah terima
  • Dukungan Teknis Perpanjangan 6 bulan opsional dengan harga 20% dari harga Add-on

Mulai

$145

USD · Next.js

Lihat Demo

Integrasi Stripe untuk Next.js · Next.js

Kode Sumber LengkapTidak Ada Kunci LisensiSiap ProduksiIntegrasi yang TerujiDukungan 30 Hari

Requirements

What Integrasi Stripe untuk Next.js needs

  • Proyek Next.js yang sudah ada
  • Akses Stripe Test Mode

Akses repositori tidak wajib. Akses proyek hanya diperlukan jika Anda ingin Bacodo mengintegrasikannya langsung.

Fungsinya

Stripe checkout di dalam aplikasi Next.js Anda

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.

Masalah itu terpecahkan

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.

Bagaimana hal itu masuk ke dalam proyek

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.

Mengapa ini menghemat waktu pengembangan

Tim Anda melewatkan implementasi produksi pertama Stripe Next.js: Pengendali Router Aplikasi, SCA, status kesalahan, dan serah terima yang mendokumentasikan cara mengirimkan kunci langsung.

Untuk siapa ini

Pengembang, tim teknis, agensi, dan startup yang sudah memiliki aplikasi Next.js dan menginginkan jalur pembayaran produksi yang dapat mereka pertahankan.

Fitur utama

Apa yang termasuk di Integrasi Stripe untuk Next.js

Stripe Checkout atau Elemen Pembayaran di Next.js

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.

Penangan Rute Next.js untuk PaymentIntents

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.

Apple Pay dan Google Pay di Next.js Checkout

Aktifkan tombol dompet di Stripe Checkout atau Elemen Pembayaran ketika akun dan domain Stripe Anda diverifikasi. Penggantian Next.js tetap pada pembayaran kartu.

Mode uji Next.js lalu hidupkan tombol Stripe

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.

Pengendali Rute Webhook untuk status pesanan Next.js

Keberhasilan pembayaran di UI Next.js bukanlah sumber kebenaran. Route Handler memverifikasi tanda tangan Stripe dan memperbarui status pesanan atau hak sebelum pemenuhan.

Status sukses, pembatalan, dan kesalahan Next.js

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

Kapan Integrasi Stripe untuk Next.js cocok

Toko atau situs pemesanan Next.js yang ada

Anda sudah menerima pesanan atau pemesanan di Next.js dan memerlukan pembayaran kartu tanpa menulis ulang katalog atau alur pemesanan.

Agensi menyerahkan situs klien Next.js ke produksi

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.

SaaS atau aplikasi keanggotaan Next.js

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.

Pembayaran pasar atau layanan Next.js nanti

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 alur checkout Next.js Stripe

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

Bagaimana Integrasi Stripe untuk Next.js disampaikan

Alur kerja add-on Bacodo standar, dengan pemeriksaan khusus Next.js dan Stripe untuk App Router, Route Handler, dan lapisan data Anda yang ada.

  1. 01

    Pilih Garis Berikutnya.js

    Konfirmasikan Integrasi Stripe untuk Next.js dan apakah checkout hari pertama dihosting di Checkout atau Elemen Pembayaran.

  2. 02

    Pemeriksaan kompatibilitas Next.js

    Tinjau versi Next.js, Router Aplikasi vs Router Halaman, UI checkout yang ada, database, dan apakah Anda sudah memiliki akun Stripe.

  3. 03

    Integrasikan ke Next.js

    Tambahkan Stripe.js, halaman checkout, Route Handler untuk sesi atau PaymentIntents, dan handler webhook yang ditandatangani.

  4. 04

    Konfigurasikan aplikasi Next.js

    Kunci pengujian Wire Next.js, titik akhir webhook, dan konfigurasi server khusus lingkungan.

  5. 05

    Uji jalur pembayaran Next.js

    Jalankan kartu pengujian Stripe, 3-D Secure, jalur pembatalan/penolakan, dan konfirmasi webhook di aplikasi Next.js.

  6. 06

    Serahkan sumber Next.js

    Kirimkan sumber Next.js, catatan konfigurasi, dan daftar periksa live-key. Implementasi Next.js adalah milik Anda untuk dipertahankan.

Arsitektur

Bagaimana Stripe terhubung ke proyek Next.js

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.

Halaman Next.jsStripe.js / PembayaranPengendali RuteMaksud Pembayaran StripePengendali Rute WebhookBasis data / status pesanan

Teknologi yang didukung

Apa yang Integrasi Stripe untuk Next.js benar-benar gunakan

Router Aplikasi Next.js

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 dan Stripe Node SDK

Stripe.js resmi di klien Next.js dan stripe di server untuk sesi, PaymentIntents, dan verifikasi webhook.

Lapisan data Next.js Anda

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 untuk aplikasi Next.js

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.

Diperlukan penyiapan hosting Next.js

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

Apa yang termasuk dalam Integrasi Stripe untuk Next.js

  • Integrasi ke dalam proyek Next.js yang ada
  • Kode sumber lengkap di repositori Anda
  • Konfigurasi Lingkungan dan Route Handler
  • Elemen Checkout atau Pembayaran ditambah perubahan webhook diperlukan untuk jalur checkout ini
  • Menguji alur pembayaran Next.js sebelum serah terima
  • Catatan serah terima untuk peralihan uji-ke-langsung
  • Dukungan teknis 30 hari setelah serah terima

Tidak dalam harga tambahan

  • Akun Stripe, kunci API, dan biaya pemrosesan Stripe — Andalah yang memilikinya
  • Database atau CMS baru jika Anda tidak memiliki tempat untuk menyimpan status pesanan
  • Marketplace Connect, produk Penagihan khusus, atau pengganti Pembelian Dalam Aplikasi kecuali tercakup sebagai pekerjaan khusus

Pricing

Integrasi Stripe untuk harga Next.js

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

  • Proyek Next.js yang sudah ada
  • Akses Stripe Test Mode

$145

sekali bayar

Next.js

Butuh backend?

  • Kode sumber lengkap
  • Tanpa biaya lisensi
  • Dukungan 30 hari
  • Integrasi penuh

Checkout aman olehstripe

Penyerahan + keamanan

Praktik pengiriman dan keamanan Next.js

Perkiraan pengiriman Next.js

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.

Diuji pada Next.js sebelum serah terima

Kartu mode uji, jalur Aman 3-D, pembatalan, dan penolakan dilakukan di aplikasi Next.js sebelum kami serah terima.

Rahasia Stripe tetap berada di luar Komponen Klien Next.js

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.

Verifikasi webhook untuk pesanan Next.js

Route Handler webhook Next.js memverifikasi tanda tangan Stripe sebelum memperbarui status pesanan atau hak.

Tidak ada klaim keamanan Next.js yang tidak dapat diverifikasi

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

Pertanyaan yang sering diajukan

Apa yang termasuk dalam Integrasi Stripe untuk Next.js?

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.

Apakah Anda akan mengintegrasikan Stripe ke dalam aplikasi Next.js kami yang sudah ada?

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.

Apakah Integrasi Stripe untuk Next.js memerlukan server?

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.

Paket Stripe manakah yang digunakan Stripe Integration for Next.js?

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.

Apakah Integrasi Stripe untuk Next.js mendukung Apple Pay dan Google Pay?

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.

Apakah Pages Router disertakan dalam Integrasi Stripe untuk Next.js?

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.

Bisakah Stripe Integration for Next.js mengumpulkan pembayaran langganan?

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.

Di mana kunci rahasia dan publikasi Stripe berada di aplikasi Next.js?

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.

Bagaimana cara kerja mode uji Stripe dan mode langsung di Next.js?

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.

Bagaimana Integrasi Stripe untuk Next.js menangani 3-D Secure/SCA?

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.

Apakah webhook Stripe diperlukan untuk checkout Next.js?

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.

Bisakah kita mempertahankan UI checkout Next.js saat ini dengan Stripe?

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.

Apakah harga Stripe Integration for Next.js sudah termasuk akun Stripe atau biaya?

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.

Akankah Integrasi Stripe untuk Next.js menggantikan Pembelian Dalam Aplikasi Apple atau Google?

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.

Bisakah kita menyesuaikan tanda terima dan metadata Stripe di Next.js?

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.

Dukungan Next.js apa yang disertakan setelah serah terima Stripe?

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.

Bagaimana pembaruan Stripe.js atau Stripe API ditangani di Next.js?

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.

Bagaimana jika pembayaran Stripe gagal di aplikasi produksi Next.js?

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.

Versi Next.js manakah yang kompatibel dengan Integrasi Stripe untuk Next.js?

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.

Apa yang dimaksud dengan dukungan 30 hari versus Dukungan Teknis Perpanjangan 6 bulan untuk Integrasi Stripe untuk Next.js?

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.

Integrasi Stripe untuk Next.js

Tambahkan pembayaran Stripe siap produksi ke aplikasi Next.js Anda yang sudah ada, simpan kode sumbernya, dan lewati proses checkout dari awal.

$145