Hi I'm using Angular 2+ to integrate the sandbox PayPal checkout button with my form and throughout most of the process it works fine. The issue I'm having is that the onApprove() method seems to get called twice after the process ends which I can see because the HTTP request I have in that method gets called twice.
I've tried looking online for anyone who has experienced a similar problem but I can't find any resources on how to fix it. I have a few warnings in Chrome's console but these seem to be unrelated to the problem.
The console.log statements in createSubscription and onCancel only print once so I think that eliminates the possibility of there being some kind of duplicate window.
My code seems to be fairly similar to everyone else's implementation which I've seen on the web which is why I can't wrap my head around why it doesn't work.
component.ts
ngAfterViewInit() {
paypal.Buttons({
onInit: (data, actions) => {
},
onClick: (actions) => {
},
createSubscription: (data, actions) => {
return actions.subscription.create({
'plan_id': this.planID,
});
},
onApprove: (data, actions) => {
console.log(data + ' transaction approved');
this.submitLoginDetails();
//this.getSubcriptionDetails(data.subscriptionID);
// use auth login method and redirect to /home
},
onCancel: (data) => {
console.log('Transaction cancelled');
},
onError: (err) => {
console.log(err);
}
}).render(this.paypalElement.nativeElement);
}
component.html
<!-- LOGIN FORM -->
<div id='payment' [hidden]="stepCounter!==2">
<form #loginForm='ngForm'>
<div id="user-data">
<div class="form-group">
<label for="name" required>Name</label>
<input type="text" name="name" id="name" class="form-control" ngModel minlength=1 #name='ngModel'>
<span class="help-block" *ngIf='(!name.valid || name.value.length === 0) && name.touched'>Please enter a valid name</span>
</div>
<div class="form-group">
<label for="email" required email>Email</label>
<input type="email" name="email" id="email" class="form-control" ngModel email #email='ngModel'>
<span class="help-block" *ngIf='(!email.valid || email.value.length === 0) && email.touched'>Please enter a valid email</span>
</div>
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" name="password" id="password" class="form-control" ngModel required minlength=6 #password='ngModel'>
<span class="help-block" *ngIf='(!password.valid || password.value.length === 0) && password.touched'>Please enter at least six characters</span>
</div>
<div #paypal></div>
<span class="help-block" *ngIf='buttonError && !loginForm.valid'>Please make sure the values above are valid before checking out</span>
</form>
</div>
Console after the checkout has been completed and onApprove() has been called
