Accept a card payment with React Stripe.js
HTML-код
- Опубликовано: 27 авг 2024
- Learn the front end steps for accepting a payment with a card from your customers using a custom form in a React application. You'll learn how to use the CardElement component and how to use the confirmCardPayment method from Stripe.js to securely confirm a PaymentIntent client-side. This method handles 3D Secure and Secure Customer Authentication (SCA).
Watch one of these episodes to learn the server side steps required to create a PaymentIntent using the Stripe API with one of the officially supported client libraries:
Ruby - • Accept a payment - Cre...
Python - • Video
Node.js - • Accept a payment - Cre...
Go - • Accept a payment - Cre...
Java - • Accept a payment - Cre...
.NET - • Accept a payment - Cre...
PHP - • Accept a payment - Cre...
Want to see how to implement with a different client?
HTML and JavaScript - • Accept a card payment ...
iOS - • Accepting card payment...
Android - • Accept a card payment ...
Presenter
CJ Avilla - Developer Advocate at Stripe - / cjav_dev
Resources
Getting started with React Stripe.js: • Getting started with R...
Stripe.js documentation: stripe.com/doc...
Accept a payment documentation: stripe.com/doc...
Code: github.com/str...
Table of contents
00:45 Confirm the server is working as expected
02:00 Add a new payment form
03:52 Add the CardElement component
05:57 Add useElements and useStripe hooks
06:36 Create PaymentIntent on the server
08:07 Add StatusMessages helper component
09:48 Confirm with confirmCardPayment
12:21 View successful payment in the dashboard
13:00 Test 3D Secure and Secure Customer Authentication card
14:12 Add error handling
15:40 Review
Support
If you have a question, please feel free to reach out to our support team 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
It's awesome!
I wish all the tutorial vids are like this.
Cool lector we got here. :)
Thanks for your kind words! We're glad that you find these tutorials helpful.
This man is going super saiyan, thank you for the video. Amazing.
Hi Akash, this documentation about placing a hold on a card may help answer your question: stripe.com/docs/payments/capture-later
and the card element looks simple how to customize it?
You can find more information on customising elements here: stackoverflow.com/questions/47097403/how-to-customize-credit-card-form-in-stripe and stripe.com/docs/js. Let us know if these help answer your question.
Hey there, the provider component is used around the 11:09 mark (ruclips.net/video/IhvtIbfDZJI/видео.html), and is required. You can read more here: stripe.com/docs/stripe-js/react#elements-provider.
Hi there! Sorry about that, you can find it here: github.com/stripe-samples/accept-a-payment/blob/main/custom-payment-flow/client/react-cra/src/Card.js
What if i'm not using the stripe elements?
Can you guys please make a tutorial for implementation on backend only and testing with postman. Its ridiculous for me to build a small frontend just for the sake of testing Stripe. I literally cant find a tutorial anywhere that covers this.
This is very confusing. how are you able to pass the amount in eur. I am seeing EUR19.99
Hey Jason! Glad you found this helpful-the UI is actually pre-built in the React Stripe.js library: github.com/stripe/react-stripe-js
I am confused as to where the price is coming from.
I notice you don't specify a price id anywhere or a specific dollar amount.
Does your specific stripe public key specify just a single available item available to purchase?
In other implementations of stripe a price_id is required...
Hey Corey, thanks for reaching out. You can find the code used in the tutorial here: github.com/stripe-samples/accept-a-payment/blob/main/custom-payment-flow/client/react-cra/src/Card.js. This code doesn't include 'price', but does include the amount, which is specified in this backend code here: github.com/stripe-samples/accept-a-payment/blob/main/custom-payment-flow/server/node/server.js#L55 as '5999'.
As for your third question, the publishable key is not tied to a particular purchasable item. For instances where a price_id is required, one such instance is for the creation of checkout sessions. You can find an example of this here: github.com/stripe-samples/accept-a-payment/blob/main/prebuilt-checkout-page/server/node/server.js#L54.
Hope this helps, but let us know if you have any other questions!
Hey man! thanks for the helpful vid, how'd you get your form and everything to display so nicely? I didn't see you add any css, just wondering why yours is so great out of the box
Put the form in a div then style the div with padding and a shadow.
the 3184 test card does not bring up the modal. What should i be looking at?
Hi Felix! We'd love to help you out here, could you give us a little more context on the problem you're facing?
In this example we have "CardElement". But if I want to setup my form myself with separate CVC code, expiration date.
What should I provide to payment method then?
Hi there-to make sure we have a clearer understanding of your current integration, can you please contact us through support.stripe.com and we can assist you with this further?
where is the backend of this '/config' and '/create-payemnt-intent'
how can I authorize a payment now and capture the amount after a specific time?
Hi, the "create-payment-intent" endpoint is our own custome endpoint or the stripe api which sents back the clientSecret key ?
Yes, this video assumes that part is already completed by the user
How can we know which user is creating a payment Intent? Can we send the customer info while creating a payment Intent ?
Hey there-great question! You can use the "customer" parameter, which would contain the customer ID of the user. You can find more details on this here: stripe.com/docs/api/payment_intents/object#payment_intent_object-customer
@@StripeDev I am creating a application in which user can pay one time with the help of stripe. For my understanding first we have to create customer and then payment intent and attached that paymentIntent to created a customer. But I am finding some way
if a create a paymentIntent along I can send the customer info and stripe will create a user and attached the paymentIntent for me.
You would need to have created a Customer object before the parameter could be attached to the PaymentIntent, as the customer parameter for PaymentIntents only contains the customer ID itself, not any other details for the customer. These other details would be contained within the Customer object. You'll find more details about creating Customer objects here: stripe.com/docs/api/customers/create.
How do you attach a customer? When showing the dashboard the customer had the value of "None".
Isn't a payment without customer info pretty useless?
I mean, surely you would need the name, e-mail, address and so on so you know who to contant or where to send the product.
Hey Milan! Can you please tell us a little more about what you're trying to do with Stripe, and what issues you're running into? We're happy to help.
I dont know if this helps, but I think it's just because we never attached a customer to the payment. Whenever I build a site, I typically have a login/signup that stores my customer into a DB (just the customer, no payment info).
then when the customer makes a payment, they get all info generated and is displayed on their dashboard and a successful payment is then sent to me with the customer based on the database ID for easy lookup.
I may be explaining it wrong as I'm still a JR and primarily work on front end but I'd imagine here we just don't have any customer information because a customer hasn't been built at all.
thanks
I want the source code of this implementation sir, where can I find this? I have tried to access through GitHub URL but it isn't available there
Hi there! Sorry about that, you can find it here: github.com/stripe-samples/accept-a-payment/blob/main/custom-payment-flow/client/react-cra/src/Card.js
@@StripeDev Thanks sir for your kind and Instant Reply
is it possible to add card holder name or email text field ? since i want to make a record
Hey! Can you tell us a bit more about what you're trying to do? Where do you want to add the card holder name and what do you mean by 'email text field'?
@@StripeDev actually I want to know who pay for me , but seems like here’s only have card number I know I want to know who pay me according to email
Thanks for getting back to us. It seems what you're looking for might be here: stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-customized_fields
We do also have a React document here, if it helps: stripe.com/docs/stripe-js/react
Integration with Angular please!
Hello, thank you for awesome video. I am currently building a website same like Airtasker or Airbnb where I need to collect booking payments from customer and then after the job completes, I need to deduct my service fee and pay to the tasker in their AU bank account.
Could you please help me with this scenario how to achieve?
Thanks heaps!
Hi Dhiraj, this page shows how you can split funds between your platform and your connected account by creating charges.
This page is helpful for those who want to create marketplaces and pay out money to service providers: stripe.com/docs/connect/charges
Hi Ratnab, yes, this would be a function/route in your own server implementation, which would call the Stripe API using your secret keys. You can find an example of this here: github.com/stripe-samples/accept-a-payment/blob/main/custom-payment-flow/server/node/server.js#L40.
What is the name of this VScode theme!?
Vim I guess
Hi, very helpful video. Can you help me stripe with ACH using react?
Hi there-would you mind expanding on what you need help setting up?
@@StripeDev we need to accept payments via card and ACH bank accounts of US, as part of it i am clear on how to accept payment via card but not clear with ACH...i am using React in Frontend and Java in backend
You can use Sources, a single integration path for creating payments using any supported method.
We also have documentation here: stripe.com/docs/sources/ach-credit-transfer
Hello could you add the source code on git , please ?
Hey Emery, the git repo is linked in the description.
@@cjav_dev The link to github in the description leads to 404 page. Please add a working link.
Your too strong
Hey Emery, we'd recommend checking out github.com/stripe-samples/accept-a-payment/tree/main/custom-payment-flow/client which has multiple clients and the servers as well for more info!