Why does the Stripe Google Pay Button not render for me on the UI despite not having any errors or exceptions?

Question

I've used the Stripe Payment Request Button HTML code from the stripe docs on https://stripe.com/docs/stripe-js/elements/payment-request-button to incorporate the Google Pay button on my UI but the stripe component is not being rendered on the UI.

I'm using a Windows 10 machine and have served my application over a https server, the HTML code that I took from Stripe Docs does not show any errors or exceptions on the developer console, the iframe component can be seen on the Elements tab but the button is not being rendered on the UI.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Google Pay Payment</title>


</head>
<body>
<h1>This is a sample payment page using Stripe</h1>


    <label for="card-element">
      Credit or debit card
    </label>
    <form action="{{ url_for('pay')}}" method="post" id="payment-form">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <div id="payment-request-button">
      <!-- A Stripe Element will be inserted here. -->
    </div>
    </form>





<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript">
  var stripe = Stripe('pk_test_IVLw1g5rpDe7MwEu6PpxKxFL00SQlZd4eB');
  var paymentRequest = stripe.paymentRequest({
    country: 'US',
    currency: 'usd',
    total: {
      label: 'Demo total',
      amount: 1000,
    },
    requestPayerName: true,
    requestPayerEmail: true,
  });
  var elements = stripe.elements();
  var prButton = elements.create('paymentRequestButton', {
    paymentRequest: paymentRequest,
  });

  // Check the availability of the Payment Request API first.
  paymentRequest.canMakePayment().then(function(result) {
    if (result) {
      prButton.mount('#payment-request-button');
    } else {
      document.getElementById('payment-request-button').style.display = 'none';
    }
  });



  // Check the availability of the Payment Request API first.
  paymentRequest.canMakePayment().then(function(result) {
    if (result) {
      prButton.mount('#payment-request-button');
    } else {
      document.getElementById('payment-request-button').style.display = 'none';
    }
  });

</script>
</body>
</html>

Your code works on my end, I see the "Pay Now" button. Are you testing on Google Chrome with a supported payment method added to Chrome? — hmunoz, Apr 19 '19 at 22:10
same issue. I tried on chrome, safari, firefox neither google pay nor apple pay shows up. — Aseem, Sep 01 '20 at 03:20

score 7 · Answer 1 · answered Dec 28 '19 at 10:23

7

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

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

answered Dec 28 '19 at 10:23

toxa_xa

619
6
8

3

This still hasn't fixed the issue for me. It is very finnickey and I can't figure out the issue. – gopro_2027 Mar 09 '20 at 09:54
Open chrome://settings/payments and add card like 4242 4242 4242 4242 from here. This worked for me.. Thanks – Gulshan Apr 16 '21 at 06:40
I see the "Pay Now" button, but is there a way to get the google branded "Google Pay" button? i see that the googlepay is `false` on the canMakePayment result – Divakar Rajesh Jul 25 '21 at 08:08
It does not work immediately for me. I have to wait for a couple of minutes to see google pay `Pay` button – new2cpp Jun 13 '22 at 17:16

score 2 · Answer 2 · answered Nov 17 '22 at 11:52

It may help somebody having the same problem.

In my case I had to disable 3rd party cookie blocking (which was enabled by default) and had to check the option "Allow sites to check if you have payment methods saved" on the Payment Methods settings page in Chrome.

This might also be applicable account wide, since it started working on the Desktop and Smartphone.

score 1 · Answer 3 · answered Sep 06 '19 at 22:38

Your code works for me as well: https://jsfiddle.net/ufn9w5La/

var stripe = Stripe('pk_test_IVLw1g5rpDe7MwEu6PpxKxFL00SQlZd4eB');
var paymentRequest = stripe.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: {
    label: 'Demo total',
    amount: 1000,
  },
  requestPayerName: true,
  requestPayerEmail: true,
});
var elements = stripe.elements();
var prButton = elements.create('paymentRequestButton', {
  paymentRequest: paymentRequest,
});

// Check the availability of the Payment Request API first.
paymentRequest.canMakePayment().then(function(result) {
  if (result) {
    prButton.mount('#payment-request-button');
  } else {
    document.getElementById('payment-request-button').style.display = 'none';
  }
});

A couple of things to clarify:

The Stripe Payment Request Button will not render a Google Pay button, it has it's own Stripe "Pay now" button
- The payment sheet does include Google Pay as a payment method (see image)
Browser needs to support the Payment Request API (see caniuse) - which browser are you testing on?

It seems like if a specific service worker from Google Pay is already installed on your browser, your Google Pay account would be picked up for Stripe Goole Pay payment. If not, only locally saved cards would be picked up and that's where I get stuck for associating a billing address with my card. — Hesam, Aug 17 '20 at 11:09

Why does the Stripe Google Pay Button not render for me on the UI despite not having any errors or exceptions?

3 Answers3