React Stripe.js and the Payment Element

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

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

50% 1

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

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

27 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@wzup23 13 дней назад

Dude you're such a pro! You explained clearly and gave practical options in just 15 mins.

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

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 Год назад

understanding stripe has never been this much easier. Thanks for the great content here.

@StripeDev Год назад

Thanks for the kind words!

@soontio9031 Год назад

Professional people are always making easy to understand,thank you so much and great.

@akshittyagi1784 Год назад

Sensible and complete implementation of stripe...! Hats off to you sir

@Djambo1990 4 месяца назад

That was so smooth! Thank you sir :)

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

Excellent video, really helpful!

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

Thanks Matthew!

@raphaelamericano4115 11 дней назад

Awesome! You save me! Thanks from Brasil!

@joadelh Год назад

Thanks bro.. that is an exellent information

@briannezhad9579 10 месяцев назад

You are awersome Sir! I wish you had a video about Meter base usage with React! :)

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

Thanks Brian, we appreciate the feedback 😊

@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

@MahmoudGamal-sx3bj 10 месяцев назад

thank you so much this is what i was looking for :😍😍

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

Thanks for the feedback, we're so glad to hear it!

@NoudvD63 Год назад

Great, Thanks!

@user-yk9ro4nz9f Год назад

Thank you!

@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",

@snehvachhanivlogs Год назад

Thank you

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

@yorinis Год назад

Thanks ! What is your vscode theme ? It's very nice !

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

@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

@codylillywhite4245 10 месяцев назад

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?

@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 Год назад

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.

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

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

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

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

@superserialgeeker Год назад

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 Год назад

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

@alexcortes4761 Год назад

nice

@kzsy 5 месяцев назад

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?

@Rakesh_Rajput1 4 месяца назад

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

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

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

Is stripe free to use? Also where are we specifying to which bank should all the money get deposited to?

@MrFlipsk8boards Год назад

Hello, do you need your own server? Can you just pay from the frontend within the react app?

@StripeDev Год назад

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.

@HORKimhab Месяц назад

how to auto selected set default payment method not card but other like iDEAL. Thank you.

@Yuki-ll9mh 3 месяца назад

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

@mahmoudmohamed-xu2lb 11 месяцев назад

if form inputs are empty and i submit it the payment is created how to prevent this

@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 Год назад

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).

@jhmesseroux 3 дня назад

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 3 дня назад

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 2 дня назад

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

@MuhammadHamza-zu4hl Год назад

Is there any way to get the customer details (name, emal etc.) on the Stripe dashboard using the Payment Element?

@StripeDev Год назад

Hey there-you can collect some of this information using the Address Element: stripe.com/docs/elements/address-element.

@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 Год назад

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 Год назад

@@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 Год назад

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 Год назад

@@StripeDev Yes, it does help. Thanks for your clear answer, I understand now.

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

I love you

@bigazTV Год назад

could you do this with netlify serveless functions. ive only managed to do Card Element but cant figure out Payment Element

@StripeDev Год назад

Hey there-you might check out our Stripe sample on this here: github.com/stripe-samples/react-elements-netlify-serverless.

@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 Год назад

Hi there Jaime-you might want to check out one of our other videos on how to get started with this: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-N7qSVXyHlCA.html.

@jaime5601 Год назад

@@StripeDev I ended up deploying the 'server' folder to render, and requesting the payment via that url! worked after some effort, thanks though!

@abeechr Год назад

Could you please provide a resource that includes payment amount on checkout page. Strange that was not part of this video. Thanks.

@StripeDev Год назад

Hi there! Check out our documentation on accepting a payment: stripe.com/docs/payments/accept-a-payment?platform=web

@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 Год назад

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 Год назад

@@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 Год назад

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 Год назад

@@StripeDev ok, so there'd be no point in wrapping the entire app in the ElementsProvider then?

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

@santiso878 3 месяца назад

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

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.

@HigherStudyAspirant 6 месяцев назад

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

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

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

@SJ-sl8ox Год назад

while redirecting how can i send data along with it just like we pass in stripe checkout sessions

@StripeDev Год назад

Hi there-mind sharing some more details around your question? This will help us get some additional context to assist you better.

