#Fabian
smoky parcel
Give me a moment to think
Hmm okay I did see there is actually an outstanding bug right now where shippingaddresschange does not actually fire if the customer just has a browser-saved card/address (but not actually a card in their Google Pay wallet).
Is that the scenario that you are seeing?
hard dune
I had that issue as well a while back but I found a work-around for that. The issue I am experiencing now is rather shippingoptionchange firing to early (when the shippingaddresschange callback hasn't called updateWith() yet). The issue also only occurs with Apple Pay. When using Google Pay everything works fine.
smoky parcel
So you are seeing shippingoptionschange fire on modal load but are expecting it after the user actually provides/changes an address?
hard dune
Not really. shippingoptionschange fires directly after the user changed their address in the Apple Pay modal. But that causes issues as the shipping options are not yet loaded into the payment request via AJAX. After receiving the shipping options in the shippingaddresschange event, I call the updateWith() method to update the shipping options. The shippingoptionschange event shouldn't be called before that.
Also, the shippingoptionchange event is being fired without the user even changing their shipping options. I guess this is expected behaviour as shipping options can change after an address change but then it needs to wait for the shipping options to be updated.
hard dune
Okay, I just used a few console.log()s and the order in which the events are being fired might not even be the problem here 🙈 But the following thing seems to be the issue:
paymentRequest.on('shippingoptionchange', function (event) {
const shippingOption = event.shippingOption; // This is 'undefined'.
}
smoky parcel
Ah yeah that seems bad
hard dune
The shipping options that are being loaded through AJAX show up correctly in Apple Pay btw. so that doesn't seem to be the issue.
mortal peak
Hello 👋
Taking over, can you print the event object here and see what values you're getting back?
mortal peak
Can you share the PaymentRequest Object code too?
hard dune
There's the code for creating the payment request and handling the events. Unfortunately the code is too large for a Discord message (therefore the TXT)
ocean bloomBOT
hard dune
It's not public unfortunately because we haven't released the Stripe implementation to the client yet
And I'd need some time to prepare a public test server
mortal peak
Gotcha. We're going to need a bit more time to reproduce this on our end. I wonder if the error is due to the other logic you have in the event listener.
Can you try a simplifying the logic a bit just to make sure the function itself isn't broken?
Try example code
https://stripe.com/docs/js/payment_request/events/on_shipping_option_change
hard dune
Sure, I'll try to replace the AJAX calls with static data. Could take a moment.
mortal peak
NP! take your time 🙂
hard dune
I changed up the shippingaddresschange event now to only use a static array of shipping option (I'll send the updated code in a sec).
However, the shippingOption is still undefined in the shippingoptionchange event.
paymentRequest.on('shippingaddresschange', function (event) {
console.log("shippingaddresschange", event);
let shippingAddress = event.shippingAddress;
// Dummy shipping options to replace AJAX calls.
let shippingOptions = [];
if (shippingAddress.country === 'DE') {
shippingOptions = [
{
"id": "0.3",
"label": "DHL Paket",
"detail": "Versand via DHL innerhalb Deutschlands.",
"amount": 499
},
{
"id": "0.1",
"label": "Abholung",
"detail": "Abholung in unserem Ladengeschäft.",
"amount": 0
},
{
"id": "0.13",
"label": "Elster Express",
"detail": "Direktflug via Elster. \nAchtung nicht für glitzerndes Ware geeignet!!!",
"amount": 4450
}
];
} else if (shippingAddress.country === 'CH') {
shippingOptions = [
{
"id": "0.15",
"label": "Schwitzerli",
"detail": "Versand in die Schweiz!",
"amount": 1290
}
];
}
// Update payment request with the new shipping options.
let paymentUpdates = {
status: 'success',
shippingOptions
};
event.updateWith(paymentUpdates);
});
light nimbus
Hi there 👋 I've been working on testing this from our side. Something I've noticed in my testing is that when the shipping options are being updated by the Payment Request flow because a customer selected a new address, that shippingOption in those Events is undefined. However, when the shippingoptionchange events are triggered by the customer explicitly selecting a different shipping option, then shippingOptions is populated:
Toggling back and forth between addresses, it looks like the first shipping option I'm providing in the array of choices is always the one selected by default, so you may be able to pick up the selected shipping option by pulling the first option out of your array rather than relying on the shippingoptionchange event to echo it back to you.
hard dune
Oh, I see! I'll try that out. Thank you!
light nimbus
👍 any time! I just tested on Chrome as well, and I think the approach I suggested is going to be a better fit there also since it looks like the Chrome implementation of the Payment Request API doesn't surface shippingoptionchange events after shippingaddresschange events the way Safari does.
hard dune
Yeah, I noticed that too. I always auto-set the selected shipping option to the first item in the array in our cart backend because of that.
So I guess to make it work with Safari, I'd just disregard the shippingoption event when shippingOption is undefined.
Something like
if (shippingOption === undefined) {
return event.updateWith({status: 'success'});
}
Seems to do the trick! Thank you, again, for helping me 🙂