Pengekodan Vibe · Pelajaran

Menyediakan Halaman Pembayaran

Tambahkan butang pembayaran melalui arahan.

Pelajaran 2 daripada 413 langkah

Menyediakan Halaman Pembayaran ialah pelajaran Pengekodan Vibe percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pengekodan Vibe, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pengekodan Vibe merangkumi sejumlah 4 pelajaran.

Apakah Itu Pembayaran

Pembayaran ialah saat penukaran: skrin tempat pelanggan membuat keputusan untuk membayar. Matlamat anda ialah membantu mereka melaluinya dengan langkah yang sesedikit mungkin dan tanpa risiko keselamatan.

Pilihan kukuh yang paling mudah ialah halaman pembayaran yang dihoskan oleh penyedia. Penyedia memaparkan borang, mengumpulkan kad dan mengubah hala pengguna kembali. Anda hampir tidak perlu menulis antara muka pembayaran.

Dihoskan berbanding Terbenam

Pembayaran yang dihoskan menghantar pengguna ke halaman penyedia, kemudian kembali kepada anda. Pembayaran terbenam memaparkan medan selamat penyedia di dalam halaman anda sendiri menggunakan SDK JavaScript mereka.

Pembayaran dihoskan paling pantas untuk dilancarkan dan mempunyai skop pematuhan paling rendah. Pembayaran terbenam memberikan lebih banyak kawalan reka bentuk tetapi memerlukan lebih banyak kod. Untuk integrasi pertama, utamakan pembayaran dihoskan.

Compare Stripe's hosted Checkout Session against embedded Elements for my React app. I want the lowest PCI scope and fastest path to launch. Recommend one and explain the trade-off in two paragraphs.

Pelayan Mencipta Sesi

Jangan sesekali membiarkan pelayar menentukan harga. Jumlah, mata wang dan produk mesti ditetapkan pada pelayan anda, tempat pengguna tidak dapat mengubahnya.

Bahagian belakang anda mencipta sesi pembayaran dengan harga yang dipercayai, kemudian hanya memberikan ID sesi atau URL kepada pelayar. Klien mengubah hala pengguna; klien tidak pernah menentukan jumlah.

Write a backend endpoint POST /create-checkout-session that looks up the product price from my database (never from the request body), creates a Stripe Checkout Session for it, and returns the session URL. Explain why reading the price from the client is a security hole.

URL Berjaya dan Batal

Pembayaran yang dihoskan memerlukan dua laluan kembali: URL berjaya untuk pembayaran yang selesai dan URL batal untuk pengabaian. Penyedia menambahkan ID sesi supaya anda boleh mendapatkan hasilnya.

Halaman berjaya ialah pengesahan, bukan kebenaran akses. Paparkan “terima kasih”, tetapi buka akses hanya selepas webhook mengesahkan pembayaran.

Set up the success_url and cancel_url for my Stripe Checkout Session. On the success page, fetch the session by ID to display the order summary, but make it clear in comments that real fulfilment happens in the webhook, not here.

Item Baris dan Produk

Satu sesi mengandungi item baris: produk yang dipilih, kuantiti dan harga. Tentukan produk serta harga dalam papan pemuka atau antara muka pengaturcaraan aplikasi penyedia supaya anda merujuk ID yang stabil dan bukannya nombor yang dibuat secara sewenang-wenangnya.

Harga yang telah ditentukan membolehkan anda menukar nombor di satu tempat dan membiarkan kod pembayaran kekal tanpa perubahan. Harga ini juga membolehkan kupon dan peraturan cukai digunakan dengan kemas.

Help me model my catalog in Stripe: I have three plans (Basic, Pro, Team) each with monthly and yearly prices. Show how to create Products and Prices once, then reference their price IDs when building a Checkout Session.

Mengumpulkan Butiran Pelanggan

Pembayaran boleh mengumpulkan e-mel, alamat pengebilan dan ID cukai. E-mel penting — ia menghubungkan pembayaran dengan rekod pelanggan dan membolehkan anda menghantar resit.

Minta hanya maklumat yang diperlukan. Setiap medan tambahan menambah geseran. Namun, sentiasa kumpulkan maklumat yang mencukupi untuk memadankan pembayaran dengan akaun pengguna di pihak anda.

Menghubungkan Pembayaran dengan Pengguna

Pembayaran mesti dipetakan kembali kepada akaun tertentu dalam sistem anda. Hantar ID pengguna dalaman anda ke dalam sesi sebagai metadata atau client_reference_id.

