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

Status: RESOLVED FIXED

(Marketplace Graveyard :: Payments/Refunds, defect)

Description

[krupa raj[:krupa]]

Attachment: 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.

Comment 1

[krupa raj[:krupa]]

Attachment: overlapping

Comment 2

[Maureen Hanratty]

Attachment: Credit Card payment screen

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.

Comment 3

[Michael Maslaney [:mmaslaney] ([e-mail])]

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;

}

Comment 4

[Wil Clouser [:clouserw]]

still being built.  eta: couple more days

Comment 5

[Keir Kettle]

(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?

Comment 6

[Maureen Hanratty]

Attachment: Checkbox

The FFOS team must have updated the asset. Please use the square checkbox. Thanks!

Comment 7

[Tom]

Fixed

Comment 8

[Steve Ruston]

in test