CalebR-googlepay | Stripe Developers | Page 1

random canyon Feb 4, 2022, 3:17 PM

#

languid cove Feb 4, 2022, 3:19 PM

#

Hi Caleb. Looking into this

mint drum Feb 4, 2022, 3:19 PM

#

Thanks!

languid cove Feb 4, 2022, 3:30 PM

#

Are you operating in live or test mode? Does this error appear on attempting to pay, while doing some other action, or on page load? Also, are you using HTTPS?

mint drum Feb 4, 2022, 3:33 PM

#

This is in test mode over https. The browser console error appears on page load, and the adb logcat error appears after closing the error dialog from the browser after attempting to pay.

#

The dialog reads "Unexpected developer error, please try again later."

#

It appears when tapping "Continue" after selecting a payment method in the Google Pay popup dialog.

#

This is on a Pixel 4 running Android M and also on a Moto G running Android P.

languid cove Feb 4, 2022, 3:51 PM

#

Can you share how you're initializing Stripe.js?

#

Are you on a Connected account?

mint drum Feb 4, 2022, 3:52 PM

#

Yes, we are using Connect

#

async getPublicKey() {
  let response = await fetch('/reachpay/public_key');
  let json = await response.json();
  return json.publicKey;
}

async setupElements(data) {
  let publicKey = await this.getPublicKey()
  this.stripe = Stripe( publicKey, { betas: ['us_bank_account_beta_1'] } );
  const appearance = this.options.appearance;
  const options = {
    clientSecret: data.clientSecret,
    appearance: appearance,
    fonts: [
      {
        cssSrc: 'https://fonts.googleapis.com/css2?family=Roboto'
      },
    ],
  }
  const elements = this.stripe.elements(options);
  const accountName = this.options.accountName;
  const paymentMethod = elements.create("payment", {
    style: this.options.style,
    business: {
      name: accountName,
    },
    fields: {
      billingDetails: {
        name: 'never',
        address: 'never',
      },
    },
  });
  paymentMethod.mount(document.querySelector(this.options.paymentElement));
  return {
    stripe: this.stripe,
    elements: elements,
    paymentMethod: paymentMethod,
    clientSecret: data.clientSecret,
    id: data.id,
    supporter_id: data.supporter_id,
  };
};

#

Sorry, edited to get the full function definition

#

The getPublicKey function returns our test mode public key.

languid cove Feb 4, 2022, 4:06 PM

#

What type of Connect account?

#

Standard?

mint drum Feb 4, 2022, 4:06 PM

#

Where would I find that information?

languid cove Feb 4, 2022, 4:06 PM

#

Also, do you have a test mode connection between your platform and connect account?

mint drum Feb 4, 2022, 4:07 PM

#

Yes, the account is connected in test mode

languid cove Feb 4, 2022, 4:09 PM

#

Can you share an example payment intent ID?

mint drum Feb 4, 2022, 4:09 PM

#

One moment, I've got a meeting at the moment

mint drum Feb 4, 2022, 4:25 PM

#

SetupIntent: seti_0KPUag53soKKKIrdALgUE9qx

#

Account ID: acct_0JMW53soKKKIrdr2RkEc

#

Successful SetupIntent from desktop Chrome: seti_0KPUde53soKKKIrd4kk1jy2p

languid cove Feb 4, 2022, 4:52 PM

#

Hey, so how is Connect involved here? I see the setup intent wasn't a connect request. I'd also verify you're not trying to use the connected account PK here

mint drum Feb 4, 2022, 4:55 PM

#

The account in question is a Custom Connect account. The PK is correct: pk_0JMWGfvc4gtyIfnzhr2tqJPaIMTns. As noted, this works fine on desktop—the problem only occurs in mobile Chrome. Apple Pay is also working correctly.

#

This is the same site being used in both cases—same frontend and backend code in the same environment. The only difference is the user agent.

nocturne roost Feb 4, 2022, 5:13 PM

#

jumping in here to catch up!

I have a few ideas on what this could be but like codename, haven't seen this before.

You're using PaymentRequest Button, is that right?
Or PaymentElement (the new combined element)

mint drum Feb 4, 2022, 5:14 PM

#

PaymentElements

