Displaying Stripe Payment Request button as a Google Pay button

3
votes

Is it possible to display the Stripe Payment Request Button as a Google Pay button? Currently, it shows up as an Apple Pay button on iOS devices. But when I open it from Chrome, it looks like this:

enter image description here

1
stripe-payments
It's not currently possible with Stripe's Payment Request button, it only has a custom button for Apple Pay. Also, it only supports Google Pay on mobile Chrome (on Desktop Chrome it uses browser-saved cards) stripe.com/docs/stripe-js/elements/… – duck

1 Answers

4
votes

I believe this is intentional on stipes part - showing a button saying "google pay" would not be strictly correct, as chrome lets you pay with cards stored in the browser that are NOT google pay.

This is discussed a bit in more detail here: https://github.com/stripe/stripe-payments-demo/issues/9

However, if you don't care that it's absolutely correct, you can add whatever button you want: https://stripe.com/docs/stripe-js/elements/payment-request-button#html-js-own-button:

Using your own button

If you wish to design your own button instead of using the paymentRequestButton > Element, you may show your custom button based on the result of paymentRequest.canMakePayment(). Then, use paymentRequest.show() to display the > browser interface when your button is clicked.

So it should be possible to create your own google pay button in whatever style you want (by styling it separately for chrome, which I'm not sure how to do, perhaps you can find help here: How to apply specific CSS rules to Chrome only?). The payment request API does not currently support determining which payment options are availible, so this is a problem you'll have to overcome.

UPDATE

Since April 2021, Stripe now shows you the google pay button by default:

Google Pay UI update: We now show a branded “Google Pay” button instead of the generic “Pay now” button when Google Pay is an option