Paypal-checkout-components: onApprove function is being called twice after checkout is completed

Created on 31 May 2020 · 10Comments · Source: paypal/paypal-checkout-components

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

Affected browsers

[Yes, tested] Chrome
[Yes, tested] Edge
[ Not tested] Safari
[ Not tested] Firefox
[ Not tested] IE
[ Not tested] Chrome Mobile/Tablet
[ Not tested] Safari Mobile/Tablet
[ Not tested] Web View / Safari ViewController
[ Not tested] Other

Thank you for taking the time to read,
Craig

outdated 🐞 bug

Source

CraigRonald555

Most helpful comment

Issue has been fixed around 6AM PT. Thanks for your patience.

ravishekhar on 3 Jun 2020

🎉3 👍2

All 10 comments

@ravishekhar can you check this one? Is it possible the subscription setup flow is calling onApprove multiple times?

bluepnume on 31 May 2020

Can confirm that [onApprove] is being called twice for me. Been debugging for hours wondering what happened to my code suddenly without touching it.

wlachenal on 2 Jun 2020

@wlachenal are you also using the subscription integration? If not, can you share steps to repro?

bluepnume on 2 Jun 2020

Yeah, using the subscription API.

Created a plan on paypal dashboard along with their corresponding subscriptions.
Embedded the Paypal SDK
> https://www.paypal.com/sdk/js?client-id=[CLIENT_ID]&vault=true&currency=USD&disable-funding=credit,card
Added the JS code to checkout page (Having problems pasting code so just attached picture)
Do purchase a subscription
After successful purchase, [onApprove] will call twice.