nocturne roost Feb 4, 2022, 5:16 PM

#

gotcha, so gonna ask a few qs to narrow down more

your code doesn't show anything Connect related. I assume your fund flow is actually Destination Charges then. Meaning you initialize PaymentElement on the Platform account.

mint drum Feb 4, 2022, 5:16 PM

#

Yes, I think that's correct.

#

On the backend, we're creating the intent like this:

@intent = Stripe::SetupIntent.create({
  customer: @supporter.reachpay_customer_id.to_s,
  payment_method_types: @current_account.reachpay_payment_method_types,
  payment_method_options: {
    us_bank_account: {
      verification_method: 'instant',
    },
  }
})

nocturne roost Feb 4, 2022, 5:20 PM

#

the SetupIntent creation should be separate for now so keeping that aside

gotcha so given that it is a "regular" PaymentElement, can you go to this link in your Chrome browser and see if you see the same console error: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements

Accept a payment

Securely accept payments online.

mint drum Feb 4, 2022, 5:21 PM

#

Sure, let me just get that pulled up on my dev phone

#

Yes, same error

#

Unable to download payment manifest "https://pay.google.com/gp/p/payment_method_manifest.json".

#

So is Google Pay not fully supported for PaymentElements yet?

nocturne roost Feb 4, 2022, 5:28 PM

#

it is

#

ok trying on my end

#

since you've tried twice on the same mobile device with two different Stripe accounts (yours and our docs) and seen the same error, I think it has to do with your device.

Let's try something else too

#

go here in your mobile device

#

https://stripe.com/docs/stripe-js/elements/payment-request-button

#

and see if you get the same error

#

this is using PaymentRequest Button outside of PaymentElement

mint drum Feb 4, 2022, 5:29 PM

#

This is across two different devices. One is a Pixel, so running stock AOSP

nocturne roost Feb 4, 2022, 5:29 PM

#

fair, I'm just trying to narrow down things, let me fire up an Android device myself (I think I have a Pixel 4 or 5)

mint drum Feb 4, 2022, 5:31 PM

#

Same console error on the PaymentRequestButton option as well. I don't get an error on checkout flow, but I don't think the example page has a fully functional test checkout

nocturne roost Feb 4, 2022, 5:32 PM

#

I don't get an error on checkout flow
checkout as in Stripe Checkout?
Not sure I understand, can you elaborate more? The last sentence isn't clear ot me

mint drum Feb 4, 2022, 5:33 PM

#

If I click the GPay button on the docs page and then continue, I don't get the "Developer Error" popup

#

There was no option to continue the checkout on the PaymentElement docs page

nocturne roost Feb 4, 2022, 5:38 PM

#

Same console error on the PaymentRequestButton option as well

ah so the console error is non blocking basically

and not the same error as the "WalletMerchantError" you saw on your own integration

mint drum Feb 4, 2022, 5:39 PM

#

Seems like that might be the case

#

I can't compare directly for the PaymentElements case

nocturne roost Feb 4, 2022, 6:05 PM

#

trying to get my Android device hooked up to my desktop Chrome console

mint drum Feb 4, 2022, 6:06 PM

#

Thanks

nocturne roost Feb 4, 2022, 6:15 PM

#

ok finally

#

took a while, but I also see the "unable to download payment manifest" error but you can ignore that for now

#

cause mobile Chrome on Android, GPay works fine for me despite that error

#

so ok we have narrowed down that the docs work for you but your integration does not

#

so let's start here - can you set up a simple PaymentRequest Button integration (i.e. without most of your business logic), just plain and simple stuff from https://stripe.com/docs/stripe-js/elements/payment-request-button

that way
1/ we have straightforward code to look through
2/ if you tunnel it publicly through ngrok then we can look into what you see vs what I see on the same page

mint drum Feb 4, 2022, 6:17 PM

#

Okay. If you want to try on your end, you can find our integration test live at https://rpay.reachapp.co/donations/new

#

That's our staging server that we're testing on currently

nocturne roost Feb 4, 2022, 6:18 PM

#

ok that is helpful

#

is it possible to temporarily remove the validation on that page? so I can test quickly on desktop and mobile?

mint drum Feb 4, 2022, 6:23 PM

#

