Accept a Google Pay payment with Stripe.js

Learn the front end steps for accepting a payment with Google Pay from your customers using a custom form with HTML and JavaScript. You'll learn how to use the payment request button 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...
Table of contents
00:00 Introduction
00:51 Confirm server endpoints
01:52 Code base tour
03:27 Add div container for Google Pay button
04:00 Create google-pay.js
04:50 Create a Payment Request object
06:16 Create a Payment Request Button element
07:00 Check if the user can make a Google Pay payment
09:00 Listen for the paymentmethod event
10:50 Review Google Pay test requirements
11:28 Setup ngrok
12:40 Create the payment intent on the server
13:48 Confirm the Google Pay payment
18:52 Recap
Presenter
Dawn Lambeth - Developer Advocate at Stripe - / dawnlambeth
Resources
Getting started with 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...
ngrok: ngrok.com/
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

[@lucaslaurens4208]

I really enjoyed listening to your tutorial because it was really clear and your voice is really composed. You are calm and we understand everything. Thank you.

[@guillermowars7635]

I love the way you describe everything, 10/10

[@mirzajoldic1395]

Great video and very informative! You also have a very soothing singing voice :-)

[@HarpreetKaur-wp3zv]

Hello, Thank you for this simplified video on configuring google pay with stripe. It is really very helpful. I have a question: does this implementation require any extra steps for going live? as per my understanding, using live API keys should work, is this correct ?

[@StripeDev]

Hi there - that's for your feedback on the video! And yes, using live API keys would work. If you run into any issues, feel free to contact us at support.stripe.com. Thanks.

[@StripeDev]

Hi there, that would suggest the requested resource doesn't exist. Can you give us more detail on this?

[@rajashekarkothapelli9649]

Hi there, thanks for this great video! Will it launch the google pay application in mobile when we click on pay now button in the web app. thanks.

[@StripeDev]

Hi there, could you try this instead: " JSON.stringify(…) "? Let us know if you have any other issues with that. Thanks.

[@daniyalbutt7392]

Nice and simple demo. Can you please guide how to add test card in google wallet.

[@StripeDev]

Hey there-good question! When testing with Google Pay, you wouldn't use one of Stripe's test cards. Just make sure that your Stripe Dashboard is in test mode, and you can test Google Pay with a normal card used in your Google wallet without any actual charge occurring. stripe.com/docs/google-pay?platform=android#html-js-prerequisites

[@SimonKagwi]

Shouldn't lines 55-59 be in an 'else' block, so they're not executed if a payment fails?

[@WaniMudasir786]

Please make a demo video on how to do it in React, it will be very help full

[@StripeDev]

Thank you for this feedback, Wani!

[@study8266]

Why does this show 'Pay Now' instead of 'GooglePay' or 'ApplePay'?

[@Ben-mx1ip]

Why is the customisation capability for positioning and button size for Google payments so poor?

[@venkatesh2788]

Please make with reactjs and nodejs

[@baradhur3348]

It would be really helpful if you could make a video about setup test cards for apple and google pay. Right now it's very hard to get straight information about it, what to do, where to go, how to set it up, what limits it has, etc. only found 1 blog post that explained it a little bit, and nothing on the stripe support website.

[@StripeDev]

Hey Baradhur-thanks for your feedback! Right now, Stripe test card information can’t be saved to Wallet. We'll link some helpful docs for steps below. Apple Pay: support.stripe.com/questions/testing-apple-pay-with-stripe stripe.com/docs/apple-pay?platform=ios#testing-apple-pay Google Pay: stripe.com/docs/stripe-js/elements/payment-request-button?platform=html-js-testing-google-pay#html-js-testing stripe.com/docs/google-pay#web

[@alexdivito]

hey were you able to figure out how to add a test card for Google Pay?

[@demotest566]

create-payment-intent shows error(not found) do you have any alternate for this...

[@plmstrokes]

this works with expo managed projects?

[@acche-rc]

Where is the link for doing this in React? Thanks

[@akshayvahile1684]

Hello, Good Day! First of all thanks for providing the simplified video with a better explanation. I followed all your instructions and it is working fine. But I have one issue. I'm getting a 'Link Pay faster' but which redirects me to Link gateway rather than the 'Pay Now' button which should redirect me to the saved cards screen. Please help me with this. Thank you.

[@StripeDev]

Hey there-thanks for your question! If you'd like, you can turn off Link in the "Checkout and Payment Links" area found in your Dashboard here: dashboard.stripe.com/settings/checkout.

[@akshayvahile1684]

@@StripeDev Hi Thanks for the help.I have turned off the link but still I am getting 'Link Pay faster' button and also I am not able to add card to my google pay account.Could you please tell me how to add a card in google pay account.

[@StripeDev]

Thanks for the follow-up. Can you reach out to our support at support.stripe.com/contact/login so that we can look into your integration in detail?

[@virose_pt7313]

in the Woocommerce Stripe Plugin, there is an option Stripe "Payment Request - Enable", and when I use Chrome the option Google Pay appears on the product page and in the checkout page. My Gmail info is automatically filled (name, address, postal code, credit card number,...). I didn't tested it, but everything seems fine. If I use the Safari brownser with a valid payment option attached will the Apple Pay button appear in my product page and checkout page? Thank you.

[@StripeDev]

Hey - there are some additional steps for Apple Pay but see here: stripe.com/docs/stripe-js/elements/payment-request-button to implement this option. Thanks.

[@sanjohn1753]

how to get this sourcecode completed ?

[@brunotavares2581]

hello great content, couldn't find in docs, which fake card can i use to test this integration ?

[@StripeDev]

Hi-great question! You can find a list of test cards to use with your integration over at stripe.com/docs/testing#cards

