Request Payment button does not show up

[abernier]

Using the official demo https://stripe-payments-demo.appspot.com the Pay request button does not show up on safari :

I've tested on safari-12 on osX-10.14 and also safari-11 on osX-10.13

Is it a stripev3.js known bug ?

Thanks for your help

[abernier]

It is also not showing up on latest Chrome Canary release (v71):

[jenan-stripe]

Hi @abernier! The Payment Request Button requires a saved payment card with Apple Pay, Chrome, or Google Pay. Please see more details here: https://stripe.com/docs/stripe-js/elements/payment-request-button#testing

[abernier]

Hi @jenan-stripe and thank you for the quick reply.

By reading https://support.apple.com/en-us/HT204506 I think I know get the point : in order to pay on Safari, we need to have:

• a Touch ID capable device (like iPhone or macbook pro...)
• To be able to add a card on apple pay:
  

---

I was missing the point because I though I could use a basic credit card setup in my Safari preferences:

I think you may add some clarifications on your docs https://stripe.com/docs/stripe-js/elements/payment-request-button#testing because the feature is not only browser dependent but also rely on device capabilities (if it has touch ID or not) + having a pay account correctly set up.

Thanks again for your answer.

[2-towns]

Same problem on Chrome 70 on MacOs Mojave.

I have a payment card saved:

But the button "Pay now" for request payment api is not displayed :

It's working on my mobile (Android 8.1.0 with Chrome 70).

[SpencerDuball]

I believe this may be an issue only affecting chrome for Mac. I have saved payment methods on my google account, but do not have Apple Pay setup/enabled. Here are my results to back up the claim this is only affecting chrome for Mac.

• Chrome (70) for Mac: ❌
• Chrome (71) for Mac: ❌
• Chrome (70) for Android ✅
• Chrome (70) for Linux (Pop_OS): ✅

[katenelson42]

Has there been any resolution on this problem? Payment Request Button also does not appear for me even though I am using chrome 71 (windows, not mac) and have a payment method on my google account.

[nazreen]

@katenelson42 any luck? I'm facing the same issue

[kschaer]

Found this answer on stackoverflow- https://stackoverflow.com/a/49602079
"While Chrome iOS does include a PaymentRequest implementation, it does not allow PaymentRequest to be used from an iframe which prevents Stripe's payment request button element from working. We're working with the Chrome team to get this resolved in a future release."

Looks like iOS Chrome users are currently out of luck; perhaps it's the same issue with Chrome for MacOS.

[Crashdoom]

I'm also having the same issue on Chrome for Windows (v71.0.3578.98) where the Payment Request button doesn't appear. I have a saved payment method that I can use on Chrome Android which renders the Payment Request button.

Edit: Chrome Canary for Windows (v73.0.3682.0) also doesn't appear to show the button for me.

[tedlin182]

@kschaer In development/test mode, I actually got the Google Pay button showing on Chrome MacOS but I had to add a Stripe test card to my Google account via Chrome > Settings > Payment Methods and then it magically appeared.

However, none of my other real CC's in my Google account show up in the Google Pay UI after I click the Google Pay button so I'm not sure if while in test/dev mode with Stripe, they only accept test cards?

[kschaer]

@tedlin182 Thanks for the tip, what you describe works for me as well. I'm familiar with using the stripe test card numbers to test a traditional card entry form, but had no idea that the test card was required for GooglePay/ browser saved CC usage with the Payment Requests button in dev. This discrepancy with how the button behaves for ApplePay is not well documented.

An additional note for anyone else trying to test this- I was able to add the stripe test card to Chrome on desktop, but was not able to add it to Chrome on iOS (card verification failed).

Edit: I also needed to disable my Dashlane chrome extension. I wonder why that extension interferes with the button.

[kyleabens]

@tedlin182 How did you add a test card to your Google account without Google refusing to accept it for being a fake card?

[chauchakching]

From my testing, currently on macOS Chrome:

1. Google Pay works in https://paydemo.withgoogle.com/, but not by using Stripe's Payment Request Button.
2. If you've added testing cards to Chrome on macOS, Stripe's button still shows up and let you use those cards to pay. You can do this in Chrome's settings.

[scottwilson312]

