Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Stripe adalah platform pemrosesan pembayaran yang memungkinkan Anda untuk menambahkan halaman pembayaran bawaan ke situs web dan menerima serta mengelola pembayaran online. Ini sangat populer karena kemudahan penggunaannya, dokumentasi yang luas, dukungan untuk pembayaran lokal, opsi kustomisasi dan branding, langganan, penagihan, dan pencegahan penipuan.

Dengan menggunakan Stripe, Anda dapat menerima pembayaran dari berbagai sumber, termasuk kartu kredit dan debit, Apple Pay, dan Google Pay.

Menambahkan Stripe Checkout ke Aplikasi Next.js

Anda dapat mengintegrasikan pembayaran Stripe dengan aplikasi yang dibuat dengan berbagai teknologi termasuk Next.js.

Tutorial ini mengasumsikan Anda telah menyiapkan situs e-niaga Next.js dan hanya memberikan panduan tentang cara menambahkan Stripe checkout ke situs.

Menyiapkan Akun Stripe dan Mengambil Kunci API

instagram viewer

Untuk menggunakan Stripe checkout, Anda perlu membuat akun Stripe dan mendapatkan kunci API. Kunci API terdiri dari kunci yang dapat diterbitkan dan kunci rahasia, yang akan Anda gunakan untuk mengautentikasi permintaan dari aplikasi Anda ke Stripe API.

Ikuti langkah-langkah ini untuk menyiapkan akun Stripe:

  1. Pergi ke Situs web bergaris dan klik tombol "Daftar".
  2. Masukkan email, nama lengkap, negara, dan kata sandi Anda, dan klik tombol "Buat akun".
  3. Verifikasi email Anda dengan mengikuti petunjuk di email yang akan dikirimkan Stripe kepada Anda.
  4. Di dasbor bergaris, klik "Aktifkan pembayaran" dan jawab pertanyaan cepat untuk menyelesaikan proses penyiapan akun. Pertanyaan ini mungkin tentang nama bisnis, alamat, dan informasi bank. Untuk tujuan pengembangan, gunakan mode uji.
  5. Salin kunci API dari tab "Pengembang" ke file .env di folder aplikasi Anda.

Anda sekarang dapat mengakses akun Stripe menggunakan kunci API.

Menginstal Paket Stripe npm

Jalankan perintah ini untuk menginstal paket Stripe npm.

npm menginstal garis

Impor perpustakaan Stripe ke halaman komponen checkout Anda.

impor Garis dari'garis';

Di folder API, buat file baru bernama file checkout-session.js. Inisialisasi objek Stripe dengan kunci API yang Anda ambil dari dasbor Stripe Anda.

const garis = memerlukan('garis')(proses.env. STRIPE_SECRET_KEY);

Dalam fungsi handler, dapatkan item untuk diperiksa dari parameter body.

eksporbawaanasinkronfungsipawang(req, res) {
const { item } = req.body;
};

Buat objek sesi checkout ke fungsi handler dan teruskan itemnya.

const sesi = menunggu stripe.checkout.sessions.create({
 payment_method_types: ['kartu'],
 item_baris: [
 barang,
 ],
 mode: 'pembayaran',
 url_sukses: `${req.headers.origin}/?success=true`,
 batalkan_url: `${req.headers.origin}/?canceled=true`,
});

Inilah arti node yang Anda lewati ke objek sesi:

  • payment_method_types: Jenis metode pembayaran yang diterima sesi pembayaran. Jelajahi daftar metode pembayaran yang tersedia di Dokumentasi garis.
  • line_items: Daftar item yang dibeli pengguna.
  • mode: Mode Sesi Pembayaran. Jika item checkout menyertakan setidaknya satu item berulang, lewati "langganan".
  • success_url: URL Stripe akan mengalihkan pengguna jika pembayaran berhasil
  • batalkan_url: URL Stripe akan mengalihkan pengguna jika mereka membatalkan pembayaran.

Secara keseluruhan, file checkout-session.js akan terlihat seperti ini:

