Wp-calypso: Checkout: add progress indicator while payment is processed

[designsimply]

Steps to reproduce:

1. Go to https://wordpress.com/ > My Sites > Plan
2. Click an "Upgrade now" button
3. Enter payment information or use credits to make a purchase
4. Watch carefully how purchase progress is indicated

Result: when checking out we display a "Submitting payment" message and the button text changes to "Completing you purchase," but both are fixed text and not a visual indication that the payment is still processing:

/hat tip @kriskarkoski for the original report

Comment from @mikeshelton1503

Ok here's a concept to really clean up the purchase processing experience. Here's what I think we should do:

• Remove the blue notice at the top of the screen. It's pointless.
• Add a transparent overlay (rgba 0,0,0,0.9) over the payment details portion of the screen once the pay button has been clicked/tapped.
• Add a progress indicator along with the copy "Processing Payment" while the payment is processing.
• Once the payment has been accepted, replace progress indicator with a checkmark icon and change the copy to "Purchase Complete".
• After the "Purchase Complete" message displays for 1-2 seconds, fade out the checkout and fade in the Thank You page.

Comment from @breezyskies

This looks really good Mike.

In general we are avoiding spinners in Calypso, but I think this is a place where it makes sense:

• The payment processing takes much longer than almost all of our other form submissions (this can be improved in itself, but it's still going to be a small wait compared to a normal form being saved).
• Skeletons don't make sense here. There's no content loading on this page, and we shouldn't take them to the next step until we know the payment went through (i.e. there are no errors on this page to show).
• The lack of animation in the current version of this form submission makes it seem like something got "stuck" when there's a wait -- the spinner at least gives a perception that something is happening behind the scenes (and as you mentioned, it could also be a progress indicator instead of just a spinner).

The fade in to the thank you page is also much less abrupt in a situation where it really matters (during sensitive payment flows).

Comment from @mikeshelton1503

Well said. Yes, ideally it will be a progress indicator that shows accurate progress (the prototyping software I used made it difficult to show a true progress indicator so ignore that).

Related: https://github.com/Automattic/wp-calypso/issues/221

[breezyskies]

Here's a link to the animation @mikeshelton1503 suggested: https://cloudup.com/cKrzdRZS0j2

[janm6k]

Going through old issues, closing ones that did not have any activity in long time.

Please feel free to reopen if applicable.

[fabianapsimoes]

Reopening as discussed with @alxblock. The slowness and lack of feedback on checkout are big issues, with probably implications to conversions. We should probably revisit this whenever we have the resources, despite the lack of activity in the issue.

[designsimply]

Reopening one more time (possibly temporarily) because I have just retested and there is not a loading indicator present for checkout when purchasing a plan.

Video: 17s
^{Tested with Chrome 64.0.3282.119 on macOS 10.13.3 during Jetpack 5.8 beta testing with wpcomsupport9.com and wpcom user design5279 connected at the time.}

Note: in this case, the test was made with free credits. We may need further testing, which I can do if needed!, to see if the same problem happens for a live credit card purchase.

[mikeshelton1503]

Yep this is only an issue for purchases made with credits. It works fine for purchases with credit cards. I'd close given the low priority of purchases made via credits.

On Feb 2, 2018, at 7:51 PM, Sheri Bigelow [e-mail] wrote:

Reopening one more time (possibly temporarily) because I have just retested and there is not a loading indicator present for checkout when purchasing a plan.

Video: 17s
Tested with Chrome 64.0.3282.119 on macOS 10.13.3 during Jetpack 5.8 beta testing with wpcomsupport9.com and wpcom user design5279 connected at the time.

Note: in this case, the test was made with free credits. We may need further testing, which I can do if needed!, to see if the same problem happens for a live credit card purchase.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[mikeshelton1503]

Actually, coincidentally during usability testing for Incoming Domain Transfers I realized that the checkout processing animation also doesn't display when there is a $0 purchase as is the case for domain transfers when an existing mapping subscription exists, so this is a more common occurrence than I thought.

[mikeshelton1503]

cc @scruffian since you originally implemented the checkout processing state

[aidvu]

I did add a busy state here: https://github.com/Automattic/wp-calypso/pull/21247

So it's a bit better, but would be nice to get the progress bar ported.

[davipontesblog]

Moved to Checkout Redesign for triaging.

[michaeldcain]

The new Checkout flow has both a busy submit button and different button text depending on the state of the submission. Closing again.