Implement Stripe Checkout on a Custom Website

🧠 What Stripe Checkout is and why it is the fastest win

Stripe Checkout is a Stripe hosted payment page that you redirect customers to after you create a Checkout Session on your server. You avoid building sensitive card forms, you reduce PCI scope, and you get a checkout UX that is already optimized for conversion on desktop and mobile.

If your website is custom and your volume is low, Stripe Checkout is usually the most practical option because you get enterprise grade security and reliability without building a full ecommerce platform.

✅ What you will build in this tutorial

You will build a complete payment flow that is production safe.

1. A website cart button that calls your backend

2. A backend endpoint that creates a Stripe Checkout Session

3. A redirect to Stripe hosted checkout

4. A webhook endpoint that confirms payment and fulfills the order

5. A local testing setup using Stripe CLI

6. A deployment checklist so you do not get burned in production

🧩 Prerequisites

You will need the following.

1. A Stripe account and access to the Dashboard

2. A backend you control, even if your site is static, because Checkout Session creation must happen server side

3. A way to store orders, even if it is a simple database table or a JSON store for MVP

If you do not have a backend yet, you can use Node.js, ASP.NET, Python, PHP, or even serverless functions. The pattern is the same.

🏗️ Step 1: Create a Product and Price in Stripe Dashboard

Stripe Checkout expects line items that reference Prices.

1. Open Stripe Dashboard

2. Go to Products

3. Create a Product

4. Create a Price for USD, and create INR too if you want India localized pricing. In my case, we are targeting USA and India users.

5. Copy the Price ID, it looks like price_...

Each price has a Price ID that looks like price_XXXX. You will reference these IDs from your backend code.

🔐 Step 2: Set up Stripe API keys safely

You will use two keys.

Publishable key
Used on the browser only if you use Stripe.js. In this tutorial you can avoid Stripe.js because you are redirecting to the session URL.

Secret key
Used only on the server.

Create environment variables.

Example
STRIPE_SECRET_KEY
STRIPE_WEBHOOK_SECRET

Never hardcode keys in your frontend or commit them to Git.

---

🧠 Step 3 Backend Endpoint to Create a Checkout Session

Below is a Node.js Express example. The same logic applies to ASP.NET, Python, or PHP.

Install dependencies

npm install express stripe

Create a simple server

import express from "express"
import Stripe from "stripe"

const app = express()
app.use(express.json())

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)

app.post("/api/checkout/create-session", async (req, res) => {
  try {
    const { items, customerEmail, orderId } = req.body

    if (!items || items.length === 0) {
      return res.status(400).json({ error: "No items provided" })
    }

    const session = await stripe.checkout.sessions.create({
      mode: "payment",
      line_items: items.map(item => ({
        price: item.priceId,
        quantity: item.quantity
      })),
      customer_email: customerEmail || undefined,
      client_reference_id: orderId || undefined,
      success_url: "https://yourdomain.com/checkout/success?session_id={CHECKOUT_SESSION_ID}",
      cancel_url: "https://yourdomain.com/checkout/cancel"
    })

    res.json({ url: session.url })
  } catch (error) {
    res.status(500).json({ error: error.message })
  }
})

app.listen(4242, () => {
  console.log("Server running on port 4242")
})

This endpoint creates a Stripe Checkout Session using your product prices and returns a URL that the frontend can redirect to.

🌐 Step 4 Frontend Redirect to Stripe Checkout

Your frontend does not need any payment UI. It only needs to call your backend and redirect the browser.

async function startCheckout() {
  const response = await fetch("/api/checkout/create-session", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      customerEmail: "[email protected]",
      orderId: "order_1001",
      items: [
        { priceId: "price_ABC123", quantity: 1 }
      ]
    })
  })

  const data = await response.json()
  window.location.href = data.url
}

Once redirected, Stripe handles the entire payment experience.

🔁 Step 5 Handle Payment Confirmation Using Webhooks

Never rely on the success redirect alone. Users can close tabs or lose connectivity. Stripe webhooks are the only reliable way to confirm a payment.

Create a webhook endpoint that listens for checkout.session.completed.

app.post("/webhook", express.raw({ type: "application/json" }), (req, res) => {
  const sig = req.headers["stripe-signature"]

  let event
  try {
    event = stripe.webhooks.constructEvent(
      req.body,
      sig,
      process.env.STRIPE_WEBHOOK_SECRET
    )
  } catch (err) {
    return res.status(400).send(`Webhook Error: ${err.message}`)
  }

  if (event.type === "checkout.session.completed") {
    const session = event.data.object
    // Mark order as paid in database
    // Deliver digital goods or trigger fulfillment
  }

  res.json({ received: true })
})

This ensures your system only fulfills orders after Stripe confirms the payment.

🧪 Step 6 Test Locally Using Stripe CLI

Stripe CLI lets you forward webhook events to your local machine.

stripe listen --forward-to localhost:4242/webhook

Trigger a test payment using Stripe test cards and verify that your webhook logic works before going live.

🌍 Regional Support and Currency Handling

Stripe Checkout works best when your business is registered in a supported country. Once onboarded, you can accept payments from customers globally.

For US customers, USD payments work seamlessly. For India, INR pricing reduces FX costs and improves success rates. Some features in India are restricted due to RBI regulations, but one time payments work reliably.

💰 Cost Breakdown With Real Examples

Stripe charges based on successful transactions only.

In the United States, the standard online card fee is 2.9 percent plus 30 cents.

If a US customer pays 100 dollars, Stripe charges 3.20 dollars and you receive 96.80 dollars.

For international cards, Stripe adds approximately 1.5 percent. If currency conversion applies, an additional 1 percent is added.

This is why pricing products in local currencies where possible reduces costs over time.

There are no setup fees, no monthly fees, and no hidden platform charges for using Stripe Checkout.

🚀 Production Best Practices

Always fulfill orders from webhooks, not redirects
Use Price IDs instead of dynamic amounts whenever possible
Log webhook events for auditing and debugging
Use separate Stripe accounts or modes for test and live
Start with one time payments and add subscriptions later

🎯 Final Recommendation

For custom websites with low to medium volume, Stripe Checkout provides the best balance of speed, security, and scalability. You can launch quickly, stay compliant, and scale globally without rewriting your payment infrastructure.

If you want help implementing Stripe Checkout, designing payment architecture, or building production grade ecommerce workflows, C# Corner Consulting can help you ship faster and safer.

Contact me here: https://www.c-sharpcorner.com/consulting/