I'm experiencing this on Chrome Version 71.0.3578.98 (Official Build) (64-bit), Ubuntu 18.04.

Notice a saved card on Chrome - yet no "Pay with saved card" button on the stripe example.

[scottwilson312]

The solution of adding a test stripe card "4242 4242 4242 4242" to my saved cards worked, and actually allowed me to choose my other "hidden card".

Note that adding a name to my other saved card allowed it to be displayed without having the test card saved.

Not sure if this is a bug or a feature!

[vildhjarta8]

first of all, thank you @scottwilson312 you saved my time.

also i faced another issue - payment request doesn't work if you are using the 1password extension even if you have the saved cards and the "4242" card.

Latest chrome, win10

[nhterry]

Google Pay / Buy Now Button Not Showing Up (Windows 10 on Chrome)

This is using a LIVE Stripe Key with Stripe Elements, it is not working on Windows 10 on Chrome. I initially encountered the issue using the Stripe WooCommerce plugin, but I see the same issue is happening on this repo and the Stripe Elements Examples repo (https://github.com/stripe/elements-examples). This is the only place I've seen where I can comment, so please forgive me if this is the wrong place.

I just tested this out on Mac OS High Sierra 10.13.6 on Chrome 73.0.3683.86 and it works. (You can choose from your Credit Cards saved within Chrome)

On Windows 10, Chrome 73.0.3683.103, Google Pay only works with the 4242 test card added to Chrome. It looks like the plugin is on 'developer' mode for Windows 10 on Chrome.

@thorsten-stripe @jenan-stripe I don't mean to bug, but is this being worked on or looked into? Cheers!

When I select choose payment method, none of my actual working payment methods show up:

I have 2 other payment methods saved in Chrome that did not show up in the above screen but show up in Chrome settings:

[nhterry]

So apparently, I had a bunch of credit cards saved in Google Pay from Android or directly on Google, but it for some reason does not count as cards that can be accessed from the Buy Now button (or saved within the Chrome Browser directly).

Is there any way to activate that buy now button or to make it show up even if a user does not have any cards saved in their Chrome browser? The use case is that the Chrome browser already likely has their address information auto-filled even if their credit card details are not. The UI on Chrome/Google Pay is more slick that a standard checkout form.

Also, there is a hook to check for Apple Pay, but is there a hook to check for Google Pay or for Microsoft Pay? Users are more likely to understand direct Google Pay or Microsoft Pay options than be stuck in decision dilemma with duplicate buy now buttons.

Thanks <3

[kyleabens]

If a payment method is saved within the Chrome browser directly the pay now button appears but the canMakePayment() method returns {applePay: false}. If it is saved in Google Pay the pay now button does not appear and canMakePayment() returns null. Not sure why this is but just wanted to add that.

[rrigoni]

Any solution for this issue? Facing it here also.

[leolux]

In which countries do you face the issue as described by kyleabens.?
I have the issue in Germany.

[LanderBeeuwsaert]

I have it in Belgium

[indiadearlove]

I have this issue in the UK (MacOS 10.14.4, Chrome 78.0.3904.108)

Also have not been able to get the test card numbers into Google pay

[toxa-xa]

Faced same issue and finally solved it. Looks like it depends on country in you google payment profile.
So my solution is:

1. Open https://pay.google.com/gp/w/u/0/home/settings
2. Tap on edit icon on Country/Region row.
3. Add fake profile with US as country, it OK to use any random address and phone
4. It's impossible to add test stripe card from here, so
5. Open chrome://settings/payments and add card like 4242 4242 4242 4242 from here.
6. Now open https://stripe-payments-demo.appspot.com/ again and check if you can see Pay Now button.

[RoohbirSingh]

We were having the same issue. It was working on Android devices, but not on Chrome on Mac or Chrome on iOS. This is what we've found so far:

1. Android devices or Chrome on Linux don't seem to let you add the test card 4242 4242 4242 4242 - so you need to add a real card to test.
2. Chrome on MacOS does though - and the Payment Request button only shows up on Chrome on Mac (at least when using Stripe in test mode) when you have a test card added.
3. Apply Pay still doesn't seem to show up on iOS in test mode. Haven't tested live mode.

Hope the above helps.

[neocamel]

I was having this problem in Chrome on Windows 10. The Payment Request button appeared fine on my android device, but wouldn't appear on desktop, even though I have a card added in my payment methods. What got it working for me was to add a card in the brower directly (not tied to Google Pay). So I actually had the same card twice. One manually added inside chrome desktop, and the same card is listed again, but with a 'google pay' designation. Once I added the card directly in the browser, it started appearing.

A bug for sure, because shouldn't a card that's in your Google pay (and is already showing in your google account in the desktop browser) qualify as a valid payment method to display the Payment Request Button? Regardless, adding a duplicate card through the desktop chrome app fixed the issue for me and allows me to test my application.

[kunaljaypatel]

Just to clarify why the Request Payment button doesn't show up for "Google Pay" on mobile/web browsers. Stripe's Payment Request Button only checks to see if the browser has saved payment cards. If you have no cards saved to the browser, the button does not show up. It does not query the signed-in user's saved Google Pay cards.

Querying the browser's cards (Stripe's Payment Request Button)

