Accept a payment with the PaymentElement using Node.js

[@ingoandelhofs]

Why do we create a payment intent every time the user visits the payment page? If the user does not fill in any information, why do we need to create an intent beforehand? Or am I missing something?

[@StripeDev]

Creating a PaymentIntent every time someone visits the payment page allows Stripe to prepare for a potential transaction. This preemptive step ensures a smooth transaction process while enabling efficient handling of different payment scenarios and requirements, even if the user doesn't immediately provide payment information.

[@ingoandelhofs]

@@StripeDev won’t these stack up if different users visit the page and don’t complete the transaction or should we not worry about that?

[@StripeDev]

How you setup your integration is ultimately up to you, but with this method, each visit to the payment page will create a unique PaymentIntent which will then appear in your Dashboard-you can cancel any unused PaymentIntents after the fact as well: stripe.com/docs/payments/paymentintents/lifecycle.

[@zaqoenv2428]

That's a nice tutorial, my question is can we use this system inside an electron application ? Since we "can't" really use URLs inside of it, using this method works and safe ? I've been struggling since a lot of days trying to figure it out what's system secure and can works inside an electron.js application.

[@StripeDev]

Hey there-electron.js is a third party / open source framework built on top of Node.js, and Stripe doesn’t support it officially, neither the community library. Some payment methods require redirection that URL is required as part of Payment Element integration. If electron.js can’t support/use URL, then the integration is unlikely to work.

[@himalayaputra3021]

Nice tutorial 🎉 One thing I am not getting I can see you have enabled gpay and Apple Pay in your stripe dashboard But the gpay and Apple Pay buttons are not being displayed in your stripe checkout element But others like card and some others showing Any one can help

[@eduardoPicazzo]

can you use coupons/promo codes wit this payment element approach? or is the checkout option mandatory for those cases??

[@StripeDev]

Hi Eduardo. Have you checked this Docs on discounts and coupons: stripe.com/docs/payments/checkout/discounts?

[@matthewpearson155]

I think Eduardo was asking about if it's possible to use discounts and coupons with stripe web elements. You sent him a link to stripe checkout @@StripeDev . Could you pls answer his question?

[@NanagoudT]

how to get payment method id so that i acn use it for charging later, official documentation didn't help me much

[@StripeDev]

Hi there-can you elaborate on your question further? Have you checked out our doc here: stripe.com/docs/payments/save-and-reuse.

[@muhammedashkar692]

what is the parameter that i should setup to not redirect?

[@StripeDev]

Hey there, here are our docs on customizing redirect behaviour: stripe.com/docs/payments/checkout/custom-redirect-behavior. Let us know if this helps.

[@ericruizmolero9653]

Hi CJ! Really nice tutorial! Can we implement this in Webflow? I just want to achieve this on a Webflow landing page :)

[@StripeDev]

Hi Eric-it appears that at this time Webflow supports integrating with Stripe, but only via Checkout. If you're looking for a simpler integration path, we have a no-code Payment Links option on your Dashboard: stripe.com/payments/payment-links.

[@blackgolddev4023]

Thank you very much

[@flonmackenzie2876]

Is it by design that payment methods added via Elements do not work with Checkout? It’s a bit annoying as the user has to enter their payment details twice as I use both Elements and Checkout on my platform.

[@StripeDev]

Hey Flon! Checkout Sessions won't display the payment method list saved on the customer. This is why the customer has to enter payment details again even though it’s been added via Elements.

[@StripeDev]

To add to our previous message. Please consider using Link[0], so that the payment_method saved with Link can be used in both Elements and Checkout. [0] stripe.com/docs/payments/link

[@flonmackenzie2876]

@@StripeDev thanks for the quick reply. I’ll give that a try!

[@SheeceGardazi]

Where can I download the complete code, like a git link please?

[@StripeDev]

Hey Sheece-you can go through out Stripe Docs which outlines everything around Stripe Payments: stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements&lang=node, stripe.com/docs/api/payment_intents/create?lang=node and stripe.com/docs/videos/developer-foundations?video=webhook-helpers&lang=node. Feel free to reach out to us if you can have any doubts.

[@Nickatanasov]

During the complete.html and .js discussion, you left out talking about creating the route for complete.html. With just the implementation outlined in the video, the complete page won't actually resolve. Should add something like this to the node server side: _router.get('/complete.html', (req, res) => {_ _res.render('complete');_ _});_

[@michaelruhl66]

actually, if you look inside the confirmPayment function we are pointed to complete.html using the "return_url" option (which is mandatory unless configured otherwise). Thats where the successful payment intent object is "plopped" into as CJ so accurately described. If you had followed along with the video you would have seen that the complete page does indeed resolve.

[@DarkHorseDigitalPerformance]

Hey! How do I get a hold of one of you for help integrating code into my web app?

[@StripeDev]

Hey there! Feel free to reach out to us at stripe.com/go/developer-chat. Cheers!

[@CoderDmitri]

@StripeDev hey guys there is a bug, where if FOLDER NAME IS PAGES, the Elements provider becomes not visible... here is demo of the bug: kzbin.info/www/bejne/i3K8e6qLpcehnaM ... any folder name other than pages works for some reason.

[@CoderDmitri]

Here is React Demo of the same thing: kzbin.info/www/bejne/rovQqWeMpLB5bbM