@mehmetnamver914 Год назад

Can we use applepay or google pay paymet methods for subscription ?

@StripeDev Год назад

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.

@siddheshshirawale4115 Год назад

Wonderful video. How do I use payment element with subscriptions ? thanks in advance🙂

@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

@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 Год назад

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.

@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 Год назад

Hi Marco! We'd encourage you to join this Discord server for better, in depth help with this: stripe.com/go/developer-chat

@user-pq4jc6tc7r 5 месяцев назад

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.

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

Hey Daljeet-Yes we support tax ID collection in embedded checkout stripe.com/docs/tax/checkout/tax-ids?ui=embedded.

@user-pq4jc6tc7r 5 месяцев назад

It will add a input field that will collect tax id and will this shown in invoice?@@StripeDev

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

That's right.

@randomperson7009 Год назад

how would you collect all information after payment like shipping address, phone number, etc..

@StripeDev Год назад

Hey! Here's some useful information about that: stripe.com/docs/payments/checkout/shipping

@simbarashemutasa6978 Год назад

How would I go about styling the react payment element like we do with the "vanilla one" ?

@StripeDev Год назад

Hi Simbarashe. Would you mind sharing more details on what you want to do?

@simbarashemutasa6978 Год назад

@@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 Год назад

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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hzWo7J5t_Wc.html. We hope this helps.

@simbarashemutasa6978 Год назад

@@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 Год назад

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.

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

can you tell me how to change styling of payment element component?

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

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!

@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 Год назад

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 Год назад

@@StripeDev Oh yes I see, thanks for clearing that up!

@S4GU4R0 4 месяца назад

i'd love to get this working, but i'm just running into constant cors errors, despite having middleware setup.

@StripeDev 4 месяца назад

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.

@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 Год назад

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 Год назад

@@StripeDevOhk , get the point ..👍 & is apple pay working on stripe test mode?

@StripeDev Год назад

Yes! We recommend running Apple Pay transactions with test mode API keys to make sure the integration is working as expected.

@YashSomani-vr3hp Год назад

@@StripeDev Ok Thank you .. really appreciate your work ...

@ionelCristianLupu_ Год назад

What is "eur" and "1999" doing in the payment-intent endpoint route?

@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_ Год назад

@@StripeDev Yes. But why are they in the code in this video?

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

@zodman Год назад

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.

@user-dy6mk9cj3i Год назад

Can u please tell your vs code font name

@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 Год назад

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.

@user-df7bo2ir8z 7 месяцев назад

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

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.

@user-df7bo2ir8z 7 месяцев назад

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

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

I am getting this error, "The client_secret provided does not match any associated PaymentIntent on this account." , how to solve thi?

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

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.

@omotoshoisrael5904 2 месяца назад

At what point did you set the price and payment information

@StripeDev 2 месяца назад

Hi there-mind providing some more context around your question?

@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 Год назад

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 Год назад

@@StripeDev no no, paymentIntent.client_secret is not returned and im getting error from backend

@StripeDev Год назад

Can you please reach out to us using the link above so we can assist you further? Thanks!

@jamesr2408 Месяц назад

*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 Месяц назад

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 Год назад

I removed the 4242 port from start script in client and ran it , but test payment is failing

@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

@vineshswargam5618 Год назад

There is no PaymentElement export in the package

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

@ennissg Год назад

getting Content Security Policy issue :(

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

how about subscriptions?

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

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

@kingbuchi9780 2 месяца назад

You enabled Apple Pay and google pay but there are not showing on the payment element. Why?

@StripeDev 2 месяца назад

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

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

@MahammadsuhelDollarbird Год назад

How can i create paymentMethod to ach

@StripeDev Год назад

Hi Mahammad-mind providing some more details regarding your question? This will help us assist you in getting a solution faster.

@eucheckout7 Год назад

How to use Shiping detailsm, billing details, discount code fields

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

@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 Год назад

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 Год назад

@@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 Год назад

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.

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

@MatheusPereira-nn9dj 3 месяца назад

HARD CONTENT

@ujolmaharjan2010 Год назад

Status : " requires_payment_method" I got this

@riyakundu4164 Год назад

I'm getting so many errors, while running npm install.. what can I do? Please help me

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