Querying the signed-in user's cards. (Google Pay API)

There are additional verification steps you have to do to get Google Pay working properly to query a signed-in user's cards. If you got Google Pay working on an Android mobile app, it's a similar process.

1. Go to the Google Pay Business Console and register your business with Google if you haven't already.
2. Get a Merchant Id
3. Manually integrate that Google Pay button with your website using Stripe to handle decrypting the payment_method on your backend.
4. Submit your website for verification.
5. Get approved so you become "verified" to get rid of the warning that says something like Google cannot verify the identity of this merchant. Please be careful when paying.

I just ended up manually integrating a Google Pay button and threw it below Stripe's Payment Request Button because I wanted that functionality. You can actually use the manually integrated Google Pay button on any browser, which is even better.

[hofman-stripe]

Just to clarify why the Request Payment button doesn't show up for "Google Pay" on mobile/web browsers. Stripe's Payment Request Button only checks to see if the browser has saved payment cards.

Stripe.js checks if the browser has an enrolled instrument using hasEnrolledInstrument(), for either basic cards or for Google Pay. The problem is that the PaymentRequest API implementation in Chrome has limitations:

• For a card to be usable through PR API, the saved card needs to contain some info (e.g. card holder name, future expiration date). See https://chromestatus.com/feature/5532279906500608
• For Google Pay, the payment handler needs to been already installed. Unfortunately this doesn't happen automatically on desktop and the user first needs to have used Google Pay once before with the PaymentRequest API (with an integration that allowed the use of Google Pay without checking if it was ready). The fact that Chrome shows Google Pay cards in the saved payment methods of the browser is misleading as the browser does not make those cards available by default.

If you want to test this, Stripe.js basically does the same check as https://rsolomakhin.github.io/pr/pwg/ but doesn't show the button if no instruments are enrolled.

[juddey]

@hofman-stripe Sorry to ping you personally but I wanted to clarify something you talked about in the comment above. I've got the Google Pay app set up on my android 10 phone, one credit card added. I have no credit cards set up in Chrome.

If you want to test this, Stripe.js basically does the same check as https://rsolomakhin.github.io/pr/pwg/ but doesn't show the button if no instruments are enrolled.

I went to the site https://rsolomakhin.github.io/pr/pwg/ in my chrome os browser, hit the buy button and was prompted with a GPay with my credit card details. ✔️

Then I went to the stripe-demo site, but I didn't see a "Pay Now" button. I presume this is because the demo site doesn't query Stripe with the same options as the rsolomakhin site does here.

I'm presuming that if I made the same call as rsolomakhin with the same parameters (and my own keys of course) I'd be able to determine whether google pay was a supported payment method, and
from there complete the rest of the transaction using Google Pay through Stripe.

Is my understanding correct? Thanks in advance. 😄

[hofman-stripe]

@juddey there are 2 things:

