Closed Bug 874259 Opened 10 years ago Closed 10 years ago

Confirm your payments- credit card screen: UX changes part deux

Categories

(Marketplace Graveyard :: Payments/Refunds, defect)

defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED
2013-06-13

People

(Reporter: krupa.mozbugs, Assigned: keir)

References

Details

Attachments

(4 files)

Attached image screenshot 1
Please make the following changes to the Confirm payment (for credit card purchases)

Changes:

- Field labels should be centered  as per mocks
- If the field "Expires" needs to be truncated, change it to "Exp" instead of "Exp..."
- Let's try to not have the "Save card" label not wrap
- Save card checkbox needs to be gaia component

Missing: 
- Includes taxes copy is missing

overlap:
There are sections which still overlap when the keyboard is up. See screenshot.
Attached image overlapping
Attached is the latest design for the credit card screen

• Missing "Taxes Included" or "Taxes Excluded" messaging
• Save Card should use Gaia round check box UI element. PSD with the check/un-check assets here: https://mdn.mozillademos.org/files/5237/CommonControls_20130305.psd
• "Msg & Data Rates May Apply" should not be a link

Michael can give further guidance on fonts, spacing, colors, etc.
Couple things:

• There should be 6px between the "Card number" and the "Expired field"

• "Exp" and "CVV" should be vertically centered with their fields

• Fields look visually off, (CSS spec below)

{

border-radius: 5px;
background: #FFFFFF;
border: 1px solid #CCCCCC;
-moz-box-shadow: inset 0px 2px 2px 0 rgba(177,177,177,0.30);
-webkit-box-shadow: inset 0px 2px 2px 0 rgba(177,177,177,0.30);
box-shadow: inset 0px 2px 2px 0 rgba(177,177,177,0.30);
Width: 230px;
Height: 40px;

}
still being built.  eta: couple more days
(In reply to Maureen Hanratty from comment #2)
> • Save Card should use Gaia round check box UI element. PSD with the
> check/un-check assets here:
> https://mdn.mozillademos.org/files/5237/CommonControls_20130305.psd

This PSD doesn't contain the assets for the round check box element, only the square one (which we implemented). Can you supply this?
Flags: needinfo?(mhanratty)
Attached image Checkbox
The FFOS team must have updated the asset. Please use the square checkbox. Thanks!
Flags: needinfo?(mhanratty)
Fixed
in test
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Target Milestone: --- → 2013-06-13
You need to log in before you can comment on or make changes to this bug.