Penguin - GPay Button Rendering | Stripe Developers | Page 1

lunar sigil Jan 28, 2022, 5:09 PM

#

Hi Penguin. Looking

#

When you expand those 401's, what's the error message?

proper glacier Jan 28, 2022, 5:12 PM

#

The user is not authenticated but right now I don't get it

#

I see this one https://i.imgur.com/eQsYBJP.png

Imgur

#

And also this.paymentRequest.canMakePayment() function return null in response

lunar sigil Jan 28, 2022, 5:15 PM

#

Oh so this is intermittent?

#

It isn't happening for you but for a user instead?

proper glacier Jan 28, 2022, 5:17 PM

#

I can't say that it's intermittent issue cause almost all day I get this errors

#

it happening for users of my website and for me like a developer)

#

also maybe it could help
I test it from Ukraine but my friend tested it from Spain and gPay worked for him

lunar sigil Jan 28, 2022, 5:26 PM

#

Do you see a warning message at the top of this page, or does the google pay button appear? https://stripe.com/docs/stripe-js/elements/payment-request-button

#

Do you see this?

Screen_Shot_2022-01-28_at_9.26.54_AM.png

proper glacier Jan 28, 2022, 5:28 PM

#

Yep, I see this message but I have saved card in chrome and it worked for me yesterday and this morning

#

Here is my dev environment

#

https://demo.tippie.de/#/de/pay/123001/EUR

#

Could you please take a look

lunar sigil Jan 28, 2022, 5:29 PM

#

If you see this message, then that means it's an issue with your google pay configuration

proper glacier Jan 28, 2022, 5:31 PM

#

Sorry, let me open this link from pc, I have opened that from phone

rustic pasture Jan 28, 2022, 5:31 PM

#

saved card in Chrome is not at all the same as google pay

proper glacier Jan 28, 2022, 5:32 PM

#

For pc the same as I know

#

Am I wrong ?

rustic pasture Jan 28, 2022, 5:32 PM

#

no it's not the same

proper glacier Jan 28, 2022, 5:33 PM

#

ok, but I don't see that message from PC

#

so, my GPay config is correct

#

https://i.imgur.com/Ffxvx40.png

Imgur

rustic pasture Jan 28, 2022, 5:34 PM

#

ah I thought you just said you get the message

#

Okay so this is properly configured and you have Google Pay so the issue is with your code in that case

proper glacier Jan 28, 2022, 5:35 PM

#

I have changed nothing on prod and it stopped to work

lunar sigil Jan 28, 2022, 5:36 PM

#

Can you share some code with us?

proper glacier Jan 28, 2022, 5:36 PM

#

sure

lunar sigil Jan 28, 2022, 5:36 PM

#

That way we can dig into this a bit more

proper glacier Jan 28, 2022, 5:39 PM

#

this.stripe = window.Stripe(process.env.VUE_APP_PAYMENT_STRIPE_PUBLISH_KEY, {
      locale: this.$i18n.locale
    });
    this.paymentRequest = this.stripe.paymentRequest(this.paymentRequestOptions);
    this.paymentRequest.on('token', this.processPayment);

#

this.paymentRequest.canMakePayment().then(canMakePayment => {
if (canMakePayment && canMakePayment.googlePay) {
this.$axios.post('/api/v1/fe-status', {
status: 200,
message: Payment page event User has google pay: ${this.$route.params.qrCode}, ${Date.now()}
});
const prButton = this.stripe.elements().create('paymentRequestButton', {
paymentRequest: this.paymentRequest,
style: this.buttonStyle
});
prButton.mount('#google-pay');
} else {
this.showButton = false;
}
});

#

    return {
      paymentRequestOptions: {
        country: process.env.VUE_APP_PAYMENT_COUNTRY_CODE,
        currency: this.currency.toLowerCase(),
        total: {
          label: `Pay tips to ${this.employee.name} ${this.employee.surName} in ${this.business.name}`,
          amount: this.totalAmount
        }
      },
      buttonsStyle: {
        paymentRequestButton: {
          type: 'tip',
          theme: 'light',
          height: '55px',
          borderRadius: '8px'
        }
      },
      paymentRequest: {},
      stripe: {}
    };