• On Chrome Android, the browser PaymentRequest API lies, and always answers true to hasEntrolledInstrument for Google Pay, which means if Google Pay is available (canMakePayment), then we would show the payment button even if no card is configured in Google Pay. The enrolled instrument check is only meaningful on desktop.
• The above is true in normal times. However Chrome Android 83 shipped with a crippling bug, and Google Pay transactions would never complete. See https://bugs.chromium.org/p/chromium/issues/detail?id=1090986. On June 3rd we completely disabled Google Pay (all versions, both desktop and mobile) as a workaround. Today we re-enabled Google Pay, except for impacted Chrome Android version, aka Chrome 83 if lower than 83.0.4103.100. Google rollout is very slow, so you probably don't have an up to date version yet, which is why you don't see a "Pay Now" button. If you switch to "Desktop Site" you will see the button, but you won't be able to complete a payment.

[hofman-stripe]

Also, Chrome implements rate limiting for payment method querying so you should not query hasEnrolledInstrument yourself and let Stripe.js do it. If Stripe.js gets rate limited for some reason, it will always show the button, even if no payment method is available, resulting is low conversion from the button.

[juddey]

Thank you for your speedy answer @hofman-stripe, and your explanation. I wont hold my breath for a Google browser update though. 😄

[rchrdnsh]

I am in a situation where neither the 'G Pay' button or the more generic 'Pay Now' button of stripes design show up...anywhere...not in my web app ( Gatsby + Netlify ) and not in any of stripes demos of either checkout or elements. The 'Apple Pay' button shows up and works great in safari on iPhone, iPad and MacBook Pro and Air. I have quintuple checked that i have payment information saved in Chrome 83 for macOS, and it all looks good, and I have seen the 'G Pay' button pop up on other sites, but not for anything that stripe seems to make. Just curious why this might be and if there is anything that i might be able to do about it...

[hofman-stripe]

@rchrdnsh have you checked that the payment methods saved in Chrome have billing info associated to them? Or that the Google Pay Payment Handler is actually installed? As I mentioned in my earlier comment, Stripe.js not only checks that the browser supports those PaymentRequest methods, but that they actually have available instruments as well.

[rchrdnsh]

Billing info? Check! XD

PaymentHandler? How do I do that? Tried to google that and it looks like it's an API, not a plugin to be installed in Chrome:

https://developers.google.com/web/updates/2018/06/payment-handler-api

According to the google dev docs my google pay seems to be working just fine when not a stripe implementation:

...so i don't know...G Pay seems to work for me in chrome with all my payment and billing info correct on sites that support it, except when stripe is involved (my site, stripe examples, etc...). I'm using the PaymentRequestButtonElement to implement on my site, and apple pay works great, just not any of the other quick pay options.

Here is my code, basically copied directly from the stripe docs. Please let me know if I am missing something:

useEffect(() => {
    if (stripe && paymentRequest === null) {
      const pr = stripe.paymentRequest({
        country: 'US',
        currency: 'usd',
        total: {
          label: 'Donation Amount',
          amount: amount,
        },
        requestPayerName: true,
        requestPayerEmail: true,
      })
      pr.canMakePayment().then((result) => {
        if (result) {
          setPaymentRequest(pr)
        }
      })
    }
  }, [stripe, paymentRequest])

  useEffect(() => {
    if (paymentRequest) {
      paymentRequest.update({
        total: {
          label: 'Donation Amount',
          amount: amount,
        },
      })
    }
  }, [amount, paymentRequest])

...and thank you for your time and effort! XD

[hofman-stripe]

Sorry, let me take a step back. There is nothing you can do on your end when integrating the Stripe Payment Request to force the button to be shown or not. I was trying to explain why the button may or may not show in Chrome.

Stripe Elements currently integrates with Google Pay through the browser PaymentRequest API, not the Google Pay SDK. If you see a branded Google Pay button on a website, it's likely a Google Pay SDK integration, not using the browser PaymentRequest API.

Stripe checks if the browser is ready to pay with either a saved card or Google Pay, and uses the browser PaymentRequest API to check if either instrument is enrolled. The check is basically equivalent to the one done in this page. If it says "Has enrolled Instrument" then the button should show. If it says "Has enrolled instrument" there but the Stripe button doesn't show on your page, then we need to investigate further.

