PaymentRequest event callbacks not firing when expected

I am attempting to implement GooglePay and ApplePay using the web payments SDK but having trouble with the shippingoptionchanged event listener.

Relevant event listeners below:

paymentRequest.addEventListener('shippingoptionchanged', async (option) => {
    console.log("Shipping option change");

   // Update selected shipping + recalculate cart(Code removed for brevity)

    return squarePaymentRequestEventUpdate();
});

paymentRequest.addEventListener('shippingcontactchanged', async (contact) => {
    console.log("Shipping contact change");

   // Update shipping contact + recalculate shipping(Code removed for brevity)

    return squarePaymentRequestEventUpdate();
});

What currently happens:

  1. Trigger gpay.tokenize()
  2. Google Pay opens and triggers shippingcontactchanged + shippingoptionchanged events from the logged in google account. (Information is successfully updated here and works as expected)
  3. Attempt to only change a shipping option fails to trigger the shippingoptionchanged event. No console errors are produced and I have no evidence this event is being triggered.

issue

Any help to figure out why this event is not being triggered would be appreciated!

We haven’t been able to replicate this but looking at what you provided what is squarePaymentRequestEventUpdate()? :slightly_smiling_face:

This function just retrieves cart information from our Redux store building up an object of type PaymentRequestUpdate which matches the documentation at: https://developer.squareup.com/reference/sdks/web/payments/objects/PaymentRequestUpdate. I do not think this function is a factor because changing the address always succeeds at causing a shippingcontactchanged + shippingoptionchanged. But never shippingoptionchanged on its own.

export function squarePaymentRequestEventUpdate(): PaymentRequestUpdate {
    const update: PaymentRequestUpdate = {
        lineItems: squarePaymentRequestLineItems(),
        discounts: squarePaymentRequestDiscountOptions(),
        taxLineItems: [{
            label: getLocaleText('Tax'),
            amount: (DefaultCart.totalTax()).toFixed(2),
        }],
        total: {
            label: getLocaleText('Total'),
            amount: (DefaultCart.total()).toFixed(),
        },
    };

    if (!Carts.virtual()) {
        update.shippingOptions = squarePaymentRequestShippingOptions();
        update.shippingLineItems = [{
            amount: (DefaultCart.totalShipping()).toFixed(2),
            label: getLocaleText('Shipping'),
        }];
    }

    return update;
}

On a side note should the Square Web Payments SDK ever have any issues running inside a iFrame?