search

Automattic / woocommerce-payments

Accept payments via credit card. Manage transactions within WordPress.
https://wordpress.org/plugins/woocommerce-payments/
Other
176 stars 69 forks source link

Update the Credit and Debit radio button label in checkout #9660

Open pierorocca opened 3 weeks ago

pierorocca commented 3 weeks ago

Description

In https://github.com/Automattic/woocommerce-payments/issues/9625#issuecomment-2447598039 @frosso points out that on mobile sized viewports, e.g. 375px wide, the Test badge wraps.

While this is not overly problematic, making choices that are mobile friendly particularly space efficiency, is an important principle to follow. The two options considered were:

  1. "Credit / debit card" - this aligns with the latest copy in the merchant settings UI.
  2. "Cards" - this was suggested by Daniel in design as the most space efficient option.

Option 2 is the most compelling as it's the most space efficient and opens up room for the new responsive logos seen in v2 and that we'll implement in v1 once Stripe unblocks us. The generic card icon present is temporary and will be replaced by the end of 2024. Cards + card brand logos, currently in the card number field and later will be moved to the radio button, is more than sufficient to let the user know the payment method type.

Acceptance criteria

  1. The Card component radio button label on shortcode and blocks checkout is "Cards".

  2. Decouple (if it really is coupled) and update the settings UI text to "Credit / Debit Cards". This should be plural since it's titling the category consisting of many card brands and types vs. a user entering a single card in checkout where the singular form made sense. Also it looks a bit odd that "card" is the only word in the entire list of payment methods that's lower case. I know normally we use sentence case but in this instance use title case. Image

No other changes to the Test Mode badge or the generic card icon are required at this time.

gpressutto5 commented 3 days ago

Hi @pierorocca, could confirm this is what we want?

Details

![Image](https://github.com/user-attachments/assets/0a3ddb7c-0c60-448f-83fb-0f6a9e79577b) ![Image](https://github.com/user-attachments/assets/bc678fc6-a2c2-4afd-a20f-864c523514d6) ![Image](https://github.com/user-attachments/assets/6073de53-7a08-439f-aaf6-a509a90cac48) ![Image](https://github.com/user-attachments/assets/f9cd4f1a-26b8-495e-914d-6b05619759e2)

pierorocca commented 3 days ago

Temporarily, yes until we're able to replace the generic icon with the new logos implemented in v2. Could we hold off merging until I get the latest update from Stripe on removal of the animation from the card element? Image

On the merchant settings UI capitalize "Card" and change it to the plural "Credit / Debit Cards". Otherwise "cards" is the only non capitalized word in the entire payment method list.

gpressutto5 commented 3 days ago

Will we keep the label "Cards" when we start using the new logos. If so, we can keep the existing PR because that issue is larger and should have its own card. We can still hold this PR so we merge both together even if they're separate.

pierorocca commented 3 days ago

Yes so we can fit more logos and the Test badge without crowding on mobile. FYI Stripe gated our dev account today with the removal of the animation. So I think we're good to move forward with applying the v2 radio button logos to v1.