No video :(

Accept a payment with the PaymentElement using Node.js

Подписаться 29 тыс.

Просмотров 15 тыс.

50% 1

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/doc...
PaymentIntent API reference - stripe.com/doc...
Learn all about webhooks - stripe.com/doc...
Support
If you have a question, please feel free to reach out to our support team at support.stripe... or on Discord at stripe.com/go/...
Updates
Sign up to stay updated with developer news: go.stripe.glob...
Feedback
If you have any feedback about this or other episodes, let us know: forms.gle/VjNq...
#stripe #payments #nodejs

Опубликовано:

15 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 30

@himalayaputra3021 18 дней назад

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

@blackgolddev4023 Год назад

Thank you very much

@ingoandelhofs 11 месяцев назад

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 11 месяцев назад

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 11 месяцев назад

@@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 11 месяцев назад

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 9 месяцев назад

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 9 месяцев назад

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.

@ericruizmolero9653 7 месяцев назад

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

@StripeDev 7 месяцев назад

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.

@eduardoPicazzo 9 месяцев назад

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

@StripeDev 9 месяцев назад

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

@matthewpearson155 8 месяцев назад

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?

@Nickatanasov 11 месяцев назад

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 11 месяцев назад

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.

@user-sb1ys3um3l 11 месяцев назад

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

@StripeDev 11 месяцев назад

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

@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!

@muhammedashkar692 7 месяцев назад

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

@StripeDev 7 месяцев назад

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

@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-UAYJwUpbngA.html ... any folder name other than pages works for some reason.

@CoderDmitri Год назад

Here is React Demo of the same thing: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-xZmx4VoKF7Q.html

@SheeceGardazi 8 месяцев назад

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

@StripeDev 8 месяцев назад

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.