Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

onApprove function is being called twice after checkout is completed

See original GitHub issue

I’m having an issue with the onApprove function, unlike the other ones I implement in my button, this one seems to be called twice shown below in the screenshot.

I’ve asked about on stackoverflow and a user suggested that it may be due to a duplicate button being rendered however I’ve checked my code and I only implement the button once. I’ve also only referenced the SDK once in my index.html file so I can’t see where it could be duplicated.

I do have quite an obscure ‘supplemental_order_missing_payees’ error when the button is initially clicked so I’m guessing that may have something to do with it.

Right after checkout process has been completed:

onCancel doesn’t seem to be getting called twice as it executes the console.log statement once:

onCancel doesn't seem to have this problem

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');
    console.log(data.subscriptionID);

  },

  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>

Paypal version: 5.0.128

Browser version: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36

The error occurs after https://www.sandbox.paypal.com/checkoutnow

This is an issue which occurs consistently, I haven’t had it where it doesn’t call onApprove twice

Steps to reproduce

My angular version is 9.1.3, I initiate the button within a typescript component which renders a div from the html file with the help of @ViewChild to access the div