Option to only trigger canMakePayment on change event

[pixlmint]

The Problem

In the Checkout Block, the canMakePayment function gets triggered by the input event, which means that on every keystroke the function is called. This is incredibly taxing on systems that are making more expensive calculations.

An example would be the Credit Check Plugin I am developing where the plugin makes a call to an external API to see if that customer is allowed to use our Payment Method. And if we didn't add any other logic, we'd be making a call to our API on every keystroke 50+ times per customer

Right now we're solving this like so:

1. Check if all fields, which our API requires, are filled in
2. Wait for 1 Second, if there's another trigger within this second, cancel the currently running one

Of course number one would still remain, but we could remove number 2. The 1 Second timeout was chosen very arbitrarily, and this also means that there's a 1 second delay until the check starts to run after the customer has finished typing.

I've attached how our code works at the bottom of this issue. This Change would mean that we could remove the new Promise logic and the timeout, and I could just return the ajax request directly.

Possible Solutions

• There could be different callbacks besides canMakePayment, like canMakePaymentOnChange, canMakePaymentOnBlur and more, which will only get triggered on a specific HTML event.
• New Option that defines which event canMakePayment listens on

Additional context

Our current code for canMakePayment

    function canMakePaymentCheck(data) {
        console.log('running canMakePayment');

        var reqData = getRequiredData(data);
        if (hasEmptyFields(reqData)) {
            return false
        }
        window.clearTimeout(timeoutCanMakePayment);
        return new Promise(function (resolveTimeout, rejectTimeout) {
            timeoutCanMakePayment = window.setTimeout(function () {
                paymentMethodPermissionRunning = ajaxVerifyCustomerData(reqData)
                    .then(function (r) {
                        resolveTimeout(r.allowInvoice)
                        paymentMethodPermissionRunning = false;
                    })
                    .catch(function (r) {
                        resolveTimeout(false);
                        paymentMethodPermissionRunning = false;
                    });
            }, 1000);
        }).then(function (r) {
            return r;
        });
    }

[senadir]

I think canMakePayment was debounced at one time, this might have changed and we need to add debouncing again.

[senadir]

Debouncing was introduced by @ralucaStan in #4776 and deleted in #6619 by @alexflorisca, any reason it was deleted Alex (I assume migration to stores made debouncing harder), any possiblity to add it back?

[alexflorisca]

Yep, this is on my list to look at, we removed the use-payment-method-registration hook in favour of a function that runs on changes to the data store. Which runs too many times. Maybe the debouncing got missed, I'm not sure I didn't work on that bit myself. I'll bump up that issue and will account for this as well. Stay tuned

[alexflorisca]

@ChristianGroeber the function that calls canMakePayment has been debounced in #7413. If you get the latest trunk or nightly release this should hopefully help with your problem. I'll close this for now, but if it doesn't solve your problem and you still need a hand feel free to comment and re-open