I don't think so. I'd have to create a new Github branch to deploy to Heroku

#

You can sign in with
stripe@example.com
pw: stripetest

That should prefill the form with a test address so you can go through quicker.

nocturne roost Feb 4, 2022, 6:27 PM

#

ok so far I see this

and when clicking "Submit" it does go through and show the Google Pay sheet just fine

Screen_Shot_2022-02-04_at_12.26.36_PM.png

#

and no errors like the one you saw earlier

#

this is on a Pixel 3A with a card added to my Google Pay wallet

mint drum Feb 4, 2022, 6:28 PM

#

Hmm, can you complete the payment successfully?

nocturne roost Feb 4, 2022, 6:28 PM

#

this is in test mode is that right?

mint drum Feb 4, 2022, 6:28 PM

#

I wasn't getting an error up to that point either.

nocturne roost Feb 4, 2022, 6:28 PM

#

I went all the way to seeing the Google Pay sheet

mint drum Feb 4, 2022, 6:28 PM

#

Yes

nocturne roost Feb 4, 2022, 6:28 PM

#

just didn't authenticate it

#

ok I can try authentiate it

mint drum Feb 4, 2022, 6:29 PM

#

Yeah, that's the point I was hitting the error.

nocturne roost Feb 4, 2022, 6:30 PM

#

ah ok that part wasn't clear

and just to double check, you did authenticate with Google Pay on our docs page I linked earlier, did the whole thing end to end

and did not see the same errors right?

mint drum Feb 4, 2022, 6:30 PM

#

Yes

#

Other than the error trying to download manifest.json in the console

nocturne roost Feb 4, 2022, 6:31 PM

#

ok I see the "unexpected developer error"
thing too

and don't have ADB hooked up but presume it is the same error as what you stated originally so looking into something one sec

mint drum Feb 4, 2022, 6:32 PM

#

Thanks. I saw somewhere that trying to use a live card in a test environment with Google Pay can cause problems, but I checked with Google Support and it's not possible to add test cards to your wallet.

nocturne roost Feb 4, 2022, 6:33 PM

#

I saw somewhere that trying to use a live card in a test environment with Google Pay can cause problems,
no this works just fine

#

I think I see what the issue might be

#

inspecting how you're creating the SetupIntent and you're returning a Connect account ID there. Which doesn't make sense so I think somewhere in your JS code, you are passing that Account ID somewhere (the reachpayKey field you return in your /create_setup_intent response)

#

just a hunch, still looking

mint drum Feb 4, 2022, 6:38 PM

#

The return from that endpoint is

{
  "intent": <%= raw(@intent.to_json) %>,
  "supporter_id": <%= @supporter.id %>,
  "publicKey": "<%= ENV['STRIPE_PUBLIC_KEY'] %>",
  "reachpayKey": "<%= @account.reachpay_account_id %>",
  "clientSecret": "<%= @intent['client_secret'] %>",
  "id": "<%= @intent['id'] %>"
}

where reachpayKey is the connected account id acct_0JMW53soKKKIrdr2RkEc

nocturne roost Feb 4, 2022, 6:38 PM

#

yep I see that in the network response

#

where are you using that Account ID in your JS code

#

didn't see it being used anywhere in your original JS snippet above

mint drum Feb 4, 2022, 6:39 PM

#

Hmm, I think that might be left over from our old flow. This was originally build for the CardElement, then we switched over.

#

Doesn't look like it gets used again. I think everything uses the clientSecret.

#

We haven't gotten around to refactoring fully yet

nocturne roost Feb 4, 2022, 6:40 PM

#

gotcha, yep I see the same. Trying something else out one sec

#

ah ok I've figured out something atleast

so under the hood PaymentElement initializes Google Pay and passes an environment variable

a/ it should pass a DEV environment for a test mode publishable key
b/ and PRODUCTION for a live mode publishable key

in my PaymentElement it does to a/ correctly, just tested it.

but in yours, even with a test mode publishable key it seems to be passing PRODUCTION as the environment param under the hood, which is why you see the adb error:

Invalid stripe:publishableKey for current environment. Make sure you are using Stripe's production key.

I'm really unclear why that is because this is out of a user's integration's control really, PaymentElement handles this under the hood