eksporbawaanasinkronfungsipawang(req, res) {
jika (req.method 'POS') {
const { gerobak } = req.tubuh;
mencoba {
const sesi = menunggu stripe.checkout.sessions.create({
 item_baris: [
 keranjang
 ],
 mode: 'pembayaran',
 url_sukses: `${req.headers.origin}/success`,
 batalkan_url: `${req.headers.origin}/cancele`,
 });
 res.redirect(303, sesi.url);
 } menangkap (salah) {
 res.status (err.statusCode || 500.json (err.pesan);
 }
 } kalau tidak {
 res.setHeader('Mengizinkan', 'POS');
 res.status(405).akhir('Metode Tidak Diizinkan');
 }
}

Fungsi ini sekarang menggunakan try/catch untuk mengarahkan ulang pengguna ketika terjadi kesalahan selama checkout. Sekarang Anda telah membuat API route yang akan memproses pembayaran, langkah selanjutnya adalah membuat komponen checkout untuk menangani proses checkout.

Simak postingan ini di membuat rute API di Next.js untuk penjelasan lebih mendalam tentang rute Next.js API.

Membuat Komponen Checkout

Untuk memproses checkout, Anda perlu menginstal library @stripe/stripe-js menggunakan NPM.

npm instal @stripe/stripe-js

Pustaka @stripe/stripe-js adalah utilitas pemuatan yang akan membantu Anda memuat instance Stripe.js.

Setelah instalasi selesai, buat file baru di direktori /components Anda dengan nama /components/checkout.js. Kemudian panggil fungsi loadstripe dari pustaka @stripe/stripe-js, dengan meneruskan kunci yang dapat diterbitkan sebagai argumen.

impor { loadStripe } dari'@garis/garis-js';
const stripeJanji = loadStripe(
 process.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);

loadstripe() mengembalikan janji yang diselesaikan dengan objek Stripe yang baru dibuat setelah Stripe.js dimuat.

Selanjutnya, tambahkan fungsi untuk membuat sesi checkout di komponen.

eksporbawaanfungsiPeriksa({keranjang}) {
const handleCheckout = asinkron () => {
mencoba {
const garis = menunggu garisJanji;
const checkoutSession = menunggu axios.post("/api/sesi checkout", {
 keranjang,
 });


const hasil = menunggu stripe.redirectToCheckout({
 sessionId: checkoutSession.data.id,
 });
jika (hasil.kesalahan) {
 waspada (result.error.message);
 }
 } menangkap (kesalahan) {
menghibur.log (kesalahan);
 }
 };
kembali (


 </div>
 );
}

Fungsi ini menggunakan Axios untuk memanggil API Anda buat di folder /api untuk mengambil sesi checkout.

Tambahkan tombol checkout di pernyataan pengembalian yang akan memicu fungsi handleCheckout saat diklik.

Anda dapat memanggil komponen pembayaran di halaman keranjang.

Menangani Pengalihan Dari Stripe

Di rute API checkout, Anda menentukan URL sukses dan URL batal yang strip harus mengarahkan ulang pengguna saat proses berhasil atau gagal. URL batal dipetakan ke rute /batal, sedangkan URL sukses dipetakan ke rute /sukses. Tambahkan dua komponen di folder /pages bernama success dan batalkan untuk menangani URL ini.

Di pages/success.js, tambahkan komponen success.

eksporbawaanfungsiKesuksesan() {
kembali<div>Keluar dengan suksesdiv>;
}

Di pages/cancel.js, tambahkan komponen cancel.

eksporbawaanfungsiMembatalkan() {
kembali<div>Terjadi kesalahan saat checkoutdiv>;
}

Sekarang, Stripe akan dialihkan ke salah satu halaman ini tergantung pada status checkout.

Jika Anda menggunakan Next.js 13, lihat tutorial ini cara kerja folder aplikasi di Next.js 13 untuk beralih dari folder /pages.

Opsi Kustomisasi Tambahan untuk Halaman Pembayaran

Dari dasbor Stripe, Anda dapat menyesuaikan halaman pembayaran agar cocok dengan tampilan merek Anda. Anda dapat menambahkan logo, ikon, warna merek, warna aksen, dan bahkan menggunakan domain kustom Anda sendiri. Selain itu, saat membuat sesi pembayaran, Anda dapat menambahkan metode pembayaran yang diinginkan dan juga menentukan bahasa yang harus ditampilkan Stripe di halaman pembayaran. Semua opsi ini memungkinkan Anda menyesuaikan proses checkout agar sesuai dengan aplikasi Anda.

Mengapa Menggunakan Stripe untuk Halaman Pembayaran?

Meskipun Anda dapat membuat layanan pemrosesan checkout Anda sendiri, menggunakan platform pembayaran seperti Stripe biasanya merupakan opsi yang lebih baik. Stripe checkout membantu Anda mengurangi waktu pengembangan, memungkinkan Anda mulai menerima pembayaran dalam waktu singkat.

Selain itu, Anda mendapatkan fitur tambahan seperti kepatuhan PCI, pemulihan keranjang, kemampuan diskon, dan kemampuan untuk mengumpulkan informasi pengiriman dan mengirim faktur pascabayar.