Accept a payment with the PaymentElement using Node.js
Vložit
- čas přidán 27. 07. 2024
- In this episode, you'll learn how to accept a one-time payment with a custom form using Node.js with Express on the server and the Stripe Payment Element on the client. The Payment Element enables you to collect several different payment method types from cards and bank accounts to wallets and buy-now-pay-later payment methods.
Presenter
CJ Avilla - Developer Advocate at Stripe - / cjav_dev
Chapters
00:00 Introduction
01:37 Install a sample with the Stripe CLI
03:50 Enable payment methods in the dashboard
04:55 Overview of payment flow
05:42 Create payment intent on the server
09:14 Collect payment details on the client
13:51 Submit payment details to Stripe
16:30 Build a confirmation page
19:24 Handle webhooks and post-processing events
22:03 Test your integration with Stripe test cards
23:30 Conclusion
Resources
Accept a payment - stripe.com/docs/payments/acce...
PaymentIntent API reference - stripe.com/docs/api/payment_i...
Learn all about webhooks - stripe.com/docs/videos/develo...
Support
If you have a question, please feel free to reach out to our support team at support.stripe.com/ or on Discord at stripe.com/go/developer-chat
Updates
Sign up to stay updated with developer news: go.stripe.global/dev-digest
Feedback
If you have any feedback about this or other episodes, let us know: forms.gle/VjNqzRhotM2snYo88
#stripe #payments #nodejs - Jak na to + styl
Thank you very much
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.
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.
Hi CJ! Really nice tutorial! Can we implement this in Webflow? I just want to achieve this on a Webflow landing page :)
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.
can you use coupons/promo codes wit this payment element approach? or is the checkout option mandatory for those cases??
Hi Eduardo. Have you checked this Docs on discounts and coupons: stripe.com/docs/payments/checkout/discounts?
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?
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.
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.
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
@@StripeDev thanks for the quick reply. I’ll give that a try!
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?
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.
@@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?
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.
Hey! How do I get a hold of one of you for help integrating code into my web app?
Hey there! Feel free to reach out to us at stripe.com/go/developer-chat. Cheers!
how to get payment method id so that i acn use it for charging later, official documentation didn't help me much
Hi there-can you elaborate on your question further? Have you checked out our doc here: stripe.com/docs/payments/save-and-reuse.
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');_
_});_
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.
what is the parameter that i should setup to not redirect?
Hey there, here are our docs on customizing redirect behaviour: stripe.com/docs/payments/checkout/custom-redirect-behavior. Let us know if this helps.
@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: czcams.com/video/UAYJwUpbngA/video.html ... any folder name other than pages works for some reason.
Here is React Demo of the same thing: czcams.com/video/xZmx4VoKF7Q/video.html
Where can I download the complete code, like a git link please?
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.