Payment Form Google Pay - Meaning of Structured Error in Callback Response

Questions
1

Getting this error recently from Google Pay. Any idea what this means or how to fix it ??

DEVELOPER_ERROR in loadPaymentData: An error occurred in call back, please try to avoid this by setting structured error in callback response pay.js:101:412

UPDATE:
After a lot of research I’ve narrowed it down to some of the ShippingOptionChanged or ShippingContactChange callbacks for Google Pay. If I code them according to your documentation, they always produce this error in sandbox or production.

Luckily we have nothing to ship, so I removed all the Shipping callbacks and set the RequestShippingAddress to false, and not include it in the PaymentRequestJson. This allows it to work great.

However, it would be good to fix, or know what’s going on. If you can show me a working example I’d be grateful.

As an aside, when I set requestBillingInfo to true, how would I pick that info up ? I don’t see a callback, and nothing appears to be returned in cardNonceResponseReceived, at least for Google Pay.

2

Can you share what snippet doesn’t work for you? I copied from our technical reference the below code:

{
        requestShippingAddress: true,
        requestBillingInfo: true,
        shippingContact: {
          familyName: "Buyer",
          givenName: "The",
          email: "[email protected]",
          country: "USA",
          region: "CA",
          city: "San Francisco",
          addressLines: [
            "123 Main St"
          ],
          postalCode: "94114"
        },
        currencyCode: "USD",
        countryCode: "US",
        total: {
          label: "devs-Acceptance",
          amount: "5",
          pending: false
        }
    };

and this works fine. As for your billing info, the cardNonceResponseReceived has a billingContact argument which you can use. I tested with Google Pay and confirmed I can see the customer name and some other attributes in this billingContact field. Please let me know if I misunderstood or if you have additional questions!

3

Yes, with this in place, add the two callbacks todo with shipping options, shipping changes, and then it will show the shipping address in google pay. If you then change the shipping address, it will cause the error (for me).

4

Does it error out in the other callbacks, then? I was able to change the shipping address in the Google Pay UI, so it would be good to know exactly where it’s going wrong so we can fix it if needed.

5

@sjosey I created a Square Web SDK React implementation in CodeSandbox to showcase the problem.

  1. Click “Buy with Google Pay” button
  2. Scroll down to Shipping options and change it from “Free” to “Express”
  3. Spinner appears for 30s
  4. Toast shows up: REQUEST TIMEOUT message appears
  5. Error in console: DEVELOPER_ERROR in loadPaymentData: An error occurred in call back, please try to avoid this by setting structured error in callback response
6

Looks like there is an issue with shippingoptionchanged event listener. It is either not returning anything, or is returning a bad object.

7

@Bryan-Square The same thing happens with shippingcontactchanged when changing the shipping address, which is even a worse because if the user already has an address in Google Pay then it opens and immediately shows the 30s spinner (basically, it starts at step 3 in my reproduction steps).

Also, are you saying this is an issue with square.js or the event listener implementation in that CodeSandbox?

EDIT: Oh, I see… I didn’t realize that PaymentRequestUpdate was required to be returned from these listeners… curious why that is (maybe that should be optional?). I’ve updated the CodeSandbox and it is working as expected now, thanks for pointing me in the right direction!

As a side note, it looks like the example in the PaymentRequestUpdate docs has some issues:
image