Consider advancing to the next step after choosing payment type

[jonathanKingston]

So long as there is smaller calls to actions to rectify previous mistakes then the process should always be able to advance to the next step when valid data is input (besides the explicit pay).

So for the first screen you choose visa vs paypal. Clicking one of these should essentially click next also.

[jonathanKingston]

Similarly after typing valid data into a field you could consider focusing the next field.
When we did this we animated a valid indicator around the field and then highlighted the next field sometimes this was exaggerated etc to reduce the user jank of you pulling the rug away from them.

The validation was debounced to ~300 ms and a small animation to tick and highlight the field green. This gave the user enough time to edit, however upon advancing they could click back into the previous box which would slow the auto advancing the next time around. Also an invalid or unchanged field wouldn't auto advance.

STR:

1. user is shown card payment page and cc field is autofocused and is blue
2. user types 37828224 and pauses a little, the field is highlighted blue still
3. user types 378282246310008 and then pauses further, field highlight changes to orange and a validation spinner happens. Field however doesn't match luhns algo so fails, indicator stops spinning and stays orange
4. user modifies the last char to read: 378282246310005 spinner goes for 300ms then turns green after another 300ms the focus auto moves to the date selection.
5. user refocuses cc field and deletes a char step 2. starts again until a valid field.

Times, colours and styles are likely to need research however our data suggested that the animation and advancing of the fields actually increased the conversion.

[marcoscaceres]

Good suggestions. There is a whole UI spec around all these things - but could definitely integrate some of the above.