Vibe Coding · Pelajaran

Menyiapkan Pembayaran

Tambahkan tombol pembayaran melalui perintah.

Pelajaran 2 dari 413 langkah

Menyiapkan Pembayaran adalah pelajaran Vibe Coding gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vibe Coding, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vibe Coding mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

What a Checkout Is

A checkout is the moment of conversion: the screen where a customer commits to pay. Your goal is to get them through it with the fewest steps and zero security risk.

The simplest robust option is a provider-hosted checkout page. The provider renders the form, collects the card, and redirects back. You write almost no payment UI.

Hosted vs Embedded

Hosted checkout sends the user to the provider's page, then back to you. Embedded checkout renders the provider's secure fields inside your own page using their JavaScript SDK.

Hosted is fastest to ship and lowest in compliance scope. Embedded gives more design control but more code. For a first integration, prefer hosted.

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.

The Server Creates the Session

Never let the browser decide the price. The amount, currency, and product must be set on your server, where the user cannot tamper with them.

Your backend creates a checkout session with the trusted price, then hands the browser only a session ID or URL. The client redirects; it never names the amount.

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.

Success and Cancel URLs

A hosted checkout needs two return paths: a success URL for completed payment and a cancel URL for abandonment. The provider appends a session ID so you can look the result up.

The success page is a confirmation, not an authorization. Show "thank you", but unlock access only after the webhook confirms payment.

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.

Line Items and Products

A session contains line items: which product, what quantity, what price. Define products and prices in the provider's dashboard or API so you reference stable IDs rather than ad-hoc numbers.

Pre-defined prices let you change a number in one place and keep checkout code untouched. They also enable coupons and tax rules cleanly.

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.

Collecting Customer Details

Checkout can collect email, billing address, and tax IDs. Email is essential — it links the payment to a customer record and lets you send receipts.

Ask only for what you need. Every extra field is friction. But always capture enough to reconcile the payment with a user account on your side.

Connecting Checkout to a User

The payment must map back to a specific account in your system. Pass your internal user ID into the session as metadata or a client_reference_id.

When the webhook arrives, that ID tells you exactly whose access to grant. Without it, you have a payment floating with no owner.

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.

Taxes and Compliance

Selling across borders means VAT, GST, and sales tax. Some providers (or merchant-of-record platforms) calculate and remit tax for you; others expect you to handle it.

Decide early. Retrofitting tax onto a live checkout is painful. If you sell globally and want it handled, a merchant-of-record model removes the burden.

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?

Handling the Redirect Back

After payment the user lands on your success URL. Verify the session server-side using its ID before showing sensitive confirmation details.

Even here, do not flip the access flag. Display a pending or success message, and let the webhook be the gate that actually unlocks the product.

Mobile In-App Purchases

Web checkout does not apply on iOS and Android. Apple and Google require their in-app purchase systems for digital goods and take a platform cut.

Tools like RevenueCat wrap both stores behind one SDK so you manage products, entitlements, and receipts uniformly across platforms.

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.

Test the Checkout End to End

With test keys, run the full path: create session, redirect, pay with a test card, return, and confirm the webhook fires. Then test the cancel path and a declined card.

Only when every branch behaves — success, cancel, decline, and webhook fulfilment — do you switch to live keys.

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.

Quick Check

Confirm the most important checkout safety rule.

Recap

A hosted checkout is the fastest, lowest-risk way to start: the provider renders the form and you ship almost no payment UI. Your server creates the session with a trusted price and attaches your user ID so the result maps to an account.

Success and cancel URLs handle returns, but fulfilment waits for the webhook. Plan tax early, remember that mobile needs in-app purchases, and test every branch in test mode before going live.

Gratis untuk memulai

Belajar JavaScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus
25
Pelajaran
100

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyiapkan Pembayaran” gratis?

Ya — teks lengkap “Menyiapkan Pembayaran” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vibe Coding, upgrade ke CoddyKit PRO. Kursus Vibe Coding mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menyiapkan Pembayaran”?

Tambahkan tombol pembayaran melalui perintah. Kamu berlatih Vibe Coding dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vibe Coding?

Tidak diperlukan pengalaman sebelumnya. Vibe Coding di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Menyiapkan Pembayaran” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vibe Coding ini?

Ya. Setiap pelajaran Vibe Coding menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Konsep Pembayaran
  2. Menyiapkan Pembayaran
  3. Mengelola Langganan
  4. Memverifikasi Pembayaran dengan Aman
← Kembali ke Vibe Coding