Build better payment forms using new “embedded” Stripe Checkout

Learn how to use the new embedded Stripe Checkout feature to easily accept payments without ever leaving your own website. Learn everything about payments for software developers in my new Stripe for SaaS featuring Next.js and Supabase:
Stripe for SaaS: fireship.io/courses/stripe-saas/
And use code BEYOND30 to save some money!
Full Tutorial and Code: fireship.io/courses/stripe-sa...

[@geeshta]

As a product manager of a payment gateway, I can confirm that embedded payments raise conversion. I have the data. People here who prefer redirects are security-aware tech people but that's a very specific sample.

[@daveface69]

Unless something goes wrong during the redirect, why is this the case? Surely once somebody is at the stage of purchasing very few would stop because of a redirect?

[@df23]

@@daveface69 Because most people are not tech savvy so "Stripe" is just a random company to them but where in a embedded form you already should have built the trust within the buyer on your brand before they hit the payment button (Payment modal) so inserting details on a page you trust vs strange (stripe) is the difference in the split second decision on closing tab or continuing

[@NPCSpotter]

@@df23 Lol this is so annoying as tech-aware business owner with zero coding skills. I'm creating a Shopify website along with my Wix Studio website and I just assumed everyone knows about Stripe, so that would add credibility to my website, but the way you explained it makes sense. This is why TikTok shops convert so well.

[@df23]

@@NPCSpotter Lol yea you gon learn being too "smart" is not profitable in business. But this also depends on what you're selling right. If you're doing Saas and all your competitors use either Stripe or Paypal then a redirection there is w/e but if you're selling fashion or physical goods it may also work having a redirect to Shopify checkout rather than a modal credit card form/stripe since Shopify checkout by now is so popular in all fashion stores

[@hiddendrifts]

@@df23 >a random company< this makes me feel naive for just trusting that the merchant i buy from knows what they're doing lmao

[@MoritzvonSchweinitz]

I, for one, prefer the redirect-to-payment-processor approach: this way, all critical sensitive information is clearly restricted to specialized companies and their responsability, and not inside some i.e. out-of-date with hundred shady plugins Wordpress installation which could trivially steal the payment form's data. As a user, I also prefer smaller websites to redicrect me instead of getting my data directly.

[@mxpf26]

And the cool thing is, as a developer/business-owner you can even outsource billing-address collection and invoice generation, without doing anything. Just redirect and let it go. Someone else should take care of this mess.

[@EvertvanBrussel]

Yeah I also feel much safer when I see that I'm filling my credit card details in on a form that's actually on a trusted payment processor's domain. However, I genuinely wonder how many people who are less tech-savvy will feel the same way.

[@wlockuz4467]

Totally agree. In fact being redirected to Stripe gives me a sense of security that doesn't exist when dealing with something shady. Also one huge issue with embedding is that it opens a way for phishing.

[@geeshta]

​@@EvertvanBrusselthey are not! I work in a payment provider company and people much prefer convenience and nice UX. Also they trust the shop because they have already decided to buy there. Redirection to a whole different UI feels much sketchier to a typical user.

[@MoritzvonSchweinitz]

@@geeshta PayPal, back in the day, heavily promoted "secure checkout on Paypal", which I think should make a comeback. If users knew how massively insecure a random small shop website could be, I think they'd agree.

[@OmniCroissant]

One day, I will be good enough to understand everything you say in your videos.

[@jasontfrom713]

same bro

[@whatevsperson3019]

i was abou to comment the same thing lmao

[@RyckmanApps]

Same. Keep watching. I knew 20% of the first Fireship vids I watched and years later I’m am closer to 25%. 😅

[@donabhyuday]

A stripe is one of the many line like things on a zebra.

[@rubenheymans1988]

I created a subscription based payment system using stripe a while ago, with the income split between multiple parties, making everything custom because I could not use redirects (also doesn't work very well with pwa's), so I think this is the first one where I understand 100% of the video

[@4RILDIGITAL]

Loved the step-by-step explanation on embedding Stripe checkout. A practical solution that streamlines the whole online purchase experience. Looking forward to the full course coverage.

[@jerseyse410]

