CODEWITHSUNDEEP
stripe-paymentsgoogle-pay
S C
S C

Reputation: 187

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

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>

Upvotes: 13

Views: 18991

Answers (3)

MJC
MJC

Reputation: 3949

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.

Upvotes: 4

toxa_xa
toxa_xa

Reputation: 639

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.

Upvotes: 9

Soc
Soc

Reputation: 7780

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';
  }
});

Payment Sheet with Google Pay payment method

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?

Upvotes: 1

Related Questions