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.
