Improve Adyen drop-in error handling

[rvdsteege]

When a payment via the Adyen drop-in fails, we're currently blocking the entire drop-in component for 5 seconds:

dropin.setStatus( 'error', { message: error.message } );

setTimeout( () => {dropin.setStatus( 'ready' );}, 5000 );

Source: https://github.com/wp-pay-gateways/adyen/blob/b767d59242fd8c66bc9ba7eee34cd32c677771ad/js/src/checkout-drop-in.js#L36-L38

Instead, it would be better to add the error message elsewhere on the page — outside of the drop-in component — and leave the drop-in status unaffected (or reset by setting the status to ready).

[rvdsteege]

I've updated the checkout script a bit:

1. requests go through the same response validation;
2. almost all requests go through the same response processing (Apple Pay merchant validation needs to handle a specific status message and call given resolve/reject methods);
3. all errors are now handled through an handle_error() function (handles syntax errors + sets the drop-in status to error);
4. the error handler is 'blocking': it prevents a second try and does not set the drop-in back to the ready status;
5. if our payment has the 'Pending' status and the page is reloaded, a second payment at the gateway can still occur.

The error message passed to dropin.setStatus( … ) cannot contain HTML. However, if we use a small delay after updating the drop-in status, we can append a 'Try again' link to the status text element (class adyen-checkout__status__text). If we make it possible to create a new payment from the current payment, we can improve for #1 this way.

it would be better to add the error message elsewhere on the page — outside of the drop-in component — and leave the drop-in status unaffected

I tried not blocking the drop-in and displaying the error message elsewhere on the page, but it was easy to miss. If we want to combine error handling with single transactions at the gateway, I think using the drop-in provided error status is the best way forward.

I don't expect updating the SDK and API version in #3 to have any influence on the error handling, so we should still do both.

@remcotolsma thoughts?

[remcotolsma]

Discussed at Pronamic HQ, @rvdsteege is working on it.