Google pay does not show up with Mobile Payment Element but works with the separate Google Pay option

[nandrew132]

I used the Mobile Payment Element option in my react native mobile app. It works fine for the card, but does not show up the Google Pay button, even when i enabled it following this: https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=payment-sheet#react-native-google-pay When i click on Checkout, it shows up the card element. It does not give me the option to choose between card and google pay button. It also does not save my previous card info, for using it next time.

I originally thought something else is the matter, but if I set it up using the following link, Google pay works fine. https://stripe.com/docs/google-pay?platform=react-native

Not sure what the difference is. I am getting the client secret, customer id, ephemeral key from the backend without problems. This is my code:

const { initPaymentSheet, presentPaymentSheet } = usePaymentSheet();

const { error, paymentOption } = await initPaymentSheet({
        merchantDisplayName: "Example, Inc",
        customerId: customer,
        customerEphemeralKeySecret: ephemeralKey,
        paymentIntentClientSecret: paymentIntent,
        applePay: {
          merchantCountryCode: 'US',
        },
        googlePay: {
          merchantCountryCode: 'US',
          testEnv: true,
          currencyCode: 'usd',
        },
        // Set `allowsDelayedPaymentMethods` to true if your business can handle payment
        //methods that complete payment after a delay, like SEPA Debit and Sofort.
        allowsDelayedPaymentMethods: true,

        defaultBillingDetails: {
          name: 'Jane Doe',
        },
      });
const openPaymentSheet = async () => {
    const { error } = await presentPaymentSheet();

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else {
      Alert.alert('Success', 'Your purchase is successful!');
    }
  };

I am testing on Google Pixel 4

[charliecruzan-stripe]

Is this on an emulator or a physical device? do you have the google pay app with a payment method setup?

[nandrew132]

Is this on an emulator or a physical device? do you have the google pay app with a payment method setup?

Hi. I am running it on a physical device (Google Pixel 4). Yes I do have google pay app setup with payment method. I am able to use it with the Google Pay button option that Stripe provides. I am unable to see the G Pay option when i use the Mobile Payment Element.

[charliecruzan-stripe]

could you check the adb logcat for any relevant messages? I'm not able to reproduce this myself

also- let me know what version you're using

[nandrew132]

could you check the adb logcat for any relevant messages? I'm not able to reproduce this myself

also- let me know what version you're using

There is no Error per say in adb logcat or anywhere else. It just does not show up. When I click on Buy/Checkout, I see this screen

As opposed to something like this as shown in your video.

My stripe-react-native version is 0.35.0. Thanks.

[charliecruzan-stripe]

cc @seanzhang-stripe i think you've seen this before, right?

[seanzhang-stripe]

Hi @nandrew132 can you call isPlatformPaySupported (doc, api) to check whether the device supports Google Pay?

You mentioned that you are able to use the PlatformPayButton integration. Are you able to complete a payment by through PlatformPayButton in the same Android device?

[nandrew132]

Hi @nandrew132 can you call isPlatformPaySupported (doc, api) to check whether the device supports Google Pay?

You mentioned that you are able to use the PlatformPayButton integration. Are you able to complete a payment by through PlatformPayButton in the same Android device?

---

Hi. Yes the device supports Google Pay and I have code that checks it. It logs that google pay is supported:

     if (!(await isPlatformPaySupported({ googlePay: {testEnv: true} }))) {
        Alert.alert('Google Pay is not supported.');
        return;
      } else {
        console.log('google pay supported')
      }

And yes I am able to complete transaction through the PlatformPayButton on the same device.

Thanks.

[seanzhang-stripe]

Hi @nandrew132 that's quite strange. Can you share with me a test react-native project that I can run and reproduce the problem?

[nandrew132]

Hi @nandrew132 that's quite strange. Can you share with me a test react-native project that I can run and reproduce the problem?

Hi. Here is a test project: https://github.com/nandrew132/stripe-gpay-test/tree/main

This only has the front end though. I did not create a backend test project that connects to stripe. But.. is there a specific version of Java JVM stripe can work with? I found some generic android warnings and was wondering if that could be the cause.

[seanzhang-stripe]

Hi @nandrew132 I run your project but I can't reproduce the problem.

