Wp-calypso: Checkout: implement pending thank-you page after redirect

[yoavf]

With various payment methods that involve a redirect to a payment partner site (like iDEAL/Giropay/Alipay/etc.) the payment confirmation comes with a webhook, in parallel to the user being redirected back to WordPress.com.

While the redirect URL back to WordPress.com is set here to /checkout/thank-you/${ selectedSiteSlug }/${ receiptId } WordPress.com will replace receiptId with pending when it cannot confirm the payment success at the time of the redirect. In this case, Calypso just displays a generic thank-you note.

We need to implement a specific pending checkout thank-you page that will poll the backend for the order status, and will redirect to the proper payment confirmation/receipt page, or display an error message when appropriate.

[southp]

I did a quick PoC to explore today: #23484 . In summary, my plan is to:

1. Implement a new endpoint for fetching the payment status.
2. Add a new data-layer handler for interacting with the above endpoint.
3. Add a redux substate for storing the payment status, including actions / reducers / selectors.
4. Implement a query component for polling.
5. Add a new checkout page route like: checkout/thank-you/:site/pending/:orderId. In this page, using the query component to poll for the payment status. If it's successful, then jump to the thank-you page. If it's not, then jump to the failure page. I'm not sure if there is a suitable payment failure page though. There seems to be two possible failures: the payment has failed somehow, the payment has been cancelled which could be pending for too long. Ideally, we should show different messages for each.

Does that make sense to you? Also cc @Automattic/neutron here for confidence check 🙇

[janm6k]

I don't have much experience with the redux parts, but from API point of view this sounds like a good plan!

[sirbrillig]

redux work (yay for using the data-layer!) sounds like a good plan too!

[southp]

All of the ingredients for resolving this are now ready.

Backend

code-D11190. It will be deployed only after all the calypso pieces are deployed.

Calypso

In the dependency order:

1. https://github.com/Automattic/wp-calypso/pull/23822
2. https://github.com/Automattic/wp-calypso/pull/23827
3. https://github.com/Automattic/wp-calypso/pull/23841
4. https://github.com/Automattic/wp-calypso/pull/23715

[southp]

@yoavf @Automattic/payments I've just rolled out everything. If there is anything broken, please let me know. Thanks for guiding me on the way 🙇