865329 - UX input for "Waiting for payment to complete.." screen

Status: VERIFIED FIXED

(Marketplace Graveyard :: Payments/Refunds, defect)

Description

[krupa raj[:krupa]]

Attachment: screenshot

steps to reproduce:
1. Click the purchase button for a paid app


observed behavior:
TrustedUI loads with the screen "Waiting for payments to complete.." screen which is currently the loading screen. See screenshot.

This page needs some UX love.

Comment 1

[Kumar McMillan [:kumar]]

in theory no one will ever see this screen. It usually means there is an error. We should also add some troubleshooting tips on this screen. We should at least add a button like "retry payment"

Comment 2

[Maureen Hanratty]

Any loading or progress page should follow the visual spec found in this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=856827#c0

Just to clarify, is this when the user clicks the "Buy" button on a confirm payment screen or when the user clicks the "$.99" button on a Marketplace screen?

Comment 3

[Maureen Hanratty]

Attachment: Payment failure error screen

Kumar, this is the error screen I came up with if a payment fails. I'm interested in your idea of adding tips/allow the user to retry the payment. Does any data get passed to us regarding what the possible issue is? For example, do we know if the user is no longer on wifi/data, if there is a server error, etc.? It would be good if we could have specific error messages for specific conditions and whether the user should retry immediately, wait awhile, or take some other action.

Comment 4

[Kumar McMillan [:kumar]]

It's not a failure screen, it's more of a loading screen. It means that the mozilla server has not yet made a connection to the Bango API so it is waiting to proceed to Bango. It would happen right after the user enters a PIN and right before she sees the Buy button on Bango.

We may have some clues on the Mozilla server/db about what is causing the wait but I can't think of any concrete troubleshooting tips to tell the user right now.

As for retrying the purchase, this is simple to do. In some cases it might solve the problem (for example, if Mozilla's servers are overloaded). We should definitely provide a retry button. The page should also timeout after waiting too long.

Comment 5

[Maureen Hanratty]

Attachment: Proposed progress screen

Here's my proposal for a loading screen when user is moving from pin to confirm payment screen

Comment 6

[Maureen Hanratty]

Attachment: Proposed error message when system times out

Kumar, how do you like this for an error message when the system times out? If they click "Retry" we will show the progress screen again. If they click "Cancel" we can either 1) take them back to the screen the user was last on (in this case the pin screen) 2) close Trusted UI. 

What do you think?

Comment 7

[Kumar McMillan [:kumar]]

I like the error message and retry screen. I like the loading screen but the message "Connecting to payments" seems too technical for the user. Could we say something like "Preparing your device to make a payment" ?

Comment 8

[krupa raj[:krupa]]

(In reply to Maureen Hanratty from comment #6)
> Created attachment 741902 [details]
> Proposed error message when system times out
> 
> Kumar, how do you like this for an error message when the system times out?
> If they click "Retry" we will show the progress screen again. If they click
> "Cancel" we can either 1) take them back to the screen the user was last on
> (in this case the pin screen) 2) close Trusted UI. 
> 
> What do you think?

Can we change the copy to something like "App purchase is taking longer than expected. Try again?"

Comment 9

[Maureen Hanratty]

(In reply to Kumar McMillan [:kumar] from comment #7)
> I like the error message and retry screen. I like the loading screen but the
> message "Connecting to payments" seems too technical for the user. Could we
> say something like "Preparing your device to make a payment" ?

I want to stick with "Connecting to Payments" if that is ok. I think the messaging let's the user know in a transparent way what is happening and why things are taking so long. Plus it is terse which is nice for translation. For what it is worth, I checked with my husband (who is a writer and not a super technical guy) and he thought it didn't sound too technical to him.

Comment 10

[Maureen Hanratty]

(In reply to krupa raj 82[:krupa] from comment #8)
> (In reply to Maureen Hanratty from comment #6)
> > Created attachment 741902 [details]
> > Proposed error message when system times out
> > 
> > Kumar, how do you like this for an error message when the system times out?
> > If they click "Retry" we will show the progress screen again. If they click
> > "Cancel" we can either 1) take them back to the screen the user was last on
> > (in this case the pin screen) 2) close Trusted UI. 
> > 
> > What do you think?
> 
> Can we change the copy to something like "App purchase is taking longer than
> expected. Try again?"

I like "App purchase is taking longer.." as an error message for an issue after the user clicks "Buy" on the confirmation payment screen. I think to put this before the confirmation payment screen is confusing--it makes it sound like payment is processing which is not yet the case. So I will add it to the documentation for when a payment times out.

Comment 11

[Maureen Hanratty]

Attachment: Re-write error message when system times out

Changed "Would you like to retry" to "Try again."

Comment 12

[Kumar McMillan [:kumar]]

Thanks Maureen. Since we have the UX input I'm closing this bug. We'll implement the new screens and messages in bug 876811 and bug 876808.

Comment 13

[krupa raj[:krupa]]

we have mocks now.