Next steps are for me to test out a couple more things and otherwise file with the product team to investigate. I'll let you know to write in to Stripe Support in that case, letting them know you spoke to hmunoz in Developer Chat Discord and I recommended you write in.

But hold off on that for a sec

mint drum Feb 4, 2022, 6:52 PM

#

Okay, thanks. I already mentioned the issue to our account manager Connor this morning in a meeting, so I'll send the info over to him once it's time

nocturne roost Feb 4, 2022, 6:53 PM

#

ah gotcha, can you DM me Connor's full name? Want to make sure I catch up with them if they file or ask with our team cause I have context

mint drum Feb 4, 2022, 6:55 PM

#

Oh sorry missed the DM part

nocturne roost Feb 4, 2022, 6:55 PM

#

just deleted to not leak their email but got it

#

all good

mint drum Feb 4, 2022, 6:55 PM

#

My bad

#

But it sounds like it shouldn't be an issue in production, since we would be using a live key at that point

#

Unless there's a bool flipped somewhere and it passes DEV in production

nocturne roost Feb 4, 2022, 6:59 PM

#

Unless there's a bool flipped somewhere and it passes DEV in production
probably isn't the case since it works fine for me right now and I have not seen any reports from other users on GPay not working in one mode or the other (cause that would be many errors)

so I think it might be some issue with either how your account is set up specifically, or some of the params you're passing to Stripe.js (and those incorrectly passing DEV)

like I noticed you're using us_bank_account and it shouldn't impact anything really so I'm just checking that

mint drum Feb 4, 2022, 7:00 PM

#

Yes, we're using the instant verify beta for us bank accounts

#

It might be something specific to mobile Chrome as well; I'm able to process it no problem on the desktop version of Chrome

nocturne roost Feb 4, 2022, 7:12 PM

#

but PaymentElement works fine on Chrome mobile for me

mint drum Feb 4, 2022, 7:13 PM

#

Right, this would be specifically in our environment, not the Stripe one (rpay.reachapp.co on desktop)

#

If that helps at all in pinpointing the source of the issue

nocturne roost Feb 4, 2022, 7:21 PM

#

ok so I've tried repro'ing with everything you have
i.e. a us_bank_account SetupIntent and PaymentElement works fine with GPay end to end

I'm going to file with the PaymentElement team just in case and let your Account Manager know too, cause I can't seem to repro this at all and everything looks fine in your integration so unclear on how you're getting into this state

mint drum Feb 4, 2022, 7:21 PM

#

Okay, thanks for your help! I'll get the info over to support.

nocturne roost Feb 4, 2022, 7:22 PM

#

do let them know you spoke to hmunoz so they can sync with me to catch up state

mint drum Feb 4, 2022, 7:22 PM

#

Will do

nocturne roost Feb 4, 2022, 7:28 PM

#

actually

#

I think I know what the issue is

mint drum Feb 4, 2022, 7:28 PM

#

Oh?

#

You caught me just before I hit send over to support lol

nocturne roost Feb 4, 2022, 7:35 PM

#

I'm still working through the source code but basically your publishable key is really old and it doesn't have the modern pk_test_123 prefix, it is just pk_1234.

The code seems to be checking for these older keys too and it works fine in desktop but something in mobile is throwing check off, where it is returning the "production" env for Google Pay instead of what it does correctly on desktop

I'll file with the product team to dig deeper on why the if-else works right on desktop but not on mobile

mint drum Feb 4, 2022, 7:38 PM

#

Ok, so do we need to update our test key?

nocturne roost Feb 4, 2022, 7:41 PM

#

you could roll the API key and see though that does mean you expire your old pk_123 publishable key and have to use the new one going forward

mint drum Feb 4, 2022, 7:42 PM

#

Okay. I'll send that info over to support, and check with the rest of our dev team to see if there is any issue with just rolling our test keys for testing purposes

#

Thanks for all your help!

nocturne roost Feb 4, 2022, 7:52 PM

#

np!

mint drum Feb 4, 2022, 8:04 PM

#

Just fyi, rolled our test keys and that fixed the issue, so you were correct about the problem

proper stag Feb 4, 2022, 8:05 PM

#

Great to hear!

#CalebR-googlepay