#KevH - Payment Request
idle totem
ionic stirrup
Before:
idle totem
Hello! We recently made some changes to shipping options for Google Pay to fix a bug, this could be a side effect of that. Can you link me to a page where I can reproduce the issue?
ionic stirrup
After:
Nothing public i'm afraid
But all i'm doing is supplying a different displayItems array. Different contents. Supplying the same contents again doesn't cause the same issue.
idle totem
Let me try and reproduce, hang on...
ionic stirrup
Slight correction: I originally said "It disables all", meant to say "It shows all".
idle totem
At what point are you changing the displayItems? In response to a shippingoptionchange event? A shippingaddresschange event? Something else?
ionic stirrup
shippingaddresschange
responding with:updateWith({
status: "success",
total: {
label: "Total",
amount: amount
},
displayItems: displayItems,
shippingOptions: shippingOptions,
});
sorry, its the shippingOptions i'm updating...
long day 🙂
idle totem
Looks like you're updating both, right?
ionic stirrup
yeah, but error only happens when shippingOptions has different contents to what has been supplied previously
idle totem
Gotcha! Will be a little bit while I reproduce, but working on it now...
ionic stirrup
no problem. Thankyou for the help
idle totem
I'm unable to reproduce the issue on my end. What version of Chrome are you using?
I'm on 96.0.4664.55.
idle totem
If you're still seeing the issue after updating can you share the displayItems and shippingOptions values both before and after the issue happens? Maybe I'm not doing something specific you're doing on your end.
idle totem
Thanks, let me give these a try...
Still can't reproduce with those values before and after, even if I skip the first time the shippingaddresschange event fires and only changes once someone selects something in the payment sheet.
ionic stirrup
hhmm..
idle totem
Can you produce a minimal test case that reproduces the issue and put that online so we can examine it?
ionic stirrup
Possibly
I may be able to go through our implementation consultant to set something up so I can show the issue to someone live, on the actual site being developed.
idle totem
The ideal scenario would be a public link we can share with several developers (and potentially even the Chrome team), if you can produce a public example.
ionic stirrup
ok, i'll try and troubleshoot for a bit longer and if no luck I will try to set something up.
Thank you for your help.
idle totem
No problem, good luck with it! When you have a link we can investigate let us know. If this thread is archived when you return just ask in #dev-help again. 🙂
ionic stirrup
Quick update: only seems to happen when selecting a shipping option first (other than the default) and then changing the address. Also went through the code and see the stripe library only firing updateWith to chrome once. With the correct data.
2 displayItem entries and the 4 shipping option entries. As expected.
worthy bear
(looking)
Just to clarify: what do you see. Like do you see the 8 shipping options, or the 4 display items?
ionic stirrup
I see the 4, like the screenshot posted earlier
worthy bear
so the second screenshot, when does it happen? Do you still have your name + card info above the shipping section?
ionic stirrup
happens when changing address and I provide new shipping options on the event listener. Everything else such as name, card and itemDetails is fine.
worthy bear
Sure but I would love to make sure we are 100% aligned
Can you confirm that in the exact second screenshot, you still see the name and email above it
ionic stirrup
yep, confirmed
worthy bear
okay so we can't seem to repro. Can you try a really basic code of ours and take screenshots of those? ```const stripe = Stripe(
'<?= STRIPE_KEY_PUBLISHABLE; ?>',
{
locale: 'en',
}
);
var paymentRequest = stripe.paymentRequest({
country: 'US',
currency: 'usd',
total: {
label: 'Demo total',
amount: 1000,
},
requestPayerEmail: true,
requestPayerName: true,
requestShipping: true,
shippingOptions: [
{
id: 'free-shipping-before',
label: 'Free shipping before update',
detail: 'Arrives in 5 to 7 days',
amount: 0,
},
{
id: 'express-shipping-before',
label: 'Express shipping before update',
detail: 'Arrives in 1 to 2 days',
amount: 500,
},
],
});
var elements = stripe.elements();
var prButton = elements.create('paymentRequestButton', {
paymentRequest: paymentRequest,
style: {
paymentRequestButton: {
type: 'buy',
},
},
});
paymentRequest.on('shippingaddresschange', function(ev) {
console.log("Shipping address change");
console.log(ev);
// Perform server-side request to fetch shipping options
options = {
status: 'success',
total: {
label: 'New shipping address payment update',
amount: 1500,
},
shippingOptions: [
{
id: 'free-shipping-after',
label: 'Free shipping after update',
detail: 'Arrives in 5 to 7 days',
amount: 0,
},
{
id: 'express-shipping-after',
label: 'Express shipping after update',
detail: 'Arrives in 1 to 2 days',
amount: 500,
},
],
}
console.log("shipping address updateWith:")
console.log(options)
ev.updateWith(options);
});
hum wait sorry I misunderstood something dumb
@ionic stirrup would you be willing to try my code on your end?
ionic stirrup
yeah, just looking at how to integrate into my existing. Its react on cloudflare workers etc.
will be a few mins
worthy bear
oh wait I;'m screen sharing with a colleague and I just hit the bug
worthy bear
Okaaaaaaay we understood the bug lol
Imagine you have shipping option A and B. You select A as the default. Then you change the shipping option to be C and D. And when that happens Chrome is trying to make A the default but A doesn't exist anymore and so it weirdly is rendering all options together (C and D) and when you click it does a weird UI thing and resets to C and D. And it's because you keep the ids random
We reproduced easily by keeping an array of 2 shipping options A and B. And then each time we remove the first option but keep the second one with the same id and add a third one with a new id. If you have B as selected, you get B and C displayed and it works, then if you select C you will get C and D and it works. If that time you choose C then the next time you get D and E, but C was selected and it crashes
Not sure how much sense that makes
ionic stirrup
yeah I follow, so is that a Chrome issue?
worthy bear
Not entirely sure yet, though plausibly
we'll need to investigate internally. But really the fix is to keep your ids constant
ionic stirrup
unfortunately I am unable to guarantee that. With different shipping address potentially have all different or some different shipping options.
worthy bear
https://pastebin.com/XHxvE1eC if you want to play with my code
Basically I keep an array of 2 options, always remove the first one and add a second one. If you get the first option selected it does the weird "display all options"
ionic stirrup
I guess I could do some sort of mapping so payment request always gets ids 1,2,3,4 and so on. And I map them back to the actual ids on payment confirm.
worthy bear
yeah that's what I'd do if I were you
ionic stirrup
just thinking what would happen if I select D and it disappears to only have A,B,C
worthy bear
that's what my code kind of does, it renders A/B/C and in theory A is the default
ionic stirrup
ok, so the issue is if the first option is selected and it disappears? Doesn't matter if another disappears? Sorry, just trying to fully get my head around it.
worthy bear
My understanding is if the selected option disappears it crashes, otherwise it succeeds
ionic stirrup
ah ok, don't think my mapping idea would work then if the array goes from 4 to 3 options and they have option 4 selected.
worthy bear
correct
ionic stirrup
ok, Thank you for your help with this. Appreciated!
is there an internal ticket reference or something I can use to give to our implementation consultant to track?
worthy bear
no there isn't sorry, I'd recommend just having them reach out to support. Honestly I'm dubious this can be fixed soon, it's plausibly a Chrome bug and will take a while