Accept an Apple Pay payment with React

Learn the front end steps for accepting a payment with Apple Pay from your customers using a custom form in a React application. You'll learn how to use the PaymentRequestButtonElement component and how to use the confirmCardPayment method from Stripe.js to securely confirm a PaymentIntent client-side. This method handles 3D Secure and Secure Customer Authentication (SCA).
Watch one of these episodes to learn the server side steps required to create a PaymentIntent using the Stripe API with one of the officially supported client libraries:
Ruby - • Accept a payment - Cre...
Python - • Video
Node.js - • Accept a payment - Cre...
Go - • Accept a payment - Cre...
Java - • Accept a payment - Cre...
.NET - • Accept a payment - Cre...
PHP - • Accept a payment - Cre...
Presenter
CJ Avilla - Developer Advocate at Stripe - / cjav_dev
Resources
Getting started with React Stripe.js: • Getting started with R...
Stripe.js documentation: stripe.com/docs/js
Accept a payment documentation: stripe.com/docs/payments/acce...
Code: github.com/stripe-samples/acc...
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.
#Stripe #Payments

[@KeepItFresh02]

Exactly what i'm looking for. Thank you.

[@guillermowars7635]

Pretty good, man, I like your way to explain it

[@StripeDev]

Thanks for your reply! Ok so the set up works but the button itself is not rendering? Can you tell us what browser are you using?

[@mysterionetwork7849]

salute! for using vi editor to do web development, definitely I won't be able to do it.... lol

[@StripeDev]

We can't find any code so far suggesting that this is blocked so it does seem to be more of a specific problem!

[@mohamedyoussef8835]

Awesome video ++++++++++ 😃

[@neerajraman5920]

I have already integrated the payment gateway Fluid pay in my web application. How can we integrate apple pay into it without using stripe?

[@seokkyu7]

