Relocating the browser with a form post, UI is gone

[it-ony]

Credit cards with special security enabled, e.g. 3D secure are redirecting the customer to a web page to enter a pin or verify the identity over a 2nd channel. To redirect the browser a real form post needs to be send as XHR requests cannot change the location of the browser.

This leads to the problem that whenever the browser is relocated the UI of the payment request is gone.

paymentRequest
    .show()
    .then(paymentResponse => {

        // until paymentResponse.complete() is invoked 
        // the UI of the vendor shows a loading indicator

        fetch("/updateDelivery")
        .then(response => {
            if (response.status === 200) {

                var form = document.createElement("form");
                form.setAttribute("method", "post");
                form.setAttribute("action", url);

                // append value fields

                form.appendChild(valueField);
                document.body.appendChild(form);

                // when the form is submitted the UI of the payment request dialog is gone
                // even if the checkout process can take up a while as usually 
                // there are many redirects involved
                form.submit();

            } else {
                paymentResponse.complete('fail');
            }
        })
    })
    .catch(e => console.error(e));

This is not an issue, when relaying on pure XHR calls. But, from my experience, the current real world scenarios require form posts and redirects.

[rsolomakhin]

You can use paymentResponse.complete("unknown"); or its equivalent paymentResponse.complete(); immediately after receiving the paymentResponse object to gracefully close the PaymentRequest UI. If you do this, then you would have the responsibility to notify the user of payment success or failure on the webpage yourself.

[it-ony]

The UX issue here is, that paymentResponse.complete(); closes the loading UI as well as sending the form post.

In the scenario when talking to payment providers the simple form post with the payment data will most likely result in a set of redirects, which takes a while. UX wise, the user will see for a while "empty white pages", before the 3D secure screen is shown or the checkout success page.

Somehow it would be cool, it the UI with the loader could stay.

Other then that, the only solution to the problem coming to my mind is using a separate frame for the form post, where the redirect magic happens. But this leads to other problems:

• the UI will be open, even if the user is requested to enter e.g. a 3D secure secret
• payment providers could forbid to run within an iframe with the X-Frame-Options.

[rsolomakhin]

Interesting use case! + @zkoch for consideration.