837289 - [tracking] Make single-page app for webpay

Status: RESOLVED FIXED

(Marketplace Graveyard :: Payments/Refunds, defect, P1)

Description

[Kumar McMillan [:kumar]]

The payment flow (webpay) has to be as snappy as possible with as little http interaction as possible. This is to prototype a client side implementation without the server to get a sense for how to support all the variations on the user flow.

Comment 1

[Kumar McMillan [:kumar]]

This is just a prototype so it doesn't depend on anything in the current UI (yet)

Comment 2

[Potch [:potch]]

Documenting my thoughts on this for the next person to inherit this bug (hi stuart!)

webpay is a good candidate for a single-page app because of the consistency of its UI, and the statefulness of the interaction.

I will attempt to explain the various UI states as a basic text adventure below. Hope it helps!


Detail Page
-----------
You are on the detail page for a paid app.
You see a button marked "0.99". 

> PRESS BUTTON
Are you logged in?
> NO
GOTO Persona
> YES
GOTO Pin Entry


Persona
-------
You are in Mozilla Persona's sign-in-flow.
Are you locked out or resetting your PIN?

> NO
Logging in...
GOTO Lobby

> YES
Logging in...
GOTO Pin Reset


Lobby
-----
You are in webpay's lobby.
Do you have a PIN?

> NO
GOTO Create PIN

> YES
Enter your PIN to continue.

> **** √
GOTO Payment

> **** X
Invalid Pin.
> **** X
Invalid Pin.
> **** X
You are now locked out. Please Sign in to reset your pin.
GOTO Persona

> FORGOT PIN
GOTO Confirm PIN Reset


Pin Confirm
-----------
You are at the PIN reset confirmation.
Are you sure you would like to reset your PIN?

> YES
Your PIN is now being reset.
Please Sign in.
GOTO Persona

> NO
GOTO Lobby


Pin Reset
---------
You are now in the PIN Reset Flow.
Please enter a new PIN

> ****
Please re-enter the PIN to confirm.
> **** X
PIN does not match.
> **** √
Resetting your PIN...
GOTO Lobby


Payment
-------
You are about to purchase this awesome app for USD 0.99.
Are you sure you would like to complete this purchase?

> YES
Sending you to our secure payment provider.
GOTO Bango

> NO
Well never mind then.
GOTO Detail Page


Bango
-----
*A sudden flash of light and swirl of wind*
*Magic happens*
GOTO Payment Complete


Payment Complete
----------------
Your Purchase is complete.

> OK
GOTO Detail Page

Comment 3

[Potch [:potch]]

Attachment: Just in case the text description was completely inscrutable, the whiteboard version.

Comment 4

[Kumar McMillan [:kumar]]

Yes! I want this to be the source of our test suite.

Comment 5

[Potch [:potch]]

Realized I forgot the Create PIN Flow.


Create PIN
----------
Select a 4-Digit PIN.

> ****
Please re-enter the PIN to confirm.
> **** X
PIN does not match.
> **** √
Setting up account...
*Something Something SMS (kumar can elaborate)*
GOTO Lobby

Comment 6

[[e-mail]]

Currently looking into this and prototyping with commonplace with a view to discussing this more in the upcoming workweek.

Comment 8

[David Bialer [:dbialer]]

How does a user select between multiple payment options if those exist before confirmation?

Comment 9

[Andy McKay]

(In reply to David Bialer [:dbialer] from comment #8)
> How does a user select between multiple payment options if those exist
> before confirmation?

The payment choice page is out of scope for this bug.

Comment 10

[[e-mail]]

Updated to P1 as SPA as a project is a P1

Comment 11

[Andy McKay]

There's still a few bugs, but this is so done. Yay!