I didn’t set out to “just add a button.” I set out to satisfy a curiosity that had been bubbling up for months: how do these payment flows I keep reading about actually work? I remember the first time I saw a post about BNPL firms — I leaned forward in my chair and thought, what really happens between a user click and a payment being processed?
At first, it sounded simple enough: add a checkout button, connect Stripe, done. But as I quickly found out, payments aren’t plug-and-play. They’re more like a maze with hidden doors.
The Spark
It started while scrolling LinkedIn. Every other headline seemed to be about the rise of BNPL firms and how they were reshaping payments. The more I read, the more I wondered: What really happens between the time someone clicks “Pay” and the moment the money moves?
That curiosity led me to dive into learning. I picked up Wharton’s FinTech: Foundations & Regulations and Yale’s Financial Markets. Those courses gave me the theory — trust, compliance, the mechanics of risk — but I still wanted to see it in action.
So I spun up a Payments Demo page on my site and thought, “How hard could it be?”
The Struggle
The first button I added… did nothing. Then it did something, but it broke with an error that might as well have been written in Martian:
CORS policy error: preflight request failed
I Googled. I pasted code. I broke it again. At one point, I wasn’t sure if I was building a checkout or applying for a PhD in debugging.
Then came Vercel. My function kept crashing. The error?
Cannot find module ‘stripe’
Of course — I hadn’t even told my project that it needed Stripe installed. Lesson learned: without a package.json, a serverless function can’t magically know what libraries you want.
Every small win felt like climbing one rung of a very tall ladder.
The Breakthrough
Finally, after many commits, late-night debugging, and more browser refreshes than I care to admit, everything aligned.
- I clicked the button.
- I was redirected to Stripe Checkout (Sandbox mode).
- I entered
4242 4242 4242 4242. - And there it was — a success page on my site.
When I was redirected back to my own site’s success page, I felt a rush of relief — it was proof that I’d stitched together frontend, backend, and third-party services into something real.
Going Deeper: Webhooks
But payments don’t stop at a shiny success screen. Behind the scenes, the real world needs confirmation. What if the browser closes? What if the redirect fails?
That’s where I learned about webhooks. Stripe now sends an event directly to my backend when a session completes. I log:
- Session ID
- Customer email
- Amount & currency
For me, the first time I saw âś… Payment Succeeded appear in my logs felt like a secret handshake into the payments world.
What I Learned
- Never expose your secret key in the browser — only serverless functions should handle that.
- Debugging CORS taught me why browsers enforce security so strictly.
- Environment variables in Vercel aren’t just “nice to have” — they’re essential.
- Real payments are asynchronous: you don’t “know” it happened until your webhook confirms it.
- It tied directly back to what I’d read in Wharton’s fintech course — trust in payments comes from building reliability at every step. This project was my way of proving that to myself.
Why This Matters
This wasn’t just about Stripe. It was about learning how the whole system fits together: the customer-facing button, the secure checkout flow, the serverless backend, and the webhook confirmations.
Payments aren’t “magic.” They’re trust layered on top of trust, enforced by systems that are simple on the surface but incredibly complex underneath. Building this demo gave me a window into that world.
Try It Yourself
👉 Check out my live demo here
Use test cards (like 4242 4242 4242 4242) and see how the flow works end-to-end. No real charges will ever be made — it’s all in Stripe Sandbox.
Closing
I came into this thinking I’d just add a button. I left with a working demo, a list of hard-earned lessons, and a deeper respect for what it really takes to make payments simple, safe, and reliable.
And honestly? That curiosity is what excites me most about diving deeper into the fintech space.