If you, for testing in your local browser, want to force the browser based Google Pay Payment Handler to be installed, you can visit https://rsolomakhin.github.io/pr/gp2/ and click "Buy". Currently Chrome doesn't install a Payment Handler unless it's the only payment method configured in the PaymentRequest API call, which is not the case with most integrations, including Stripe's, since we support both Google Pay and basic-card.

Long story short, the browser PaymentRequest API is finicky, we try to shield you from some of the complications, but there are still issues, which translates into e.g. the button not showing in some environments. We're working with Google and Standards Groups to improve the API and the payment experience they provide, so things should get better over time.

[rchrdnsh]

ooh! I don't remember doing anything different but the 'pay now' button just showed up for me! This makes me very happy!

...again, however, dunno what i did or if i did anything, but it seems to be working now...will test with other browsers now. Here's a screenshot with the 'Pay Now' button showing up in a dialog box when I click into the cardNumberElement field:

it's showing up now on stripes example as well:

no idea what's different, tho...quite perplexed...🤔

[hofman-stripe]

You probably visited a page, like https://rsolomakhin.github.io/pr/gp2/, which forced the Google Pay Payment Handler to install. Once it's there, it stays available (unless you manually uninstall the associated service worker in the chrome internals page)

[rchrdnsh]

AHA! I know what happened! Chrome updated to Version 84! They seemed to have fixed something on their end, then, it would seem. ok, things are starting to make more sense, this is good. And thank you @hofman-stripe for your detailed explanation, as that helps quite a bit...maybe adding something like that in the docs would be nice as well...

I also want to officially vote for OFFICIAL 'G Pay', Samsung Pay', 'Ali Pay', 'Microsoft Pay' etc... integration for the PaymentRequestButtonElement in the future, as that would be amazing to see :-)

[rchrdnsh]

hmmmm...i also did go to that other page as well...any way to install the google pay payment handler on my site? If it wasn't the upgrade to chrome 84 that did it?

[hofman-stripe]

officially vote for OFFICIAL 'G Pay', Samsung Pay', 'Ali Pay', 'Microsoft Pay' etc... integration for the PaymentRequestButtonElement in the future

Microsoft Pay, and I believe Samsung Pay are both "branded" versions of basic card. It's already supported in those browsers through a simple PaymentRequest, but there will never be a separate branded button. A direct Google Pay integration might be possible. AliPay doesn't have any browser PaymentRequest support as far as I know, and I'm not sure if they have an SDK to integrate with, however you can support AliPay today with Sources (on the demo site, choose China as a country).

For those wallets that do not integrate with the browser PaymentRequest API, it becomes tricky since a single button wouldn't work anymore: there would be no way to seamlessly let the customer choose the payment method they want to use. This is one of the problems we're working with the Standards groups to solve.

any way to install the google pay payment handler on my site

As I stated before, there is unfortunately nothing you can do on your end. It's a matter of the Google Pay Handler being available in the browser, not just for your site. Google is aware of the limitation and working on improving the experience in Chrome.

[rchrdnsh]

hmmmm...so just roll with and wait and see it improve over time, i guess. Thank you for taking the time to fully explain things. It is very helpful and gives me much needed clarity :-)

[dixydo]

I had similar issues as you, guys. I have switched between test and live keys and Google Pay button finally started work expectantly.

[alllohaaa]

Can't get Apple Pay button with activated domain and see it with deactivated one.

We started with the activation of merchant.dessert-pay.com in Stripe Apple Pay settings. Then we noticed that payment with Apple Pay does not proceed. Not sure why, but suppose because of web page use not 443 port.
So we created separate stripe.dessert-pay.com subdomain, activated it, and deactivated the old one. Surprisingly old domain continues to show Apple Pay button, while new is orphan.

The issue is mentioned here and disappears in private browsing or if in Safari->Settings->Privacy: “Allow websites to check for Apple Pay and Apple Card” is unchecked.

Does apple-developer-merchantid-domain-association file contain domain association? Seems it's permanent to Stripe account

[alllohaaa]

Can't get Apple Pay button with activated domain and see it with deactivated one.

We started with the activation of merchant.dessert-pay.com in Stripe Apple Pay settings. Then we noticed that payment with Apple Pay does not proceed. Not sure why, but suppose because of web page use not 443 port.
So we created separate stripe.dessert-pay.com subdomain, activated it, and deactivated the old one. Surprisingly old domain continues to show Apple Pay button, while new is orphan.