#

I think that all code I use for generate button

lunar sigil Jan 28, 2022, 5:41 PM

#

Ok. Looking

proper glacier Jan 28, 2022, 5:43 PM

#

thank you

lunar sigil Jan 28, 2022, 5:44 PM

#

I would recommend you add some log statements. One before this line: this.paymentRequest.canMakePayment().then(canMakePayment => { where you check the result of canMakePayment(). And then I would add some more before and after this if statement: if (canMakePayment && canMakePayment.googlePay) { to check what canMakePayment and canMakePayment.googlePay are and to see if it's getting within that if block

proper glacier Jan 28, 2022, 5:44 PM

#

I checked

#

canMakePayment is null

#

as I know it should be array

lunar sigil Jan 28, 2022, 5:46 PM

#

Ok. You already added these log statements?

proper glacier Jan 28, 2022, 5:47 PM

#

yep

lunar sigil Jan 28, 2022, 5:47 PM

#

Also can you share what this is: this.paymentRequestOptions

proper glacier Jan 28, 2022, 5:47 PM

#

proper glacier ``` return { paymentRequestOptions: { country: process.env.VUE...

here

lunar sigil Jan 28, 2022, 5:48 PM

#

The value passed in to that method is identical to the one in your return statement?

proper glacier Jan 28, 2022, 5:48 PM

#

yep

lunar sigil Jan 28, 2022, 5:48 PM

#

Add a log statement prior to this: this.paymentRequest = this.stripe.paymentRequest(this.paymentRequestOptions);

#

Log the options

proper glacier Jan 28, 2022, 5:49 PM

#

1 sec

#

{
    "country": "DE",
    "currency": "eur",
    "total": {
        "label": "Pay tips to Yaroslav S in dfgjhgfd",
        "amount": 300
    }
}

lunar sigil Jan 28, 2022, 5:52 PM

#

Can you add all of these log statements so we can see them in our browser console when we load your test page?

#

Will help us investigate a bit

proper glacier Jan 28, 2022, 5:52 PM

#

sure

#

added, check pls

#

should works for you

sullen quarry Jan 28, 2022, 6:21 PM

#

Hello! It looks like the options you're passing in aren't a plain JS object, but rather some kind of observer? If you change to a plain JS object instead (maybe try hard-coding the object as a quick test) does that make a difference?

proper glacier Jan 28, 2022, 6:22 PM

#

it's regular js object

sullen quarry Jan 28, 2022, 6:23 PM

#

It's not being logged as a regular object in the console.

proper glacier Jan 28, 2022, 6:23 PM

#

I use vuejs maybe it is there observer

sullen quarry Jan 28, 2022, 6:23 PM

#

proper glacier Jan 28, 2022, 6:23 PM

#

yes, it's vuejs object

sullen quarry Jan 28, 2022, 6:24 PM

#

Yeah, so can you try a plain JS object instead?

proper glacier Jan 28, 2022, 6:24 PM

#

It worked this morning in this config

sullen quarry Jan 28, 2022, 6:24 PM

#

What changed in your code since then?

proper glacier Jan 28, 2022, 6:24 PM

#

nothing

sullen quarry Jan 28, 2022, 6:37 PM

#

I'm looking further, but so far I haven't found much. Google Pay works for me on other sites, but not on yours. There's a lot going on in your code though, so it's hard to track down the specific issue.

#

You're sure nothing at all has changed? What about the values in the configuration object, like the country?

proper glacier Jan 28, 2022, 6:48 PM

#

yep and also i have reverted git branch to prev release

#

and it doesn't work but it worked 100%

#

cause I deployed it to prod

sullen quarry Jan 28, 2022, 6:48 PM

#

Have you enabled any logging, debugging, or observability of any kind?

proper glacier Jan 28, 2022, 6:49 PM

#

only those that duchess asked

#

ask for any logging I will add

sullen quarry Jan 28, 2022, 6:50 PM

#

So Apple Pay works fine in Safari:

#

Which is real strange.

#

🤔

proper glacier Jan 28, 2022, 6:51 PM

#

Yep, for me too

#

I have tested from my iPhone and it works

#

It’s very strange, I have tested all my code today but there are no error that could block gpay render

#

I don’t have ideas 🙂

#

Also I found 1 way to render it

#

Idk why it works

#

Click on the credit card button and then at the top left corner of the form click back arrow and you will see correct responses for canMakePayment and gpay appears

sullen quarry Jan 28, 2022, 6:57 PM

#

What the...

#

🤔 🤔 🤔

proper glacier Jan 28, 2022, 6:58 PM

#

I have same reaction😂

sullen quarry Jan 28, 2022, 6:58 PM

#

Wait... canMakePayment's result is never logged when you do that.

#

Are you calling canMakePayment in more than one place? If you call it too quickly you get rate limited... maybe that's what's going on? You're calling it in one place, then calling it rapidly again, and the second one fails?

#

To clarify, the result showing googlePay: true is never logged.

proper glacier Jan 28, 2022, 7:00 PM

#

i call it twice, for gPay and Apple Pay

#

2 components

sullen quarry Jan 28, 2022, 7:01 PM

#

You should not be calling it twice.

#

Only one Payment Request Button can exist at a time.

proper glacier Jan 28, 2022, 7:02 PM

#

yep, I show only one

sullen quarry Jan 28, 2022, 7:02 PM

#

You can't have both Apple Pay and Google Pay on the same page at the same time. Apple Pay is only supported in Safari and Google Pay is only supported in Chrome.

proper glacier Jan 28, 2022, 7:02 PM

#

i know

sullen quarry Jan 28, 2022, 7:03 PM

#

Maybe I'm misunderstanding, why are you calling canMakePayment twice?

proper glacier Jan 28, 2022, 7:03 PM

#

but I call canMakePayment in 2 components to check ability googlePay and applePay

#

I got your idea

#

I will change it later

#

and test

rustic pasture Jan 28, 2022, 9:50 PM

#

@proper glacier are you unblocked?

proper glacier Jan 28, 2022, 9:58 PM

#

@rustic pasture nope

#

right now I tried use only one canMakePayment

#

    this.paymentRequest.canMakePayment().then(canMakePayment => {
      console.log(canMakePayment);
      if (canMakePayment && (canMakePayment.googlePay || canMakePayment.applePay)) {
        const prButton = this.stripe.elements().create('paymentRequestButton', {
          paymentRequest: this.paymentRequest,
          style: this.buttonStyle
        });
        prButton.mount('#apple-pay');
      }
    });

#

and it doesn't work

#

canMakePayment response is null

rustic pasture Jan 28, 2022, 10:08 PM

#

cc @sullen quarry do you have more thoughts?

#

@proper glacier can I take a step back for a sec? Why don't you trust us and use our Payment Request button and do nothing else? Why do all that fancy stuff instead of letting us display the button?

proper glacier Jan 28, 2022, 10:16 PM

#

well, this button redirects user to the checkout page

#

we don't need it

#

our client wants fast payments for users without additional redirects

#

@rustic pasture

rustic pasture Jan 28, 2022, 10:17 PM

#

what do you mean "this button redirects user to the checkout page"

#

Checkout is a hosted redirect, not the PaymentRequest button

proper glacier Jan 28, 2022, 10:18 PM

#

ok, maybe i didn't get your idea

#

Why do all that fancy stuff instead of letting us display the button?

#

I try to display your buttons

rustic pasture Jan 28, 2022, 10:19 PM

#

why do you do if (canMakePayment && (canMakePayment.googlePay || canMakePayment.applePay)) {

proper glacier Jan 28, 2022, 10:19 PM

#

I check if I get response

rustic pasture Jan 28, 2022, 10:19 PM

#

https://stripe.com/docs/stripe-js/elements/payment-request-button?html-or-react=html#html-js-mount-element ```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';
}
});```

#

we don't do this, we just mount it, why don't you do that?

proper glacier Jan 28, 2022, 10:19 PM

#

I mount it

#

const prButton = this.stripe.elements().create('paymentRequestButton', {
          paymentRequest: this.paymentRequest,
          style: this.buttonStyle
        });
        prButton.mount('#apple-pay');

rustic pasture Jan 28, 2022, 10:20 PM

#

I know you do but why do you have that extra google and apple pay detection?

proper glacier Jan 28, 2022, 10:20 PM

#

for statistic

#

we track if user has apple pay or google pay

#

for analytic

rustic pasture Jan 28, 2022, 10:21 PM

#

but why do you only mount inside the if then?

proper glacier Jan 28, 2022, 10:22 PM

#

ok, it doesn't matter, I have changed it

#

but main problem that result of canMakePayment() is null for me

rustic pasture Jan 28, 2022, 10:25 PM

#

yep that one I have no idea for now, we'll see if @sullen quarry has an idea later and otherwise you'll have to write in to support

proper glacier Jan 28, 2022, 10:26 PM

#

ok

sullen quarry Jan 28, 2022, 10:45 PM

#

Hello! Just got out of a meeting and catching up...

#

I still see canMakePayment being called multiple times on your site.

#

It's being called in both ApplePay.vue and GooglePay.vue.

#

Can you remove or comment this code out in ApplePay.vue and try again in Chrome?

#

    this.paymentRequest.canMakePayment().then(function (canMakePayment) {
      if (canMakePayment && canMakePayment.applePay) {
        _this.$axios.post('/api/v1/fe-status', {
          status: 200,
          message: "Payment page event User has apple pay: ".concat(_this.$route.params.qrCode, ", ").concat(Date.now())
        });

        var prButton = _this.stripe.elements().create('paymentRequestButton', {
          paymentRequest: _this.paymentRequest,
          style: _this.buttonStyle
        });

        prButton.mount('#apple-pay');
      } else {
        _this.showButton = false;
      }
    });

proper glacier Jan 28, 2022, 11:21 PM

#

I have tried it yet

#

No result

#

I could deploy that fix on dev if you want

#

I have tried local

proper glacier Jan 28, 2022, 11:22 PM

#

proper glacier ``` this.paymentRequest.canMakePayment().then(canMakePayment => { cons...

Here

sullen quarry Jan 28, 2022, 11:22 PM

#

Yeah, if you could deploy it so I could test that would be great.

proper glacier Jan 28, 2022, 11:22 PM

#

Sure

#

Deployed

sullen quarry Jan 28, 2022, 11:24 PM

#

That fixed it for me.

#

Works great now.

#

#

You're not seeing that?

rustic pasture Jan 28, 2022, 11:25 PM

#

same for me

Screen_Shot_2022-01-28_at_3.24.57_PM.png

sullen quarry Jan 28, 2022, 11:26 PM

#

To clarify, you should not have ApplePay.vue and GooglePay.vue at all. You should have a single PaymentRequestButton.vue.

proper glacier Jan 28, 2022, 11:27 PM

#

I got it

#

Let me check

#

Seems it’s fixed

#

So strange cause I used 2 calls of canMakePayment since July)

#

Thank you very much guys !

sullen quarry Jan 28, 2022, 11:28 PM

#

Google adjusts things all the time. They probably tweaked the rate limiting on their end, but yeah, you should avoid two calls and this won't be a problem. 🙂

proper glacier Jan 28, 2022, 11:29 PM

#

Thanks !

#Penguin - GPay Button Rendering