React Stripe.js and the Payment Element

  Рет қаралды 86,954

Stripe Developers

Stripe Developers

Күн бұрын

Пікірлер: 159
@wzup23
@wzup23 4 ай бұрын
Dude you're such a pro! You explained clearly and gave practical options in just 15 mins.
@JavaWithJune
@JavaWithJune Жыл бұрын
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!
@KarimBakhshAmiry
@KarimBakhshAmiry Жыл бұрын
understanding stripe has never been this much easier. Thanks for the great content here.
@StripeDev
@StripeDev Жыл бұрын
Thanks for the kind words!
@AkiraWebSolutions
@AkiraWebSolutions Жыл бұрын
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",
@soontio9031
@soontio9031 Жыл бұрын
Professional people are always making easy to understand,thank you so much and great.
@AndresRamirezFuentes-t7h
@AndresRamirezFuentes-t7h 26 күн бұрын
amazing job, thank you for your demo, it was clear and consistent !
@akshittyagi1784
@akshittyagi1784 Жыл бұрын
Sensible and complete implementation of stripe...! Hats off to you sir
@NajTulum
@NajTulum Жыл бұрын
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
@rishu_rvlogs5113
@rishu_rvlogs5113 3 ай бұрын
thanks for the video, it really helped me to integrate stripe in my react app.
@Djambo1990
@Djambo1990 8 ай бұрын
That was so smooth! Thank you sir :)
@vladislavmarinov7369
@vladislavmarinov7369 Жыл бұрын
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
@raphaelamericano4115
@raphaelamericano4115 4 ай бұрын
Awesome! You save me! Thanks from Brasil!
@oismaelash
@oismaelash Ай бұрын
Great video. Thanks
@yorinis
@yorinis Жыл бұрын
Thanks ! What is your vscode theme ? It's very nice !
@FIRE_EVERYTHING
@FIRE_EVERYTHING Жыл бұрын
Excellent video, really helpful!
@StripeDev
@StripeDev Жыл бұрын
Thanks Matthew!
@kzsy
@kzsy 9 ай бұрын
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?
@Yuki-ll9mh
@Yuki-ll9mh 7 ай бұрын
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
@joadelh
@joadelh Жыл бұрын
Thanks bro.. that is an exellent information
@superserialgeeker
@superserialgeeker 2 жыл бұрын
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 ?
@stevethach3340
@stevethach3340 2 жыл бұрын
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
@dbiswas
@dbiswas Жыл бұрын
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.
@pavankumard5276
@pavankumard5276 Жыл бұрын
Is stripe free to use? Also where are we specifying to which bank should all the money get deposited to?
@MrFlipsk8boards
@MrFlipsk8boards 2 жыл бұрын
Hello, do you need your own server? Can you just pay from the frontend within the react app?
@StripeDev
@StripeDev 2 жыл бұрын
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.
@Rakesh_Rajput1
@Rakesh_Rajput1 8 ай бұрын
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
@conor909
@conor909 Жыл бұрын
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??
@StripeDev
@StripeDev Жыл бұрын
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.
@conor909
@conor909 Жыл бұрын
@@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
@StripeDev
@StripeDev Жыл бұрын
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.
@conor909
@conor909 Жыл бұрын
@@StripeDev ok, so there'd be no point in wrapping the entire app in the ElementsProvider then?
@StripeDev
@StripeDev Жыл бұрын
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.
@MahmoudGamal-sx3bj
@MahmoudGamal-sx3bj Жыл бұрын
thank you so much this is what i was looking for :😍😍
@StripeDev
@StripeDev Жыл бұрын
Thanks for the feedback, we're so glad to hear it!
@Marcoserod
@Marcoserod Жыл бұрын
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?
@StripeDev
@StripeDev Жыл бұрын
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.
@santiso878
@santiso878 7 ай бұрын
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
@StripeDev
@StripeDev 7 ай бұрын
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.
@codylillywhite4245
@codylillywhite4245 Жыл бұрын
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?
@boskoa.2290
@boskoa.2290 Жыл бұрын
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.
@jhmesseroux
@jhmesseroux 4 ай бұрын
Great video ! If i want to collect the amount instead of using a fix one in the paymentIntent , how can i do so ? Because i want the user to type or select from a dropdown the amount he wants to give . Thanks !
@StripeDev
@StripeDev 4 ай бұрын
Hey there-great question! You should create a UI control on the page for amount input, and send the amount to your backend so that you can create a PaymentIntent with that amount.
@jhmesseroux
@jhmesseroux 4 ай бұрын
@@StripeDev ok i understand but i wanted to grab all of those information(card details,amount,description text) together and make one request to the server to make the payment , so if that it's not possible i will consider your approach . thanks
@shishirkj
@shishirkj 11 ай бұрын
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
@abeechr
@abeechr Жыл бұрын
Could you please provide a resource that includes payment amount on checkout page. Strange that was not part of this video. Thanks.
@StripeDev
@StripeDev Жыл бұрын
Hi there! Check out our documentation on accepting a payment: stripe.com/docs/payments/accept-a-payment?platform=web
@kenny7385
@kenny7385 Жыл бұрын
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.
@StripeDev
@StripeDev Жыл бұрын
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.
@kenny7385
@kenny7385 Жыл бұрын
​@@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
@StripeDev
@StripeDev Жыл бұрын
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!
@kenny7385
@kenny7385 Жыл бұрын
@@StripeDev Yes, it does help. Thanks for your clear answer, I understand now.
@HORKimhab
@HORKimhab 5 ай бұрын
how to auto selected set default payment method not card but other like iDEAL. Thank you.
@mahmoudmohamed-xu2lb
@mahmoudmohamed-xu2lb Жыл бұрын
if form inputs are empty and i submit it the payment is created how to prevent this
@ArpitVijay-o9l
@ArpitVijay-o9l Жыл бұрын
Can u please tell your vs code font name
@bigazTV
@bigazTV Жыл бұрын
could you do this with netlify serveless functions. ive only managed to do Card Element but cant figure out Payment Element
@StripeDev
@StripeDev Жыл бұрын
Hey there-you might check out our Stripe sample on this here: github.com/stripe-samples/react-elements-netlify-serverless.
@HamzaTanveer-b6t
@HamzaTanveer-b6t Ай бұрын
hey I am using this paymentElement of stripe in my application but I am stuck in issue like I have a main Account ABC which has connected account XYZ and my payment goes to XYZ in case of cardless payments like apple pay, gpay but when the pop up appears after clicking it shows ABC company name and 1$ to pay but when I pay it, it does the correct payment and to the XYZ problem is only with the pop that appears when you click apple pay or google pay what can be issue?
@StripeDev
@StripeDev Ай бұрын
Hi Hamza-we'd be happy to help dig into what could be causing this issue. Please reach out to us at support.stripe.com and we can take a look.
@MrYoshi963
@MrYoshi963 Жыл бұрын
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!
@StripeDev
@StripeDev Жыл бұрын
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.
@ionelCristianLupu_
@ionelCristianLupu_ Жыл бұрын
What is "eur" and "1999" doing in the payment-intent endpoint route?
@StripeDev
@StripeDev Жыл бұрын
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).
@ionelCristianLupu_
@ionelCristianLupu_ Жыл бұрын
@@StripeDev Yes. But why are they in the code in this video?
@StripeDev
@StripeDev Жыл бұрын
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.
@jaime5601
@jaime5601 Жыл бұрын
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?
@StripeDev
@StripeDev Жыл бұрын
Hi there Jaime-you might want to check out one of our other videos on how to get started with this: kzbin.info/www/bejne/hGjUhImOrq2feaM.
@jaime5601
@jaime5601 Жыл бұрын
@@StripeDev I ended up deploying the 'server' folder to render, and requesting the payment via that url! worked after some effort, thanks though!
@siddheshshirawale4115
@siddheshshirawale4115 Жыл бұрын
Wonderful video. How do I use payment element with subscriptions ? thanks in advance🙂
@StripeDev
@StripeDev Жыл бұрын
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
@f3sa899
@f3sa899 Жыл бұрын
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!!!!!
@StripeDev
@StripeDev Жыл бұрын
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.
@f3sa899
@f3sa899 Жыл бұрын
​@@StripeDev Oh yes I see, thanks for clearing that up!
@graphiclife5416
@graphiclife5416 Күн бұрын
why would I need to load publishableKey over API? That makes no sense.
@pauljunkin6562
@pauljunkin6562 Жыл бұрын
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
@StripeDev
@StripeDev Жыл бұрын
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).
@mohitagrawal-life
@mohitagrawal-life Жыл бұрын
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.
@StripeDev
@StripeDev Жыл бұрын
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.
@MuhammadHamza-zu4hl
@MuhammadHamza-zu4hl Жыл бұрын
Is there any way to get the customer details (name, emal etc.) on the Stripe dashboard using the Payment Element?
@StripeDev
@StripeDev Жыл бұрын
Hey there-you can collect some of this information using the Address Element: stripe.com/docs/elements/address-element.
@kingbuchi9780
@kingbuchi9780 6 ай бұрын
You enabled Apple Pay and google pay but there are not showing on the payment element. Why?
@StripeDev
@StripeDev 6 ай бұрын
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
@kingbuchi9780
@kingbuchi9780 6 ай бұрын
@@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
@HigherStudyAspirant
@HigherStudyAspirant 10 ай бұрын
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
@StripeDev
@StripeDev 10 ай бұрын
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.
@HigherStudyAspirant
@HigherStudyAspirant 10 ай бұрын
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
@omotoshoisrael5904
@omotoshoisrael5904 6 ай бұрын
At what point did you set the price and payment information
@StripeDev
@StripeDev 6 ай бұрын
Hi there-mind providing some more context around your question?
@priyankasinghthakuri9776
@priyankasinghthakuri9776 Жыл бұрын
I am getting this error, "The client_secret provided does not match any associated PaymentIntent on this account." , how to solve thi?
@StripeDev
@StripeDev Жыл бұрын
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.
@rishishah2340
@rishishah2340 Жыл бұрын
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
@StripeDev
@StripeDev Жыл бұрын
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.
@SJ-sl8ox
@SJ-sl8ox Жыл бұрын
while redirecting how can i send data along with it just like we pass in stripe checkout sessions
@StripeDev
@StripeDev Жыл бұрын
Hi there-mind sharing some more details around your question? This will help us get some additional context to assist you better.
@mehmetnamver914
@mehmetnamver914 2 жыл бұрын
Can we use applepay or google pay paymet methods for subscription ?
@StripeDev
@StripeDev 2 жыл бұрын
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.
@francisabounader331
@francisabounader331 Жыл бұрын
can you tell me how to change styling of payment element component?
@StripeDev
@StripeDev Жыл бұрын
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!
@S4GU4R0
@S4GU4R0 8 ай бұрын
i'd love to get this working, but i'm just running into constant cors errors, despite having middleware setup.
@StripeDev
@StripeDev 8 ай бұрын
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.
@vineshswargam5618
@vineshswargam5618 Жыл бұрын
There is no PaymentElement export in the package
@himalayaputra3021
@himalayaputra3021 4 ай бұрын
Nice tutorial 🎉 *but in your screen/ this video, why gpay and applepay buttons are not being shown at checkout payment element where you have enabled these ON in your stripe dashboard?* Anyone please help
@StripeDev
@StripeDev 4 ай бұрын
Hi there-can you please contact us via support.stripe.com so we can look into this further?
@himalayaputra3021
@himalayaputra3021 4 ай бұрын
@@StripeDev thanks for responding, I have edited my comment, can you please read it again I hope you will get my query now
@StripeDev
@StripeDev 4 ай бұрын
We would still need you to contact our support team. We have no way to review your current integration or set up from here. We're more than happy to get this looked into and answer that query through support.stripe.com. Thanks.
@himalayaputra3021
@himalayaputra3021 4 ай бұрын
@@StripeDev sure we will contact there. Thanks
@JerryCox-s5d
@JerryCox-s5d 11 ай бұрын
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.
@StripeDev
@StripeDev 11 ай бұрын
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.
@JerryCox-s5d
@JerryCox-s5d 11 ай бұрын
@@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.
@jamesr2408
@jamesr2408 5 ай бұрын
*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.
@jamesr2408
@jamesr2408 5 ай бұрын
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.
@architdadwal7556
@architdadwal7556 Жыл бұрын
I removed the 4242 port from start script in client and ran it , but test payment is failing
@StripeDev
@StripeDev Жыл бұрын
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
@simbarashemutasa6978
@simbarashemutasa6978 2 жыл бұрын
How would I go about styling the react payment element like we do with the "vanilla one" ?
@StripeDev
@StripeDev 2 жыл бұрын
Hi Simbarashe. Would you mind sharing more details on what you want to do?
@simbarashemutasa6978
@simbarashemutasa6978 2 жыл бұрын
@@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
@StripeDev
@StripeDev 2 жыл бұрын
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: kzbin.info/www/bejne/nqu6oGqAatmSjcU. We hope this helps.
@simbarashemutasa6978
@simbarashemutasa6978 2 жыл бұрын
@@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.
@StripeDev
@StripeDev 2 жыл бұрын
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.
@riyakundu4164
@riyakundu4164 Жыл бұрын
I'm getting so many errors, while running npm install.. what can I do? Please help me
@StripeDev
@StripeDev Жыл бұрын
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?
@KristijanStosic
@KristijanStosic Жыл бұрын
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?
@StripeDev
@StripeDev Жыл бұрын
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.
@KristijanStosic
@KristijanStosic Жыл бұрын
@@StripeDev no no, paymentIntent.client_secret is not returned and im getting error from backend
@StripeDev
@StripeDev Жыл бұрын
Can you please reach out to us using the link above so we can assist you further? Thanks!
@zodman
@zodman 2 жыл бұрын
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.
@MarcoBacchetta-ff9pi
@MarcoBacchetta-ff9pi Жыл бұрын
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 ?
@StripeDev
@StripeDev Жыл бұрын
Hi Marco! We'd encourage you to join this Discord server for better, in depth help with this: stripe.com/go/developer-chat
@randomperson7009
@randomperson7009 Жыл бұрын
how would you collect all information after payment like shipping address, phone number, etc..
@StripeDev
@StripeDev Жыл бұрын
Hey! Here's some useful information about that: stripe.com/docs/payments/checkout/shipping
@YashSomani-vr3hp
@YashSomani-vr3hp Жыл бұрын
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.
@StripeDev
@StripeDev Жыл бұрын
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?
@YashSomani-vr3hp
@YashSomani-vr3hp Жыл бұрын
@@StripeDevOhk , get the point ..👍 & is apple pay working on stripe test mode?
@StripeDev
@StripeDev Жыл бұрын
Yes! We recommend running Apple Pay transactions with test mode API keys to make sure the integration is working as expected.
@YashSomani-vr3hp
@YashSomani-vr3hp Жыл бұрын
@@StripeDev Ok Thank you .. really appreciate your work ...
@NoudvD63
@NoudvD63 2 жыл бұрын
Great, Thanks!
@SamuelTrador
@SamuelTrador Жыл бұрын
Thank you!
@eucheckout7
@eucheckout7 Жыл бұрын
How to use Shiping detailsm, billing details, discount code fields
@StripeDev
@StripeDev Жыл бұрын
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.
@ennissg
@ennissg Жыл бұрын
getting Content Security Policy issue :(
@sas10x39
@sas10x39 Жыл бұрын
how about subscriptions?
@StripeDev
@StripeDev Жыл бұрын
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
@snehvachhanivlogs
@snehvachhanivlogs Жыл бұрын
Thank you
@StripeDev
@StripeDev Жыл бұрын
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!
@StripeDev
@StripeDev Жыл бұрын
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!
@StripeDev
@StripeDev Жыл бұрын
Hi Vladislav, can you email us at support@stripe.com and we can take a closer look at your integration and assist you further?
@alexcortes4761
@alexcortes4761 2 жыл бұрын
nice
@TheVexille43
@TheVexille43 11 ай бұрын
I love you
@abdirahmann
@abdirahmann Жыл бұрын
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 🙂
@StripeDev
@StripeDev Жыл бұрын
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.
@abdirahmann
@abdirahmann Жыл бұрын
@@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. 😊
@StripeDev
@StripeDev Жыл бұрын
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.
@vana__f7570
@vana__f7570 27 күн бұрын
В Гожицах лучше научат
@MatheusPereira-nn9dj
@MatheusPereira-nn9dj 7 ай бұрын
HARD CONTENT
@ujolmaharjan2010
@ujolmaharjan2010 Жыл бұрын
Status : " requires_payment_method" I got this
Accept a payment with the PaymentElement using Node.js
24:16
Stripe Developers
Рет қаралды 16 М.
Accept an Apple Pay payment with React
24:39
Stripe Developers
Рет қаралды 31 М.
This Game Is Wild...
00:19
MrBeast
Рет қаралды 181 МЛН
From Small To Giant 0%🍫 VS 100%🍫 #katebrush #shorts #gummy
00:19
How To Accept Payments With Stripe
23:05
Web Dev Simplified
Рет қаралды 283 М.
Building a Subscription Payments System with Next.js & Node.js
18:33
How to integrate Stripe Payment in React and Node.js (Step by Step)!
11:38
I DONT USE NEXT JS
54:01
ThePrimeTime
Рет қаралды 376 М.
Stripe with React and node crash course
49:05
Hitesh Choudhary
Рет қаралды 100 М.
Getting started with React Stripe.js
9:07
Stripe Developers
Рет қаралды 35 М.
How I setup stripe in my Next.js side project
13:38
Web Dev Cody
Рет қаралды 47 М.
Every React Concept Explained in 12 Minutes
11:53
Code Bootcamp
Рет қаралды 808 М.
Build a Shopping Cart With React JS & Stripe
1:16:28
Traversy Media
Рет қаралды 114 М.
This Game Is Wild...
00:19
MrBeast
Рет қаралды 181 МЛН