Are you using a Google account that was created in a country where Google Pay is supported?

[nandrew132]

Hi @nandrew132 I run your project but I can't reproduce the problem.

Are you using a Google account that was created in a country where Google Pay is supported?

Wow. This is weird. Yes I am using a regular google account plus the Google Pay button at the bottom works. I am not sure what is different.

[seanzhang-stripe]

@nandrew132 Can you test the same on a different device and see if the result is different?

[shivamshashank]

@seanzhang-stripe I am facing the same issue.

[delphinebugner]

I face the same issue with this setup:

• "@stripe/stripe-react-native": "~0.35.1"
• Samsung S22 (real device)

PlatformPayButton is working alone but not showing in PaymentSheet

[delphinebugner]

I think I found the explanation: no "Google Pay" compatible card were registered on my device. Compatible cards are from the banks partners of my country: https://support.google.com/wallet/answer/12059326?hl=en&co=GENIE.CountryCode%3DFR

Once I added a compatible card, the button on the PaymentSheet went back, with the selected card below the default one, turns out an incompatible-one - which is not a problem! It proves I think that there is no strict impossibility to have both the button on the Payment Sheet + incompatible cards in the wallet. It's actually what happens when we use the PlatformPayButton.

@seanzhang-stripe, what are your views on this? Do you think it's the correct root cause? If yes, is it possible to change it?

Thanks for your work on this, in general working with Stripe is an amazing devX 🙂

[seanzhang-stripe]

Hi @delphinebugner That's a great find! Thank you.

The PlatformPayButton is just a UI component that render a platform specific pay button (i.e., Google Pay in Android or Apple Pay in iOS), you can even render it if the device doesn't support Google Pay or Apple Pay. We recommend only display this button if isPlatformPaySupported returns true.

The availability of Google Pay is determined by Google, and Stripe SDK calls Google's IsReadyToPay to determine if Google Pay is available on the device. You can read more about this here

[delphinebugner]

@seanzhang-stripe thanks for the feedback! In my case (I believe in the author's case too) isPlatformPay supported is true, even if Google Pay's button does not appear then; I guess isReadyToPay from Google returns false behind ? all of requirements are okay in https://developers.google.com/android/reference/com/google/android/gms/wallet/PaymentsClient - just about the third:

User either has or can add a card in flow according to the specifications given in the IsReadyToPayRequest.

Does Stripe not allow to add a card from the payment sheet, and this is why only the solo button works?

[abdullahfayad]

@delphinebugner @seanzhang-stripe please can you advice in my problem: on ios testing and prod apple pay not appears on physical device only on emulator appears on android google pay button appears only when in production mode

[parth-simform]

@seanzhang-stripe @charliecruzan-stripe @delphinebugner , I'm facing an issue where Google Pay works when I use PlatformPayButton, but the Google Pay button does not appear in the sheet when I use presentPaymentSheet. I've also added a test card to my Gmail account. Is the Google Pay app required on a real device for this to work, or are there any additional steps required?

Below is my react-native and stripe version info "react-native": "0.71.11", "@stripe/stripe-react-native": "^0.38.4",

[delphinebugner]

@parth-simform I think it does yes, are you able to retry on an actual device with Google Pay app + a card on it?

[parth-simform]

@delphinebugner Yes, I added Google Pay and a card to it. After several attempts, I'm still not seeing the Google Pay button in the presentPaymentSheet. I'm using a Samsung S21 device.

[seanzhang-stripe]

@parth-simform Have you added com.google.android.gms.wallet.api.enabled in your Android manifest and passed googlePay hash to initPaymentSheet ? Details here

[parth-simform]

@seanzhang-stripe Yes, I added and followed all the steps from the documents.

[delphinebugner]

@parth-simform here's one last thing I can think of: when I tried to add a card to Google Wallet, process failed in the middle ; the bank was not compatible with Google Pay. The accepted banks are here: https://support.google.com/wallet/answer/12059326?hl=en&co=GENIE.CountryCode%3DUS

The error was not very clear, this is why I mention it to you. I had to use another card.

But if adding a card in your Wallet (and Google Pay behind) succeded - which is probably the case -, might still be unhelpful 😅