Does the payment need to be confirmed on the client side? I currently already have an existing code that I am reusing where I confirm the payment on the server side automatically. When confirming the payment on the server side, the payment status moves to "requires_capture" as expected (I'm using the authorize & capture method) correctly on Stripe's dashboard, but the Apple Pay Modal shows an error message at the end and does not close automatically. Love the video btw - very clear instructions to follow & implement.

[@StripeDev]

Hey Chris-great question! From the sound of it, you might need to use the method "STPApplePayContext", as this normally is what completes the payment and dismisses the Apple Pay sheet/modal. You can find more detail in the Client-side section under Step 8 here: stripe.com/docs/apple-pay.

[@StripeDev]

Hey Usman, if 'canMakePayment' is null, it means the browser and site you're testing on doesn’t support the requirements. In this instance, our recommendation is ensuring these are met and hosting the page on a URL. You can find more info here: stripe.com/docs/stripe-js/elements/payment-request-button?html-or-react=html#html-js-testing

[@user-rw1yd2yd7v]

Question: how do we update the amount in the payment request?

[@xiiEJRAM]

Is Apple get fee for every pay goes by Apple pay ? For every payment can I transfer money to my Credit account ?

[@erickeduardohernandezrodri8185]

there is a tutorial for create wallet pass in my web site?

[@sameer-mathan]

thanks,

[@meme9256]

I tried to implement it on nuxtjs with some necessary changes but it doesn't work 😗 Can you help me with that

[@opentheskyy7]

nice vim color scheme... What is the name? Can you share vim config?

[@cjav_dev]

Thanks Piotr! I'm using colorscheme onedark these days. I've customized my iTerm colors to match the Stripe brand and those flow down into the vim colors.

[@ramakrishnapenaganti934]

Is stripe storing payment method information for next time use? If yes, what happens to the payment method if the customer deletes card from Apple wallet and how stripe support Schedule payments or recurring payments in this scenario?

[@StripeDev]

Hi there-we'd recommend checking out our documentation on saving payment methods here: stripe.com/docs/payments/save-during-payment.

[@ramakrishnapenaganti934]

@Stripe Developers I looked at the documentation but couldn't find information related to my question. I really appreciate it if you can share information specific to my question.

[@StripeDev]

Hi-in the scenario that you're taking recurring or subscription payments, these payment details are stored. If your customer were to delete their card or payment method, the next time they are charged the payment would fail. What happens after that is determined by your subscription settings, which we go into more detail here: stripe.com/docs/billing/subscriptions/overview#settings.

[@user-bq7nw6xj5b]

I have some questions about Stripe in Ionic frameworks, and I'm new to using Stripe. Is Stripe compatible with Ionic Angular apps using Cordova? Are there any Stripe libraries available for use in the Ionic framework? We would like to integrate Stripe with Apple Pay in our Ionic app. Could you provide some advice? The official website only provides methods for React.Thank you.

[@StripeDev]

Hey kong-great question! You can reach out to Ionic directly for this. It seems like they do have a Stripe plugin that supports Apple Pay: github.com/capacitor-community/stripe. Let us know if this helps!

[@user-bq7nw6xj5b]

​@@StripeDev Thank you for your reply! It works in the Ionic Capacitor project. However, we are using Ionic Cordova, and it seems not to be working. Do you have any other libraries to suggest? Thank you.

[@ayushthakur8703]

after successful payment via apple pay wallet will stripe hit the webhook?

[@StripeDev]

Which webhook are you referring to?

[@ayushthakur8703]

@@StripeDev payment succeeded

[@MrVipinb]

How can I use Apple Pay info to create a token on the client side? My particular situation is where the BE server still uses the Charges API with no immediate plan to upgrade to the PaymentIntents API. All the info out there assumes the new APIs. Is it even possible to create an Apple Pay token on the client side?

[@StripeDev]

Hi there! You can use stripe.com/docs/stripe-js/elements/payment-request-button if you want to create a Token client-side. This doc might be helpful too: stripe.com/docs/js/payment_request/events/on_token

[@MrVipinb]

@@StripeDev Thank you for this. In the documents it said that for browsers other than Safari, it uses the Payment Request API. So if I have a Chrome with Google Pay Card running on an iPhone, will the interface be Apple Pay or Google Pay?

[@StripeDev]

At this time, using Chrome on iOS with Google Pay is unfortunately not supported. The interface would be Apple Pay.

[@hashirmughal5625]

only show google button

[@abelmurua6980]

Any idea why I only see the Link button? I have Google Pay and Apple Pay activated with the domain verified (file uploaded) I follow your instructions. Stil cant make it happen. my staging environment has https . Any idea?

[@StripeDev]

There's a variety of reasons that this might not be showing up for you-we'd be happy to help. Feel free to reach out to us over email: support.stripe.com/contact/email.

[@andresgaviria4548]

SAME ! :(

[@kaasegbertyoh6105]

Pls. how do I signup on Stripe from Nigeria? is there an alternative method to register on Stripe from my country Nigeria? I can't find it on the list.

[@StripeDev]

Hey Kaase-Even though we aren’t available in Nigeria yet, we recommend Stripe Atlas-we help you form your company in the US, and you can use Stripe that way. Extra fees are involved, but we’re happy to answer any questions at stripe.com/contact/sales. You can read more here: stripe.com/atlas.

[@kaasegbertyoh6105]

@@StripeDev Is there a way I can chat with sales in realtime or some kind of WhatsApp? I have sent an email but no respond in a whole day. on my attempt to signup on stripe atlas, it reminded me that im already exiting when I logged in I saw 9 years ago, it means I have been trying to get this account for a long time. in fact now its urgent.

[@StripeDev]

Unfortunately, our sales team doesn't have a live chat channel.

[@bestchoice7431]

Hello stripe developer, the domain name provided by the ngrok is not working anymore. It shows an error like "You passed an invalid URI for your domain name". How can I solve the problem? Please solve it ASAP.

[@StripeDev]

Hi there, thanks for contacting us. Can we ask you to elaborate on this further? In what context is the ngrok URL not working?

[@bestchoice7431]

@@StripeDev The error shows when I press add button after adding the domain name, downloading the file, and adding into .well-known directory. Could you please fix the problem ASAP?

[@StripeDev]

Thanks for clarifying. From here-we would suggest contacting our support team via email for assistance. They will be able to look into your account logs and follow up with you directly from their end. To reach out, please go to: support.stripe.com/contact/email

[@bestchoice7431]

@@StripeDev, Is it a common problem, or is the problem only created for me?

[@robelm4146]

@@bestchoice7431 Did you solve it perhaps? I get the same error.

[@latayjay4087]

Google pay me my money now