Long delay from the time when the scrim disappears and the onApprove fires

[mmadd]

I'm using smart payment buttons on a WordPress site I manage. Instead of integrating with an e-commerce plugin, I've opted to write the JS myself as it didn't seem that difficult. I'm creating an order successfully and all the payments are processing as expected in the sandbox and live environments as expected. My problem is that there seems to be a delay of 3-5 seconds between when the paypal modal and scrim disappear and when anything in the onApprove method actually fires. Even a simple console.log() has a long delay. I'm updating inventory locally in the onApprove. As it stands, if there is any activity on the page during that delay, it prevents the inventory update. Navigating away from the page, or simply refreshing means the inventory is not updated locally and the customer is not redirected to a success page. Is this behavior expected? If not, is there a workaround?

[mr_moneymaker]

I'm also facing this issue, the multiple second delay in triggering the onApprove callback is very concerning.

[LuBre]

Any update on this issue? I still experience the same problem...

[Sara132]

Same here, it's very frustrating and it's causing service disruption. Those 3 seconds are more than enough for someone to close the browser window, or swipe left on their phone.

[JackieDaytona]

Sara:

You wouldn't happen to have a JavaScript or JQuery PayPal Validate Form routine would you.  What I am trying to do is:

          paypal

               .Buttons({

                     style: {
                               layout: 'horizontal',
                               color: 'gold',
                               shape: 'pill',
                              label: 'checkout',
                              size: 'responsive',
                              tagline: 'true',
                     },

                     // THIS IS WHERE i AM STUCK //

                    onInit: function(data, actions) { // Disable the buttons actions.disable();

                          actions.disable();

                          $(window.document);  //get back to top window and the document to use $(this)

                            var empty = 'false';

                            $('input[type="text"]'.each(function() {

                               if ($(this).val()  = "") {

                                  empty = 'true'

                                 if (empty == 'true') {

                                     onCancel: function(data) {
                                        $('#transmsg').html('<b>' + 'YOUR TRANSACTION WAS CANCELLED' + '</b>');

                                        $('#transmsg).append('<br>' +'<b>' + 'YOU HAVE EMPTY FORM FIELDS' + '<b>')
                                        $('#transmsg').fadeIn('slow').delay(3000).fadeOut('slow', function() {
                                        $('#paypalmsg').show();
                                        $('#chkoutmsg').show();
                                       $('#transmsg').empty();
                                    });  //end of on cancel
                                 }      // end of if empty true

                               }       //end of this val

                              });     // end of .each

                            },       // end of on init function

BUT I CANNOT GET THE BUTTON TO APPEAR 

ANY HELP IS APPRECIATED 

Thank  you                  

[LuBre]

I added Stripe and I let it run for a while in parallel with PayPal. I let my customers decide what's best for them, they can choose whatever they want.

Guess what? Customer are NOT attached to the PayPal brand as I thought they were. In 2 weeks test every single customers choose Stripe instead of Paypal. No payment delays, no issues, full support for Apple and Google payments too and a much lower fee.

Dear Paypal: SAYONARA!

[Sara132]

@LuBre Yeah, I'd rather not go through the whole song and dance of integrating another payment system, but I guess that's what I'll have to do. I'm sick and tired of having to deal with nonsense from PP TBH. This whole 3 second fiasco is ridiculous "it's so easy to integrate, and it just works"...well: no, and no!.

[LuBre]

Totally understandable but Stripe is extremely well documented and a pure joy to code. On top of that my clients have MUCH lower fee, a better service and an overall better experience. As an added bonus, Stripe also automatically supports Google Pay and Apple Pay without doing anything (mobile users will see the option, others wont).

[Sara132]

@JackieDaytona 
If you're trying to validate fields you can do it on "onclick". This is how I handle it(see below). Now, keep in mind that regardless of whatever method you chose, if PP doesn't "like" the value the button will misfire (the popup will appear and disappear after a second). Unfortunately, there is no way of knowing WHY any given value isn't appreciated by PP, because no error message is thrown back! I had an episode recently where a customer had added an extra space at the end of her email address (I guess she C+V her email address, it happens often that an extra space is copied when you do that), and the button was misfiring...a simple extra space and everything on PP crashed. Pathetic if you ask me, it might happen in the future with phone numbers with crazy extensions, addresses: who knows!! Since we don't get an error back or a formatting/taxonomy guide from PP to know what is "approved" and what isn't, we are just forced to guess and hope for the best. Anyhow, here's how I do it (I use SWAL https://sweetalert.js.org/ instead of the standard alert box, it just looks better):

// Render the PayPal button into #paypal-button-container
paypal.Buttons({

.......

onClick: function (data, actions) {

//make sure all the user's info has been entered

if (document.getElementById("txtFname).value == null || document.getElementById("txtFname").value == "") {
swal("", "Please enter a Name in the space provided", "info");
return false;
};
if (document.getElementById("txtLname").value == null || document.getElementById("txtLname").value == "") {
swal("", "Please enter a Last Name in the space provided", "info");
return false;
};
if (document.getElementById("txtAddress").value == null || document.getElementById("txtAddress").value == "") {
swal("", "Please enter an Address in the space provided", "info");
return false;
};
if (document.getElementById("txtZIP").value == null || document.getElementById("txtZIP").value == "") {
swal("", "Please enter a ZIP/Postcode in the space provided", "info");
return false;
};
if (document.getElementById("txtCity").value == null || document.getElementById("txtCity").value == "") {
swal("", "Please enter a City in the space provided", "info");
return false;
};
if (document.getElementById("txtState).value == null || document.getElementById("txtState").value == "") {
swal("", "Please enter a State/Province/County in the space provided", "info");
return false;
};
if (document.getElementById("lstCountry").options[document.getElementById("lstCountry").selectedIndex].value == null || document.getElementById("lstCountry").options[document.getElementById("lstCountry").selectedIndex].value == "") {
swal("", "Please select a Country in the space provided", "info");
return false;
};
if (document.getElementById("txtTelephone").value == null || document.getElementById("txtTelephone").value == "") {
swal("", "Please enter a Telephone number in the space provided", "info");
return false;
};

},

.........

}).render('#paypal-button-container');

[JackieDaytona]

Thank you for that, but I went a different way.  I used JQuery Validator to validate BEFORE I display the PayPal Button.

Appreciate it

D