x

Web Payments SDK - Google Pay: 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>


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. 

Message 1 of 3
405 Views
2 REPLIES 2
Super Seller

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.

Matt - He/They
Sign in and click Mark as Best Answer if my reply answers your question!
Shop my online store - MJD Photography
Follow me on instagram - @MJD.ONLINE
Message 2 of 3
356 Views

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

Message 3 of 3
192 Views