Apabila webhook tiba, ID itu memberitahu anda dengan tepat kepada siapa akses perlu diberikan. Tanpanya, anda mempunyai pembayaran yang terapung tanpa pemilik.

When I create a Checkout Session, attach my internal user_id as client_reference_id and also as metadata. Show how I later read that back from the checkout.session.completed webhook to grant the right account access.

Cukai dan Pematuhan

Menjual merentasi sempadan bermakna berdepan VAT, GST dan cukai jualan. Sesetengah penyedia (atau platform pedagang berdaftar) mengira dan membayar cukai untuk anda; penyedia lain mengharapkan anda menguruskannya sendiri.

Buat keputusan lebih awal. Menambah cukai pada proses pembayaran yang sudah berjalan amat menyusahkan. Jika anda menjual secara global dan mahu urusan cukai dikendalikan, model pedagang berdaftar menghapuskan beban tersebut.

I sell digital products to customers in the EU, UK, and US. Explain my options for handling sales tax and VAT: Stripe Tax versus a merchant-of-record like Paddle. Which removes the most compliance work from me?

Mengendalikan Pengalihan Kembali

Selepas pembayaran, pengguna akan sampai ke URL kejayaan anda. Sahkan sesi pada bahagian pelayan menggunakan ID sesi tersebut sebelum memaparkan butiran pengesahan yang sensitif.

Walaupun begitu, jangan ubah penanda akses. Paparkan mesej menunggu atau berjaya, dan biarkan webhook menjadi pintu kawalan yang benar-benar membuka kunci produk.

Pembelian Dalam Aplikasi Mudah Alih

Pembayaran melalui web tidak terpakai pada iOS dan Android. Apple dan Google mewajibkan sistem pembelian dalam aplikasi mereka untuk barangan digital dan mengambil sebahagian daripada hasil.

Alat seperti RevenueCat membungkus kedua-dua gedung di sebalik satu SDK supaya anda dapat mengurus produk, kelayakan dan resit secara seragam merentas platform.

My app ships on web, iOS, and Android. Explain why I can't use Stripe Checkout for digital goods inside the mobile apps, and how RevenueCat unifies Apple and Google in-app purchases with a single entitlement check.

Uji Proses Pembayaran dari Awal hingga Akhir

Dengan kunci ujian, jalankan keseluruhan aliran: cipta sesi, lakukan pengalihan, bayar dengan kad ujian, kembali, dan sahkan bahawa webhook dicetuskan. Kemudian uji aliran pembatalan dan kad yang ditolak.

Hanya apabila setiap cabang berfungsi — berjaya, batal, ditolak dan pemenuhan melalui webhook — barulah anda beralih kepada kunci langsung.

Generate a test plan for my Stripe Checkout flow: list each step from session creation to webhook fulfilment, the test card to use, and the expected result for success, cancellation, and a declined card.

Semakan Pantas

Sahkan peraturan keselamatan pembayaran yang paling penting.

Ringkasan

Pembayaran terhos ialah cara terpantas dan paling rendah risikonya untuk bermula: penyedia memaparkan borang dan anda hampir tidak perlu membina antara muka pembayaran. Pelayan anda mencipta sesi dengan harga yang dipercayai dan melampirkan ID pengguna supaya hasilnya dapat dipadankan dengan akaun.

URL kejayaan dan pembatalan mengendalikan kepulangan, tetapi pemenuhan menunggu webhook. Rancang cukai lebih awal, ingat bahawa peranti mudah alih memerlukan pembelian dalam aplikasi, dan uji setiap cabang dalam mod ujian sebelum dilancarkan.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
25
Pelajaran
100

Soalan Lazim

Adakah pelajaran “Menyediakan Halaman Pembayaran” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Pengekodan Vibe, termasuk “Menyediakan Halaman Pembayaran”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Pengekodan Vibe merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menyediakan Halaman Pembayaran”?

Tambahkan butang pembayaran melalui arahan. Anda berlatih Pengekodan Vibe menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pengekodan Vibe?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pengekodan Vibe di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Menyediakan Halaman Pembayaran” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pengekodan Vibe ini?

Ya. Setiap pelajaran Pengekodan Vibe menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Konsep Pembayaran
  2. Menyediakan Halaman Pembayaran
  3. Mengurus Langganan
  4. Mengesahkan Pembayaran dengan Selamat
← Kembali ke Pengekodan Vibe