Literally perfect timing. I've got a couple of Azure functions that I'm hooking up to a next js back-end with react on the front-end and was looking for a way to integrate payments. I initially wasn't a fan of the redirect off the site, but the embedded checkout is perfect so I bought the course, looking forward to prototyping this soon

[@CammeritzLP]

We use a mixture of both embedded and hosted checkout, depending on if the customer purchases with an already self-signed up account, or if they do not have an account yet and get sent the offer from our Sales Team via our CRM. The combination of both is really powerful!

[@JohnnyPC1]

To me as a user, the embedded checkout form looks a lot more sketchy and makes me think I'm being phished. How would the user know that they are entering their payment information in the actual Stripe form? With the redirect, users can validate the URL/domain.

[@davidkee2363]

majority of people have no clue what stripe even is

[@shreyashraj]

To you as a user you don't trust the website where you are buying the product but still willing to pay if it is a redirect 😕like you buy something by paying on stripe only if you actually trust the website right

[@geeshta]

It's the opposite! People have decided to buy something from a shop - they trust the shop. Being redirected to a whole other website feels much sketchier! Also most users don't look at URLs at all.

[@cirkutpersonal]

@@shreyashraj In my mind (and I realize I'm biased), anytime the checkout looks vastly different than the surrounding website, I always do a double take. A redirect for me eases the possibility of sketchiness, but alas I realize that the data shows differently. As a developer, well-implemented embedded options are seamless and unapparent, so I think it's just the fact that it's a non-optimized demo site in this video, so that certainly lends itself to seeming 'sketchier' than a redirect.

[@ahsin.shabbir]

Used this for my SaaS product, it was tricky at first, but after a few hours I had it integrated.

[@evandroprogram]

Para os BRs que acompanham o Fireship, hoje foi especial ver o escapamento do Serginho Groisman! 😝

[@BrunoSantos-rw6lb]

essencial

[@birarakisarap]

I cant believe we had to wait for a proper checkout solution until its 2024! jeezzz.

[@realrk95]

Supabase rocks for this kind of implementation imo

[@abdirahmann]

...untill you want to implement transactions without breaking the DX 💀💀, it just sucks rhat it is that way!

[@oxnull738]

@@abdirahmannwhat is DX?

[@furycorp]

@@oxnull738 developer experience

[@RegalWK]

@@oxnull738DX stands for Developer Experience

[@levifry]

@@oxnull738 Developer experience

[@brunoggdev6305]

0:24 brazil mentioned lesgoooooo

[@velkb228]

Letsgooo

[@catarinayikake4820]

Lesgooooooo

[@PeterSoftwareHouse]

letsgoooooooooooooo

[@gustavo-santos-dev]

Do nada um Serginho Groisman kkk

[@dyto2287]

I find Stripe Elements better for embedding payments to UI. You have more controls but there is a bit more work to be done though.

[@scuzzoo]

What’s the main differences between Stripe Elements and what is shown on the video? It seems like they do the same thing. I got confused since I made a project about a year ago that utilised Stripe Elements (and found that really cool) and was confused when the video said this was quite a new Stripe feature.

[@dyto2287]

@@scuzzoo Stripe Element are basically just inputs for payment methods, & card details. You only get token for payment method that you can use to assign it to customer manually on your the backend. Usually you also need create and manage Stripe customer & subscription from your backend by calling Stripe API directly. Stripe Checkout it's kind of everything combined in one view.

[@scuzzoo]

@@dyto2287 Ahh yes that does ring a bell now thanks

[@CleverGeneration]

Thank you for the video and the discount, I've just purchased the course ❤

[@wlockuz4467]

The embedded modal seems very sketchy because for a normal person it would be hard to tell if they're being phished. As someone who has used Stripe both as a developer and customer I can say the redirect flow is the best solution. The redirect itself enough for peace of mind and building trust in whatever product it is connected to.

[@queijoapocaliptico]

I loved the Serginho Groisman Picture

[@bavfalcon9636]

love stripe, been using it for years 🤗

[@BlackkTiger]

Agreed. Used Stripe along with PayPal for years and while PayPal gave me endless grief, I never once had a single issue with Stripe.

[@IgorImperiali]

Brazil Advertising been notice! hahaha

[@BrunoSantos-rw6lb]

é os guri

[@IgorImperiali]

@@BrunoSantos-rw6lb Bagulho é doido

[@de1337ious]

Awesome video as always. One thing though, fetchClientSecret is wrapped in a useCallback, but then an options object is created and passed as a prop (this one will have a new reference on every render), whats the point of memoizing the fetching fn?

[@jx_snack]

i like your funny words, magic man

[@andregusmao3196]

Brazil mentioned!!!

[@MrBran4]

Yooo it’s like the original stripe checkout model, the one they got popular for in the first place

[@Stoney_Eagle]

You can add individual form inputs from stripe anywhere into your page without a modal and style them however you want 😅

[@r6xyb3fhtv82]

Stripe is actually really cool, but also too big to really solve problems constructively via support (similar to Microsoft). I opened an account for an association to collect payments from members for private events. Unfortunately, we were classified as an unacceptable risk without explanation and only after the first live transfer. The refund process turned out to be extremely nerve-wracking. Testing worked perfectly.

[@MrGuysmo92]

Thanks a lot ! I don't understqnd why we need a return_url when just showing a error or success toast would be enough. Component is re rendering so local state are lost. Can be problematic when we want to do some mutation after payment that aren't related with the current user.

[@d2vin]

Is it possible to use this in Astro?

[@juliusz3340]

What extension you use to fold tailwind classes?

[@pnk4996]

It’s called tailwind fold

[@interest_in_interesting]

Fortunately the comment section checkout form is a short one. Hello! **What is that number input**

[@WantedDead]

wheres the typescript 5 course you said was coming ?

[@spacepacehut3265]

anyways what's the file icon pack Jeff is using ?

[@zackplauche]

Did you record this with your AI?

[@simonss13]

Thanks man, I've been trying to conceptually sort out the redirect_url property when creating the session object server-side for a hot minute. If anyone else is looking for it, it's at 2:49

[@HikaruAkitsuki]

To be honest, I prefer redirect to stripe becauy it help the clients to analyze if your payment form is authentic and not a fisher form. Embedded just gonna makes your payment form questionable.

[@n8ged8]

Does not make sense. The customer got to your shop website and wants to buy. If he has trust in the shop, he also trusts in the embedded payment solution. Otherwise if the customer does not trust in your shop he would not buy no matter if the payment solution is embedded or redirected - the shop could be fake so paying after a trustful redirect to (real) stripe would make a customer pay for a fake product that maybe not exists.

[@interest_in_interesting]

Sounds like it would be easy to supplement and attack through...

[@Charles-Darwin]

it's a "not my problem, their problem" sort of solution

[@dizzyrocket2000]

Why did you choose to use a popup type modal for the payment form? This to me looks and feels sketchier than redirecting to Stripe. Why not just use a regular checkout page rather than a popup window?

[@hemanthvasi9157]

Razor pay is also a payment gateway which has done it long back.

[@masterklm7216]

Does this work in react native app

[@pictureus]

This has been the case for multiple years?

[@paw565]

Why not use server action though?

[@RobertWildling]

Hmmm... just wanted to buy the course, but the form rejected my MassterCard (which I use for Amazon and other online shops)...

[@a.yashwanth]

I just saw that claud is using the stripe embedd in a modal window.

[@adriablancafort]

With this modal it is a bit sketchy... Would be better to be able to embed it with some control over the styles. Is it possible to build a custom form from scratch and just connect it to the stripe api?

[@beyondfireship]

Stripe has another JS lib called "Elements" that gives you a lot more control over UI, but the setup is more complex on both client and server. And yes, you could use the REST api directly if you enjoy pain.

[@adriablancafort]

@@beyondfireship Thank you! Would be interesting to see a video creating a checkout with the Stripe Elements library you mentioned.

[@FernandoFalci]

Which is this VS Code extension that shows the tailwind logo in the JSX code?

[@spacepacehut3265]

tailwind fold

[@megascan]

I actually prefer it opening in a new tab, because I can actually verify using the URL I am entering my details into Stripe and not some fake form designed to steal my information. I personally think this is a bad idea, but you do you.

[@Tarun-et3mx]

Waiting for firebase videos😊

[@MiklosGalicz]

I would be interested in the the Payment Request API 😁

[@adityanithariya]

Protip: Use hyperswitch built using rust, to integrate any payment provider seamlessly

[@AndreasBeder]

thanks, looks very promising

[@rascanjero8431]

Seems overly expensive for something that most businesses won’t need.

[@wlockuz4467]

Sounds like a bad idea for starters. The main benefit of Stripe is that you can plug it and forget it on most of your projects. If you're starting out and already adding a layer of complexity for monetization with something like hyperswitch then you won't get far.

[@user-ek2jc1xf3y]

@@rascanjero8431 0.04/tx is expensive?

[@adityanithariya]

@@wlockuz4467 I agree, it's another layer of complexity and won't be valuable for majority projects which needs just one payment provider, but it does help if you want to scale involving multiple payment providers

[@hanes2]

Oh, so Stripe doing what Klarna has done for years

[@catarinayikake4820]

exactly what i thought when i heard about it. better marketing maybe?

[@GuilhermeHenrique-tz5mn]

0:25 BRAZIL MENTIONED

[@mhamedsoldierofgodbenyouss7697]

Stripe doesn't support all the countries in the world, is there any solution for the ones that doesn't support stripe

[@johnsausage]

PayPal and Bitcoin 😩😭🤯

[@OPPFINITE]

Please teach how to integrate UPI payments. That's the most advanced payments in the world right now!

[@qwertydev770]

does anybody know, whats the plugins name that abbreviates tailwind classes in the editor 3:50?

[@DRUEVISUAL]

Inline fold

[@adrianorocha-dev]

Brazil mentioned at 0:26

[@jovanemullings]

stripe not available in jamaica 🤷🏾‍♂

[@johnniefujita]

Actually you can customize it if you mess a little bit with the library directly...

[@arthuraguiar5382]

0:24 aeooohh Brasiiil 🇧🇷🇧🇷🇧🇷🇧🇷🇧🇷

[@Ivan-cd6if]

Or if you’re using React you could just use Stripe’s Payment Element and it’ll load the form in your platform to manage the payments directly from there, at least that’s what I do

[@dc4539]

Wow, I'm surprised Stripe is so far behind with implementing this feature. Adyen released an embedded UI feature years ago

[@Mordecrox]

Weird how our culture is the opposite, as a display of trustworthiness, it is made abundantly clear at every step, "YOU ARE ENTERING PAYMENT PROCESSOR", "payment processor here, you want to buy thing from place and pay amount, is that correct?", "YOU ARE LEAVING PAYMENT PROCESSOR, IF HAVING ISSUES HOLD ON THIS RECEIPT", "you are back to the marketplace, we acknowledged payment processor's payment and will process your order". Sometimes they go the extra mile to make you absolutely sure they DO NOT handle the transaction itself and if it seems so double check things because you're likely being phised.

[@DansChewy]

YOU CAN MAKE TAKE A USEFUL SERVICE ALSO

[@StallionTG]

Usually everything Fireship does is elegant, but this solution looks a bit forced and anything but elegant. :/ It feels more like a popup than a integrated payment form.

[@yourlocalit1701]

Yeah, this is like the hardest way to have a payment portal.

[@kipchickensout]

I don't see a PayPal option?

[@matthewdolman]

Is fireship having a stroke?

[@FaisalAfroz]

People complaining about things you know you can add both methods right ? let the user decide if he wants a redirect or want to stay on website for checkout.

[@DRUEVISUAL]

The plugin is called Inline Fold, in case if anyone wonders how does he have his classNames hidden.

[@spacepacehut3265]

that's "Tailwind Fold" specifically

[@Rundik]

Interesting idea to have a separate channel just for the ads

[@kirso]

Why is it in Next? 😢

[@mattxnyce]

Fireship/Cody Ko crossover "frictionless"

[@JilianGaretteAbangan]

3:51 does anyone know how to hude the tailwind classes, like in the video?

[@Suhaybkaofficial]

vs code extension

[@felixmildon690]

Tutorial starts at 2:10

[@manishgautam2424]

waiting that course to be free

[@JhitsfanfromPH]

Yup, laravel stripe is still the best for me, it just doesn't feel right putting it in the frontend.

[@darian.rosebrook]

Should have said “when your product makes zero cents” for the $0.00

[@franciscoochoa9]

Embedded payments with custom CSS were already available from other processors. Stripe is late to the game with this. Also, your giving away 2.9% + 30 cents per transaction. There are other options out that offer subscription, invoicing, etc.

[@kusayfarhan9943]

Curious what other dev friendly options are there with better pricing?

[@filcondrat]

+

[@saksham_1612]

Razorpay is one which is very famous in India with 2 percent flat fees and far better embedding feature than stripe.

[@geeshta]

​​​@@kusayfarhan9943 It's usually the local providers. I'm from the EU and each country has local providers that are better than Stripe unless you handle millions of payments a week

[@michaelm.3641]

​@kusayfarhan9943 Clover is an option

[@OnionKnight541]

this is a great example of using JSON, javascript, HTTP methods, APIs, etc.

[@newxceo]

Bun js: The Basics

[@trimonmusic]

I was staring at the typography on the "Marketing Sucks" page for far too long before I saw the more obvious fault...

[@dominikrodler8010]

Hilarious presentation 🤣

[@isanjayachar]

Razorpay in Indian has been doing this for half a decade already

[@alexniess]

The bus on the image of the bad advertising example os from Brazil. Oddly specific.

[@GuidedPirate]

Stripe sdk for flutter is so broken it made me use paypal

[@abdirahmann]

wait??!? really??? 😂😂😂

[@GuidedPirate]

@@abdirahmann yeah I didn't want to spend time trying to fix it. Seems like they don't update their flutter sdk to work with other dependences

[@abdirahmann]

@@GuidedPirate just use their raw REST API if you really have to which i still consider luxury because for me i havr to read pdf documents from the local bank 😂😂💀 due to regulations! and let me tell you... They are sooo weak, i literally have to create my own SDKs and Libs!! 💀💀

[@lazyken6468]

Still waiting on that malbolge in 100secs

[@joy_sam_raj]

Please Razorpay has these, in ancient days.

[@Mr.BinarySniper]

Looks like fireship also started hating sveltekit for its awkward move.

[@boohba]

ai powered checkout when?

[@FelipeCampelo0]

MF picked up Brazilian bus advertisements memes 😂

[@eugenefedorov3498]

It is not true. I was able to use stripe elements wit js to embed form in to my website 3 years ago.

[@lukem121]

Email leak at 0:15 or bait?

[@oevers]

where? This is clearly an example, I don't think he owns it.

[@lukem121]

​@@oevers Google search the email, he owns it.

[@user-ml1wj9qf9f]

“dozens of dollars” 😆

[@yorkshireplumbing]

Yeah, love to but Stripe cancelled our account for a reason which didn't exist and made no sense. They didn't even change their mind after several appeals, they just continued on with their ludicrous reasoning, so, **** Stripe!

[@lil_edo]

Stripe locked my account and held 5k from me. Valid transactions and no disputes. Im with Square now. Fuck Stripe

[@joaovmlsilva3509]

Laughs in basic data security rights and outside USA payment methods. Apple/Google pay aren't a thing either. We have better decentralized payment methods.

[@basdfgwe]

Feel like stripe has been done to death. It woudl be cool if you do other things like cypto payments, etc...

[@neunzothomas5028]

1st (7th)

[@Horopter]

Bro... You really need to check your mail. LinkedIn messages and so on.

[@mxpf26]

I don't think there is any case for using this, instead of classic stripe checkout. No classic consumer will stop buying just because of a redirection.

[@vectoralphaAI]

Lol right.

[@MrYerak5]

Kind of expansive service, I cant see any benifets over other services

[@360Macs]

First view!!!!!!!!

[@velkb228]

0:25 Hugs from Brazil ( ͡° ͜ʖ ͡°)

[@shadyheadstash]

There are a few parts of this video with a lot of very low end bass in them, unusual for your videos. 03:53 01:10