Web Payments SDK - Google Pay - TypeError: Cannot read property 'api' of undefined

Howdy, y’all!

Ok, I’m using the new Square Web Payments SDK with Angular 12 to generate the Google Pay button but I keep getting this error:

"TypeError: Cannot read property ‘api’ of undefined" and I’ve been trying numerous methods to resolve the issue.

Here’s what I’m doing.

  1. In my index.html file I’m referencing
    <script type="text/javascript" src="https://web.squarecdn.com/v1/square.js"></script>

  2. In my checkout.component.html I have something like:

<form id="payment-form">
    <div id="google-pay-button"></div>
</form>
  1. In my checkout.component.ts file I’m declaring Square

declare var Square: any;

  1. For the sake of getting the point across, I’m initializing the Square payments object like so
async ngOnInit() {
 const applicationId = 'sq0idp-xxxxxxxxxxxxxxx'; // production
 const locationId = 'xxxxxxxxxxx'; // production
 const payments = await Square.payments(applicationId, locationId);
 const paymentRequest = payments.paymentRequest({
    countryCode: 'US',
    currencyCode: 'USD',
    total: {
        amount: '1.00',
        label: 'Total',
    },
});
 const googlePay = await payments.googlePay(paymentRequest); <---- exception
 await googlePay.attach('#google-pay-button');

}

but once I get to this line:
const googlePay = await payments.googlePay(paymentRequest);
The exception is thrown: “TypeError: Cannot read property ‘api’ of undefined.”

I’ve tried waiting till the DOM is finished loading by using:

async ngAfterViewInit(): Promise {
// Same code as above but only in ngAfterViewInit vs ngOnInit
}

But I still get that same exception. Also tried ngAfterContentInit

Is there something I’m missing?

Thanks in advance.

This is likely a name collision. The line of code that’s probably the source of the error is new google.payments.api.PaymentsClient , and if you have any variables named google , it would cause google.payments to be undefined.

You were spot on, mate! There was a naming collision. Thank you!!

I notice if Google Maps is added to the same project as Square like so:

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

<script type="text/javascript" src="https://web.squarecdn.com/v1/square.js"></script>

There will be a collision with google.payments.api.PaymentsClient.

Do you have any recommendations to mitigate this issue when initializing googlePay?

  googlePay = await payments.googlePay(payments.paymentRequest({
        countryCode: 'US',
        currencyCode: 'USD',
        total: {
          amount: '1.00',
          label: 'Total',
        },
      }));

Glad to hear that you figured it out. Unfortunately we don’t have any recommended ways to handle this. I believe Google uses window.google for their namespace, and there’s nothing preventing a collision.

@Bryan-Square Google does use window.google for their namespace and it seems to always result in a collision with the web payments sdk. I don’t think I’ll have much success asking Google to alter their namespace, and I must use google maps in my project, so am I just out of luck? Am I missing some obvious solution to this problem? As it stands, it seems to me I will be unable to use google pay via square in my web app.