[@handotint5598]

@@StripeDev But these cards are not accepted by Google Pay as they are considered "invalid".

[@sdivakarrajesh]

Is there a way to get the "google pay" branded button instead of the stripe button?

[@arairyohei7457]

Hello! Google Pay seems to be the default option now if you store cards in Google Pay and Chrome wallets. If you only store Chrome wallet, Google Pay branded button never becomes visible

[@jakubbiernacki2641]

and what about recurring payments (subscriptions)? Is it still possible to select Google Pay as a payment method?

[@StripeDev]

Hi Jakub! Google Pay is fully compatible with subscriptions. We have a helpful little guide here: stripe.com/docs/google-pay

[@sachendrakumar3343]

I am getting js error TypeError: JSON.stringfy is not a function in line body: JSON.stringfy({

[@hemanth6951]

Voided invoice not possible do payment right? but my customer did payment after 23 hours(2days later), subscription status showing expired but invoice is paid and got invoice paid event without subscription id(webhook)🤔

[@joy_sam_raj]

Does this google pay payment gateway support UPI payment of India?.. If else any UPI mode is available in Stripe?

[@StripeDev]

Hey there-Google Pay and Apple Pay are currently unavailable for merchants and customers in India on Stripe Checkout and Stripe Elements. Here's more about supported payment methods and currencies for Stripe accounts in India: support.stripe.com/questions/supported-payment-methods-currencies-and-businesses-for-stripe-accounts-in-india. Let us know if you have any further questions.

[@joy_sam_raj]

​@@StripeDev​ In India people prefer UPI only.. without that E-commerce is impossible.. We love stripe for its DX friendly. Please create this new feature.

[@ramidwaikat6861]

how I can implement it with Nextjs and nodejs?

[@StripeDev]

Hi Rami! Next.js is a framework we don't officially support, but there are a ton of third-party guides and resources out there you can find with a web search.

[@abhilashanil5512]

Hi, How do we add card in Google wallet?

[@StripeDev]

Hi 👋 You can find our Google wallet docs here: stripe.com/docs/google-pay

[@Notklon]

@@StripeDev Please, and me help?

[@StripeDev]

👋 How can we help?

[@hemanth6951]

Why built-in stripe checkout (card) showing google pay also an option 🤔 but I no need of that

[@StripeDev]

Hi there! It's possible to disable apple and google pay in your checkout settings in the dashboard if you wish.

[@hemanth6951]

@@StripeDev thank you but I got option in live mode , I disabled

[@salvadorh8838]

That payment method is not valid for google, can you help me?

[@StripeDev]

Hey there! 👋 Could you elaborate on the issue you're seeing? We might be able to help if we know more.

[@ScottDurkin1]

I keep getting errors when trying to make a payment.. Everything is working correctly, payment intent is creating something stripe dashboard side.

[@StripeDev]

Hey there-could you provide us with some examples of the errors you are seeing?

[@ScottDurkin1]

@@StripeDev Sure, I do get “Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id')”. The pay intent is created stripe side but google pay fails every time.

[@StripeDev]

Looks like we'd need a bit more information about your setup. I you don't mind, please reach out to us via the link here stripe.com/go/developer-chat

[@StripeDev]

Hey Hemanth! We would recommend reaching out to support directly with this as we'd like to discuss things at length with you. You can do so here: support.stripe.com/contact

[@sreenathreddy2158]

Google app preparation

[@afaqkhurshid]

where i can get this file return.js utils.js return.html because when I am execute the google-pay.html its not show the message "Googlepay is unavalaible" i am stuck ther what I can do now.

[@StripeDev]

Hi there. We want to help here. Would you mind sharing the exact issue you are running into? Feel free to post the exact error message and what line of code it is coming from. We may be able to look into it more.

[@user-hz7mo7fx2r]

Hi there, thanks for this great video! Is stripe.paymentRequest's method (google-pay.js: lines 4-13) may be used to change the total amount to pay from the client-side (e.g., to make all goods free of charge), or does it affect only payment sheet representation? Yet it's still confusing that paymentIntent is used to confirm paymentRequests :)

[@StripeDev]

Hey there-great question! You should be able to change the total amount using paymentRequest. You would just change the 'amount' value for the PaymentItem object, which you can find more details on here: stripe.com/docs/js/appendix/payment_item_object.

[@ragulrakona5796]

Hello, Good Day! First of all thanks for providing the simplified video with a better explanation. I followed all your instructions and it is working fine. But I have one issue. I'm getting a 'Link Pay faster' but which redirects me to Link gateway rather than the 'Pay Now' button which should redirect me to the saved cards screen. Please help me with this. Thank you.

[@StripeDev]

Hey Ragul. This process has been updated-today the `PaymentRequestButton´ uses Link if Google/Apple Pay are not available in the browser. You can learn more about it here: groups.google.com/a/stripe.com/g/shipped/c/nr7EEGF5bCA/m/vgXT9l4NAQAJ? and here: stripe.com/docs/stripe-js/elements/payment-request-button,

[@ragulrakona5796]

@@StripeDev Hi Thanks for the help I got the button today somehow but now onClick of PAY NOW button it is not showing saved cards but I have one card saved in my google account.

[@StripeDev]

If you're logged in to a Google account with saved cards in your wallet then they should all be listed. Keep in mind these cards must be set up as payment methods here: pay.google.com/gp/w/u/0/home/paymentmethods.

[@ragulrakona5796]

Hi How did you add the test Stripe card to Google wallet ?

[@StripeDev]

Hi Ragul-if you'd like to opt out of Link, you can turn it off in your Checkout settings: dashboard.stripe.com/account/checkout/settings