React Stripe.js and the Payment Element
Вставка
- Опубліковано 22 лип 2024
- In this episode, you’ll learn how to accept payments with the Payment Element using React Stripe.js. We’ll also see how to leverage many types of payment methods with one single integration using automatic payment methods.
Presenter
Matthew Ling - Developer Advocate at Stripe - / mattling_dev
Table of contents
00:00 Introduction
01:07 Cloning the repo and getting started
02:12 npm installs and starting the app
03:50 Building out payment.js
05:18 Creating a payment intent on the back end
06:27 Fetching and saving the client secret
07:28 Using the elements provider
08:36 Creating the checkout form
Resources
stripe.com/docs/stripe-js/react
stripe.com/docs/payments/paym...
github.com/matthewling-stripe...
Support
If you have a question, please feel free to reach out to our support team 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
#react #stripe #payments
Dude you're such a pro! You explained clearly and gave practical options in just 15 mins.
Professional people are always making easy to understand,thank you so much and great.
Your docs were already beyond in terms of quality, and this was the icing on the cake... so easy to follow, and clarified your example code. Also big ups TCD CS class of 2000!
understanding stripe has never been this much easier. Thanks for the great content here.
Thanks for the kind words!
Sensible and complete implementation of stripe...! Hats off to you sir
That was so smooth! Thank you sir :)
Awesome! You save me! Thanks from Brasil!
Excellent video, really helpful!
Thanks Matthew!
Thanks bro.. that is an exellent information
You are awersome Sir! I wish you had a video about Meter base usage with React! :)
Thanks Brian, we appreciate the feedback 😊
thank you so much this is what i was looking for :😍😍
Thanks for the feedback, we're so glad to hear it!
Sadly I had to come to this video because the docs aren't clear. It's missing the backend instructions and nowhere in the react implementations talks about how to do so
Great, Thanks!
Is there any code example where it demo’s Stripe Payout process. I have a portal where various Vendor can advertise their service & products. And they get paid directly to your account from stripe.
If your client side server doesnt run correctly, change your script on your package.json to include:
"scripts": {
"start": "set PORT=4242 && react-scripts start",
Thank you!
Hi,
Im having this issue on the redirect:
$
I'm using hash router, so in the redirect_url: `${window.location.origin}/#/${pageRoute}`
But when I got redirected, my URL isn't ordered, is there any way to have the queryparams after my has router href?
Thanks ! What is your vscode theme ? It's very nice !
When I run the server I get "TypeError: root path required". I ran npm install and have only changed the content of post create-payment-intent. Does anyone know why this may be happening?
Hi there, thanks for the video, really clearing some things up. I do have a question about react-sttripe-checkout though. I have been using it in a project which all works fine, but the only payment method showing up is visa. I have different payment methods selected in my dashboard. Is this just something to do with react-stripe-checkout? or is it possible to accept multiple payment methods with this library aswell? Thanks in advance for the reply!
Hey there-from what you've described, it sounds like you've created a PaymentIntent without specifying automatic_payment_methods.enabled: true (stripe.com/docs/api/payment_intents/create#create_payment_intent-automatic_payment_methods) or payment_method_types (stripe.com/docs/api/payment_intents/create#create_payment_intent-payment_method_types) which then means Stripe defaults to just showing Card as a Payment Method Type. If this isn't the case, could you provide a bit more context around what you've done so far? Feel free to also send us an email at heretohelp@stripe.com.
I did everything and still cannot get a proper layout - all i get is choose a bank and add your name, no card or other options. Also, I get a strange 'Refused to execute inline script because it violates the following Content Security Policy directive' error. the payment is approved by the following code is not executed
Can anyone explain how to fix CSP problems? ELI5 mode. I don't know if it's happening because of the styled-components or whatnot... Nothing seems to work. Tried changing directives, but CSS then gets angry.
I don't quite get how you're able to get the clientSecret key without actually making a post request. When i try to do this by leaving the body empty, I get an error that says Amount is required or currency is required. So how do i do this?
Thank you
I was getting CORS ISSUE beacuse of Headers set to Content-Type:Application-Json in frontend so remove header or keep Content-Type as plain/TEXT Please someone explain the reson thank u
Hi !
If I just ask your endpoint I can get easily your clientSecret and your publishableKey ?
Why do you blur it ?
I mean every users can check the network activity and get it ?
Hey there. Thats true if you have it hardcoded in your code.
A way to hide this would be using environment variables, and if needed you can go a step further and have your environment variables encrypted as well
i want to show only Paymentelement front end part that's it..with it's functionalities that's it..what should i do ? plz help me
if form inputs are empty and i submit it the payment is created how to prevent this
how to auto selected set default payment method not card but other like iDEAL.
Thank you.
What if you want to collect shipping information using the Address element so that you can calculate shipping cost from say a Fedex or UPS api? I believe this should be created in the payment intent but you need the payment intent client secret to even render the payment element
Hi Paul-the only product of ours that supports shipping is Checkout. It has Dashboard plus API access (you create ShippingRate objects standalone or inline when creating a CheckoutSession).
This doc covers Checkout + Shipping: stripe.com/docs/payments/checkout/shipping#shipping-rate-with-tax-code
Just a note that even in Checkout, there’s no dynamic adjustment of the shipping cost. We just allow configuring which countries support shipping and a fixed shipping amount.
PaymentLinks (since they’re under Checkout) also support ShippingRates.
PaymentIntents (hence PaymentElement) and Billing primitives don’t support ShippingRates, so a developer would have to set up how you update the PaymentIntent amount depending on what needs to be shipped (and the corresponding logic for that).
great video, thanks! Don't know if any else is experiencing this error : 'PORT' is not recognized as an internal or external command in the client folder but you just need to change it to "start": "set PORT=4242 && react-scripts start" in the package.json file, hope it helps thx
Is stripe free to use? Also where are we specifying to which bank should all the money get deposited to?
Hello, do you need your own server? Can you just pay from the frontend within the react app?
Hi Stewart-you'd need a back end as well, though we do outline how to create a payment intent on the backend in this video.
could you do this with netlify serveless functions. ive only managed to do Card Element but cant figure out Payment Element
Hey there-you might check out our Stripe sample on this here: github.com/stripe-samples/react-elements-netlify-serverless.
Is there any way to get the customer details (name, emal etc.) on the Stripe dashboard using the Payment Element?
Hey there-you can collect some of this information using the Address Element: stripe.com/docs/elements/address-element.
Hi Ujol. Are you using PaymentIntent? If yes, you should follow this guide (stripe.com/docs/payments/accept-a-payment#set-up-stripe-elements) to mount a card Element, then use the PaymentIntents's client-secret and call confirmCardPayment() in your script to "confirm" the PaymentIntent which will result in a charge being created.
What if the user cancel a non-card payment? I'd like to redirect back to the checkout instead of the completion... thanks! great video
Hi Santiago-you can create a 'payment cancelled' page to redirect your customer to if they click on the Back button: docs.stripe.com/checkout/quickstart?locale=en-GB#cancel-page.
Could you please provide a resource that includes payment amount on checkout page. Strange that was not part of this video. Thanks.
Hi there! Check out our documentation on accepting a payment: stripe.com/docs/payments/accept-a-payment?platform=web
is there anyway to customize the indiviudal fields inside PaymentElement or want to fully use my own html, css PaymentElement, where cards icons at right are not shown. In addition other customization like, field rounded corner, background color changing, 1 field per row etc,. I mean my own html, css template instead of Default PaymentElmenent
Hey there-can you please reach out to us via support.stripe.com so we can not only get a better understanding of what you're trying top achieve but can review your current integration to see what is possible. Thanks.
Thanks, the issue is resolved. Actually I was trying to apply my own styles on card fields like cardNumber, which I got able to import from "@stripe/react-stripe-js" because my requirements were to apply own custom css style to custom checkout page
@@StripeDev
I guess going with Payment Element integration, business need to submit PCI compliance to stripe also. Can you comment on that part. Which is big hurdle to integrate directly elements.
Great question-this can differ between businesses as there are four different levels of PCI compliance, meaning the requirements aren't universal. We recommend checking out our step-by-step guide on PCI compliance to get started: stripe.com/guides/pci-compliance#step-by-step-guide-to-pci-dss-v321-compliance.
Hey there-feel free to reach out to our support team on Discord here: stripe.com/go/developer-chat. We'd be happy to help!
Great video, but how do I style individual input elements? For example, Just a card number input or just a country input or any of them? Thanks, in advance.
Hey Kenny-we recommend taking a look at the Style object section in our docs here: stripe.com/docs/js/appendix/style. Let us know if this helps.
@@StripeDev Thanks for your reply, however this is plane js, I use component in my React project and wanted to know if I'm able to do the same for that component
Got it. So unfortunately, this isn't possible with the PaymentElement style at the moment. You'll need to style all 'classes' of inputs as a whole. Styling individual inputs to have distinct looks that are different from other inputs in the same class isn't currently possible. Hope this helps!
@@StripeDev Yes, it does help. Thanks for your clear answer, I understand now.
Hey can we create a complete customized embedded form in which we can collect GSTIN number from client and then add to its invoice. The one chatgpt 4 upgrade is using.
Hey Daljeet-Yes we support tax ID collection in embedded checkout stripe.com/docs/tax/checkout/tax-ids?ui=embedded.
It will add a input field that will collect tax id and will this shown in invoice?@@StripeDev
That's right.
Hey Rishi-would you mind sending us the exact code or exact error message that is being shown and the full stack trace that you have used on heretohelp@stripe.com which will help us dig deeper into this? Thanks!
Can u please tell your vs code font name
Hello, I need to support also Multibanco payments that is not managed by Payment Element. I try to call await stripe.createSource() but this call never return. It is possible to use this API with React Stripe.js ?
Hi Marco! We'd encourage you to join this Discord server for better, in depth help with this: stripe.com/go/developer-chat
this video made this process so much easier than I feared it would be, but now I want to deploy my site on netlify and I'm trying to figure out how I can host and start the server. Would I have to add the node server.js command in the build command on netlify? Or do I need to host the server separately?
Hi there Jaime-you might want to check out one of our other videos on how to get started with this: ua-cam.com/video/N7qSVXyHlCA/v-deo.html.
@@StripeDev I ended up deploying the 'server' folder to render, and requesting the payment via that url! worked after some effort, thanks though!
while redirecting how can i send data along with it just like we pass in stripe checkout sessions
Hi there-mind sharing some more details around your question? This will help us get some additional context to assist you better.
can you tell me how to change styling of payment element component?
Hi there, Francis-this doc has more info about customizing the payment element: stripe.com/docs/payments/customize-payment-element.
You can also use the Appearance API to help match this to your business's branding: stripe.com/docs/payments/customize-payment-element#appearance-api.
We hope that helps!
Can we use applepay or google pay paymet methods for subscription ?
Hey there-good question! You should be able to use both Apple Pay and Google Pay for subscriptions. You can find more details on Google Pay here: stripe.com/docs/google-pay, and you'll find information for Apple Pay here: stripe.com/docs/apple-pay.
how would you collect all information after payment like shipping address, phone number, etc..
Hey! Here's some useful information about that: stripe.com/docs/payments/checkout/shipping
Wonderful video. How do I use payment element with subscriptions ? thanks in advance🙂
Hey, Siddhesh. You can follow the steps here to step up subscription using Elements: stripe.com/docs/billing/subscriptions/build-subscriptions?ui=elements#collect-payment
i'd love to get this working, but i'm just running into constant cors errors, despite having middleware setup.
Hi there-we're sorry to hear you're having trouble with errors here! If you could please send us more information via heretohelp@stripe.com we'd be happy to take a closer look and help figure out what's going wrong.
My Stripe Promise never resolves which is causing useStripe() and useElements()to be null in the nested form. Any idea what could be causing this? I'm receiving the publishable key and client secret from the my server. This is also using TypeScript.
Hey Jerry-so we can best assist you with this issue, can you please send us the relevant code via support.stripe.com/contact/login?
You can also chat live with developers in the official Stripe Discord server: stripe.com/go/developer-chat.
@@StripeDev Hi! So I actually just figured out what could be causing it. my published key isn't being used at all. I'll send the code over there.
I am getting this error, "The client_secret provided does not match any associated PaymentIntent on this account." , how to solve thi?
Hey Priyanka-could you please more context in your issue here so that we can help you. The more information we have, the better it would be for us to give you a more specific answer.
So should you create a payment intent for every attempted transaction? Because it mentioned to wrap your whole app in Elements, but in that case how do I pass a clientSecret to the root level Element when the checkout form is nested deeper??
Great question, Conor. It looks like you're talking about how we recommend wrapping your app in Elements Provider: stripe.com/docs/stripe-js/react#elements-provider, which means if a Component is at the root then it wraps everything else. With this, you don't have to actually render it at the root if you aren't ready to create a PaymentIntent-the key here is that your actual payment component(s) are wrapped by the Elements Provider component.
@@StripeDev The link you sent uses {{CLIENT_SECRET}} but doesn't tell you how to get it, you video shows how to get it but only at the moment the payment form is rendered. Not at the root of the app. So Im confused, do we create a payment intent every time the checkout should be rendered, or just once when the app loads. I noticed my payments list is littered with intentions but I only really care if about successful payments at this point - but maybe Im not thinking about it correctly
A payment intent would be created for every transaction, whether successful or not, and this would be necessary for handling any failed transactions themselves. However, you should be able to filter out your payments list on the Stripe Dashboard to only view successful transactions if you prefer by clicking the "Succeeded" filter button at the top of the list here: dashboard.stripe.com/payments.
@@StripeDev ok, so there'd be no point in wrapping the entire app in the ElementsProvider then?
As long as the ElementsProvider wraps the payment components, your app will function properly, and there isn't a specific benefit to wrapping the entire app in the ElementsProvider vs just the payment parts.
nice
I removed the 4242 port from start script in client and ran it , but test payment is failing
Hi there! We'd be happy to help you get to the bottom of this, but could you please provide us with some more details around the steps you took? The more information we have the easier it'll be to point you in the right direction.
Alternatively, you can reach out to us here for further guidance: stripe.com/go/developer-chat
I want to implement stripe in my project , for example i have product need to create product with price and then payment intent ,initiate the payment
What are the steps to do this with Apis
Hi Rishi-please take a look at our detailed guide on using the API to accept a payment: stripe.com/docs/payments/accept-a-payment.
We hope this helps you get started with implementing Stripe in your project! If you have any questions or need further assistance, please don't hesitate to reach out to us on Twitter @stripesupport.
How would I go about styling the react payment element like we do with the "vanilla one" ?
Hi Simbarashe. Would you mind sharing more details on what you want to do?
@@StripeDev I want to change some of the styles on my payment element particularly the padding and margin options for the payment-form and the form-container
Thanks for clarifying. You can use this guide to style the Element container: stripe.com/docs/js/element/the_element_container. You can learn more about Elements Appearance here: stripe.com/docs/elements/appearance-api.
This video will also cover the Stripe Elements Appearance API basics: ua-cam.com/video/hzWo7J5t_Wc/v-deo.html. We hope this helps.
@@StripeDev exactly like in the appearance api video. Except in the video, he's using raw js to generate the payment element, and has has access to stripe.elements, which accepts the appearance option. I'm curious about the equivalent of that using stripe react.js since in stripe react.js you don't have access to stuff like stripe.elements. I've tried just passing such an object to the options property of the react PaymentElement but it doesn't respond to the styles.
Hey again, This section in our docs talks about how you can pass options to the Elements provider :stripe.com/docs/stripe-js/react#elements-provider. Here is a link to the available params you can pass to options, one of which is appearance: stripe.com/docs/js/elements_object/create#stripe_elements-options.
Here is a working example for that exact video glitch.com/edit/#!/flicker-dear-jar?path=src%2FCheckout.jsx%3A40%3A31.
Hey , Thaks for makeing video ,
There are any other step to do in code to turn on google & apple pay method. because I turn on both method on my dashboard but its not seeing in payment method.
Hi Yash! Google and Apple Pay will show up for customers who have these payment methods configured on their devices. Did you test this on both devices with the payment method enabled?
@@StripeDevOhk , get the point ..👍 & is apple pay working on stripe test mode?
Yes! We recommend running Apple Pay transactions with test mode API keys to make sure the integration is working as expected.
@@StripeDev Ok Thank you .. really appreciate your work ...
Constanty getting message
:
"Cannot read properties of undefined (reading 'create')"
Im able to return publishable key to frontend, but unsuccessful with secret key. On backend I read it successfully from my env variable but always join the catch block on create-payment-intent and getting 400 and message above
Any help please?
Hi Kristijan! If you're implying to return secret key to frontend, this shouldn't be done. By the error it seems that something is wrong in your backend setup. Please send us more information over email so we can help: support.stripe.com/contact/login.
@@StripeDev no no, paymentIntent.client_secret is not returned and im getting error from backend
Can you please reach out to us using the link above so we can assist you further? Thanks!
At what point did you set the price and payment information
Hi there-mind providing some more context around your question?
I love you
What is "eur" and "1999" doing in the payment-intent endpoint route?
Hi there. This is the currency "eur"= Euro and "1999" is the amount that is being charged with this payment intent. A positive integer representing how much to charge in the smallest currency unit (e.g., 100 cents to charge $1.00 or 100 to charge ¥100, a zero-decimal currency).
@@StripeDev Yes. But why are they in the code in this video?
The currency is a required field when creating a payment intent. We hard coded 19.99 as the amount to charge but that could be pulled from a database or some otherwise calculated based on some product IDs.
*await stripe.paymentMethods.retrieve(pmStr)* ----- in React JS is returning the error "TypeError: Cannot read properties of undefined (reading 'retrieve')". This query is supposed to return a PaymentMethod object. But the error gives the impression that such a stripe query does not exist in the api. Google search did not yield any useful result.
I found the problem. *await stripe.confirmPayment()* is stripe's react js specific code, returns error & paymentIntent object. BUT *await stripe.paymentMethods.retrieve(payment_method str)* is strictly a node.js code, that will return payment method object!!! Will not work in React JS. So after getting the paymentIntent in React JC frontend, I have to get the payment method object from a nodes.js end point! Thereafter, the front end has to return the payment method data again to the back-end to process the payment email notification. It is a delicate cha cha cha dance.
Why are you requesting the publishable key from the backend when it's the publishable key, couldn't you save it in your React app? Nice video!!!!!
In case you need to roll your API keys, it is easier to replace on the server in one place, especially if you have mobile clients for iOS or Android where the client side code isn't updated frequently.
@@StripeDev Oh yes I see, thanks for clearing that up!
You enabled Apple Pay and google pay but there are not showing on the payment element. Why?
Hi there-great question! Like Express Checkout Element, there are some pre-requisites for displaying Google Pay and Apple Pay in PaymentElement. You can read more about this in detail here: docs.stripe.com/elements/express-checkout-element/accept-a-payment#prerequisites
@@StripeDev Hello, I used the stripe hosted checkout page and all the requirements are met but I still can’t see Apple Pay and google pay
Something missing its the coupon/taxes support! you have to build your own logic for that. And no, i dont want to use invoices or checkout flow.
getting Content Security Policy issue :(
There is no PaymentElement export in the package
how about subscriptions?
Hi there. You can explore the Stripe Developer Documentation for a comprehensive understanding of how to implement subscriptions using Stripe Elements: stripe.com/docs/payments/accept-a-payment#create-payment-intent-off-session
How can i create paymentMethod to ach
Hi Mahammad-mind providing some more details regarding your question? This will help us assist you in getting a solution faster.
How to use Shiping detailsm, billing details, discount code fields
Hi Davis-can you elaborate on your question further? Alternatively, if you need assistance with your integration and using Stripe, we'd suggest reaching us at support@stripe.com. Thanks.
Hi Vladislav, can you email us at support@stripe.com and we can take a closer look at your integration and assist you further?
hello stripe, thanks for the beautiful api, how can i show the price/amount a user is paying in the "pay now" button so that its like "pay now $19.99"? this helps the user know what he/she is paying before clicking on pay, also i would like to save the card after the user fills in the payment element and "checks" a checkbox input that says "save payment method for future use", i don't want to create a payment intent that automatically saves a user's card when they complete payment cause some of them might not want that and some might be using "single time" prepaid cards that expire after a charge is made, so its not ideal to save junk cards like that. Thanks 🙂
While we don't have any no-code options for either of these things, you can find details on customizing your checkout button here: stripe.com/docs/payments/checkout/customization#submit-button.
You'll find information on collecting customer consent for storing card details here: stripe.com/docs/terminal/features/saving-cards/save-cards-directly#collect-payment-method.
@@StripeDev thanks for the reply, am not using either of these, stripe terminal and stripe checkout, am a developer currently implementing the payment intents API, is there a way i can retrieve the amount of a payment intent using thr client secret on the frontend, am using the PaymentElements thats netsted in the Elements component. Thanks alot. 😊
When you render Payment Element you pass the client secret from the backend after you create the PaymentIntent. When you do this you also pass in an amount on PaymentIntent creation, so you would pass that amount to the frontend to be displayed in the button as well. With Payment Element you create the button yourself, it isn’t part of the Element itself, so you have full control of the button UI.If you still have questions, you can post them on our Discord: discord.com/invite/RuJnSBXrQn.
HARD CONTENT
Status : " requires_payment_method" I got this
I'm getting so many errors, while running npm install.. what can I do? Please help me
Hi there! We are here to help. Could you please share more details about the errors you are seeing? Have you used these steps: stripe.com/docs/stripe-js/react#setup?