tomh0027

[flint nymph]

With Payment Element integration, it supports Google Pay automatically alongside with other payment methods: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements&client=react

If you wish to only have Apple Pay and Google Pay button, Payment Request Button can be used: https://stripe.com/docs/stripe-js/elements/payment-request-button?client=react

[rugged orbit]

so if I use PaymentElement, does it automatically show google pay as option?

[flint nymph]

Yes if the device is eligible for Google Pay (having Google Pay wallet with a card saved)

[rugged orbit]

how can I check if eligible or not?

[flint nymph]

This is the requirements for Google Pay: https://stripe.com/docs/stripe-js/elements/payment-request-button

With Payment Element, there is no function provided for you to check if Google Pay is eligible on customer's device

[rugged orbit]

so do I have to go to https://pay.google.com/ and setup payment method beforehand?

[flint nymph]

No, it's not needed for web payment

[rugged orbit]

but why I Google Pay button doesn't show up?

[flint nymph]

Can you share your development website, so that I can have a check?

[rugged orbit]

url?

[flint nymph]

Yes

[rugged orbit]

it's on localhost

plz check if you can access here
http://66.94.111.139:5173

[flint nymph]

How can I go to the payment page?

[rugged orbit]

http://66.94.111.139:5173/checkout

I put ExpressCheckoutElement to see if that works, but it's showing Link pay button only

[flint nymph]

Checking it now

Can you share the Subscription ID (sub_xxx) used in this page?

[rugged orbit]

what do you mean subscription id?

[flint nymph]

In this checkout page, it shows the subscription sign up page. Do you create Subscription first and render Payment Element by setup intent client secret?

[rugged orbit]

I followed this doc
https://stripe.com/docs/payments/accept-a-payment-deferred?platform=web&type=subscription

[flint nymph]

Ah I see

Let me double check

Can you share the code of creating Payment Element?

I'm able to see Google Pay in my own integration with deferred intent flow

[rugged orbit]

this is the checkout page

[flint nymph]

Where do you initialise <Elements>? I don't see it in this code

[rugged orbit]

I wrapped with this component

[flint nymph]

This page is served through HTTP. Google Pay is only supported in HTTPS

In https://stripe.com/docs/stripe-js/elements/payment-request-button?client=react#react-prerequisites:

Serve your application over HTTPS. This is a requirement both in development and production. One way to get started is to use a service such as ngrok.

This pre-requisite applies to Payment Element, Payment Request Button and Express Checkout Element

[rugged orbit]

I see

[flint nymph]

I'd recommend serving the website in HTTPS and try it again

[rugged orbit]

ok

and the other question is if return url is mandatory in confirm payment

[flint nymph]

Yes, return_url is a required field

[rugged orbit]

is there any possibility to stay on the page?

[flint nymph]

For non-redirect based payment methods like card, then yes. However, redirect-based payment methods will still be redirected to return_url after completing the payment at the payment method page.

You may set redirect to if_required to handle non-redirect based payment methods directly in your page: https://stripe.com/docs/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect

[rugged orbit]

can you tell me if google pay and Link are redirect based payment or not?

[flint nymph]

They are non-redirect based payment methods

I'd recommend giving a try in test mode

[rugged orbit]

got you
thanks for your help