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

Knowtifyd — Wed, 09 Jun 2021 03:37:30 GMT

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>

3. In my checkout.component.ts file I'm declaring Square

declare var Square: any;

4. For the sake of getting the point across, I'm initializing the Square payments object like so

async ngOnInit(): Promise<void> {
    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); <---- throws 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<void> {
// 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.

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

MJD — Tue, 08 Jun 2021 09:44:46 GMT

Hi there @Knowtifyd, after taking a read of your post, I thought you may find more support on the developer forum, you can find that HERE.

I hope I could help, if I did, mark this as best answer to point others with similar questions in the right direction in the future.

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

rbaron91 — Thu, 08 Jul 2021 17:14:08 GMT

I'm experiencing this same exact issue! Were you able to resolve it?

thread Web Payments SDK - Google Pay: Cannot read property 'api' of undefined in Archived Discussions (Read Only)

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

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

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