The issue is mentioned here and disappears in private browsing or if in Safari->Settings->Privacy: “Allow websites to check for Apple Pay and Apple Card” is unchecked.

Does apple-developer-merchantid-domain-association file contain domain association? Seems it's permanent to Stripe account

We activated Apple Pay for platform account, not connected.
Now we resolved the issue by api Apple Pay registration for connected accounts.

[lnfernandobr]

Does anyone know why the stripe requires that a card is already saved to display the button ??

And does anyone know how I can solve the problem? Is there any method to save the card and then call PaymentRequest.canMakePayment

[DRSchlaubi]

Hey,
There are a bunch of things that are kind of weird about the payment request button

• It uses a custom image not even saying google pay on it instead of the official one
• it requires a card being saved

both things are different on the official demo site https://developers.google.com/pay/api/web/guides/resources/demos
it even works in incognito mode as it fallbacks into a web version if the native version is not available

the stripe version does not do this so it never worked in the desktop version for me
But if you take a look it shopify which is a stripe customer according to stripes website google pay always works
Also it doesn't show up for me on my phone with cards added
Also even if the chrome desktop google pay ui works on the demo pages it does not work on the stripe demo

Why does it work on shopify but not with the stripe sdk or the stripe demo?
Why does the sdk use a different image for the button?
And how is this still an issue after 2 years?

[hofman-stripe]

@lnfernandobr we have found that when a customer doesn't have a card already enrolled in their wallet (Apple Pay or Google Pay), the conversion rate falls dramatically. That's probably due to the fact that most card enrollment flows require an authentication step that takes the customer away from the checkout flow, sometimes with no easy way to come back. If the customer doesn't have a card enrolled, there is pretty much no benefit to using a wallet compared to regular card Elements. That said we do understand some merchants would like the ability to control this and we are looking into ways to make that check controllable.

@DRSchlaubi, as stated above in this issue, Stripe.js currently relies on the browser PaymentRequest API to offer Google Pay. Since we also support browser saved cards through the same API, and Chrome implements quotas as a privacy measure, there is no way for Stripe.js to know if the payment method available is through Google Pay or a browser saved card. Because of that we cannot show a branded Google Pay button. We are still working with Google to improve the situation here.

Also it doesn't show up for me on my phone with cards added

Do you have an iPhone or Android? On Android, is the Google Pay native application installed? Do you have the option enabled to allow Websites to check for available payment methods in Chrome settings? Does the following page indicate that you can make payment and have an enrolled instrument: https://rsolomakhin.github.io/pr/gp2/

Why does it work on shopify but not with the stripe sdk or the stripe demo?

Shopify does not use Stripe.js or Elements.

[DRSchlaubi]

Is there a reason for only supporting the payment request API as it seems to be extremely difficult and unreliable to use with google pay.

Google pay will stop working once you switch to another browser than chrome or install a password manager extension supporting card autofill like dashlane as the extension disables chromes builtin autofill, once I disabled dashlane it worked again

In addition the autofill version requires you to enter your email address (name) and address each time you make a payment https://rice.by.devs-from.asia/chrome_aDaa24qlxw.png
whilst the google pay api just requires you to click a button

Why not support both the autofill api and the google pay api like it's done with apple pay

Does the following page indicate that you can make payment and have an enrolled instrument: https://rsolomakhin.github.io/pr/gp2/

Even with Dashlane enabled the page shows me the google pay view https://rice.by.devs-from.asia/chrome_MGnnlpCKLB.png
I made that screenshot on windows on Android it sometimes work and sometimes it doesn't

[leolux]

@hofman-stripe "Chrome implements quotas as a privacy measure"

Where to read on? Magic implementations is never good for business applications.

[badrshs]

did anyone have a solution for this in 😅 2022 😅 ?

I'm facing the same issue. all was working 1 month ago and I did test that on multiple machines but suddenly it stopped working everywhere, I checked https://stripe-payments-demo.appspot.com/ and it's not showing there too

I already inserted 4242 card into my chrome browser.

I tried to use Microsoft Edge and insert the cart there but it's still not showing.