I have a page with a paypal button, and it doesn't load half the time. I just refreshed the page 30 times in a row. It alternated working 9 times in a row, then it didn't load for 11 straight times, then it loaded for 10 straight times. I am completely lost. Same thing happens in test as it does live.
The error when the button doesn't load
deposittest.component.ts:224 TypeError: Cannot read properties of undefined (reading 'nativeElement')
at deposittest.component.ts:218:36
at _ZoneDelegate.invoke (zone.js:368:26)
at Object.onInvoke (core.mjs:26321:33)
at _ZoneDelegate.invoke (zone.js:367:52)
at Zone.run (zone.js:129:43)
at zone.js:1257:36
at _ZoneDelegate.invokeTask (zone.js:402:31)
at core.mjs:25998:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:25998:36)
at _ZoneDelegate.invokeTask (zone.js:401:60)
ts file with some code removed
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { loadScript, PayPalNamespace } from "@paypal/paypal-js";
@Component({
selector: 'app-deposittest',
templateUrl: './deposittest.component.html',
styleUrls: ['./deposittest.component.css']
})
export class DeposittestComponent implements OnInit {
depositState$: Observable<State<CustomHttpResponse<User>>>;
private dataSubject = new BehaviorSubject<CustomHttpResponse<User>>(null);
private isLoadingSubject = new BehaviorSubject<boolean>(false);
isLoading$ = this.isLoadingSubject.asObservable();
DataState = DataState;
private isLoggedInSubject = new BehaviorSubject<boolean>(false);
isLoggedIn$ = this.isLoggedInSubject.asObservable();
PAYPAL_CLIENT_ID: string = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
myAmount: any
@ViewChild('paypalRef', { static: false }) private paypalRef!: ElementRef;
constructor(private notificationService: NotificationService, private router: Router, private userService: UserService) {
}
ngOnInit(): void {
this.depositState$ = this.userService.depositInit$()
.pipe(
map(response => {
console.log(response);
this.dataSubject.next(response);
return {
dataState: DataState.LOADED, appData: response
};
}),
startWith({ dataState: DataState.LOADING }),
catchError((error: string) => {
return of({ dataState: DataState.ERROR, error })
})
)
this.renderPaypalButton();
}
renderPaypalButton() {
let orderRef: string | null = null;
loadScript({
"clientId": this.PAYPAL_CLIENT_ID,
currency: 'USD',
disableFunding: 'paylater,credit,card,venmo',
})
.then((loadedPaypal) => {
if (loadedPaypal) {
const paypal: PayPalNamespace = loadedPaypal;
paypal.Buttons({
style: {
layout: 'vertical',
color: 'blue',
shape: 'rect',
label: 'paypal',
},
createOrder: (data, actions) => {
const postData = {
amount: this.myAmount,
state: this.state
};
return fetch(AppSettings.API_ENDPOINT + '/user/create_paypal_transaction', {
method: "post",
headers: {
'Authorization': 'Bearer ' + localStorage.getItem(Key.TOKEN),
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json'
},
body: JSON.stringify(postData)
})
.then((response) => response.json())
.then((response) => {
// console.log("create order response ");
// console.log(response);
// console.log("create order id ");
// console.log(response.data.order.id);
return response.data.order.id;
});
},
onApprove: (data, actions) => {
return fetch(AppSettings.API_ENDPOINT + `/user/paypal/capture_order/${data.orderID}`, {
method: "post",
headers: {
'Authorization': 'Bearer ' + localStorage.getItem(Key.TOKEN),
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json',
},
})
.then((response) => response.json())
.then((response) => {
this.paypalRedirect(response.data.order.status, orderRef);
});
},
onCancel: () => {
//
},
onError: (err) => {
this.notificationService.onError('Error processing deposit.');
this.paypalRedirect('ERROR', orderRef);
}
}).render(this.paypalRef.nativeElement);
} else {
console.error("");
}
})
.catch((error) => {
console.error("", error);
});
}
paypalRedirect(status: string, orderRef: string | null) {
switch (status) {
case 'COMPLETED':
if (orderRef) {
this.notificationService.onDefault('Payment Successful.');
this.router.navigate(['/paypal/result/success/']);
} else {
console.error("Missing success redirect");
}
break;
case 'ERROR':
if (orderRef) {
this.notificationService.onError('Payment could not be completed.');
this.router.navigate(['/']);
} else {
console.error("Missing failure redircte");
}
break;
default:
console.error("redirection.");
break;
}
}
}
html file
<ng-container *ngIf="(depositState$ | async) as state" [ngSwitch]="state.dataState">
<ng-container *ngSwitchCase="DataState.LOADED">
<app-navbar [user]="state?.appData?.data?.user"></app-navbar>
<section>
<div id="payment" class="mt-3">
<div class="col-md-12">
<div class="form-group">
<div style="font-weight: bold;">Name on file: {{ state?.appData?.data?.user.firstName+'
'+state?.appData?.data?.user.lastName}} </div>
<div class="mt-2" style="font-style: italic;font-size: 1rem;">Your name on file must match the
name associated with your form of payment.</div>
</div>
</div>
<div id="input" class="form-group mt-3">
<label style="font-size: .8rem;" class="me-2">Enter Amount: $10 - $999</label>
<input type="text" (keypress)="decimalFilter($event)" placeholder="Enter amount here" ngModel
name="myAmount" (ngModelChange)="myAmount=$event" value="{{myAmount }}"
class="form-control mb-2">
</div>
<div #paypalRef></div>
</div>
</section>
</ng-container>
<ng-container *ngSwitchCase="DataState.LOADING">
<div>Loading...</div>
</ng-container>
<ng-container *ngSwitchCase="DataState.ERROR">
<div>{{ state.error }}</div>
</ng-container>
<app-authfooter></app-authfooter>
</ng-container>
I would appreciate any suggestions. Thank you
You have a race condition going on, where you wait for depositState$ to load and render the page. Simultaneously the renderPaypalButton() method gets called. If loading the state is fast enough the paypal-buttons will render just fine. If not the template is not available at the time you try to render the buttons.
So what you should do is introduce a tap function where you check if the state is defined and therefor your template is ready and place renderPaypalButton() in there.
this.userService.depositInit$()
.pipe(
// ...other code
tap((pageLoaded) => {
if (pageLoaded) this.renderPaypalButtons()
})
)
This is also why placing renderPaypalButtons() in ngAfterViewInit won`t make any difference since your whole page depends on the first *ngIf.