PaymentRequest event callbacks not firing when expected

Questions
1

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!

2

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

3

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?

4

@max and @Bryan-Square
I also see this issue where the event listeners are not firing.

Have you figured out this issue?

Thanks