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 v1 Stripe Card component with the new v2 card component design #9331

Open pierorocca opened 3 months ago

pierorocca commented 3 months ago

Description

The existing v1 Stripe card component will be updated to match as closely as possible the new v2 card component design. Card payments are by far the largest share of checkout. It's our most important payment method and getting it optimized

Acceptance criteria

Shortcode (highest priority) and Blocks

  1. In Sandbox or in Test mode, the test copy is displayed.
  2. In Live mode, the test copy is not displayed.
  3. The security code field will continue to display the security code icon rather than the ? tooltip in the FIgma as confirmed by Nikki.
  4. Selecting the clipboard copies the 4242 card to the device's clipboard.
  5. The clipboard icon has a hover effect.
  6. The branding at this time will NOT be implemented. We need to think more about branding placement, especially a B2B brand in a B2C context. There have been other discussions related to branding of the Place Order button and there's an opportunity for that to house WooPayments branding and a spinner animation that is distinctly Woo.
  7. The radio button brand logos will be replaced per the design with the new responsive icon design. In order of precedence Visa, MC, Amex.
  8. Placeholder and label text match site styles. The component should feel native.
  9. UPEAppearance is applied to style the additional styles as done in the current component.
  10. Supports limited custom CSS as in the current component.
  11. If Stripe delivers on the promise to remove the animated logos in the cardnumber field, we'll remove that animation.

Shortcode specific

Blocks specific

Designs

Figma - g1bWnb6JBO3X3bGrgJnRJe-fi-154_7168

P2 Design Post - pfHfG4-gT-p2

Applied with the noted changes above.

cc @FangedParakeet @nikkivias

nikkivias commented 2 months ago

@pierorocca @FangedParakeet

Can we do a generic card?

Checkout-Classic

Stripe-Blocks
pierorocca commented 2 months ago

Works for me in the interim until Stripe enables our end state design.

pierorocca commented 2 months ago

Noting @nikkivias for Blocks checkout Floating Labels should be the standard and Above the Field labels for Shortcode.

pierorocca commented 1 month ago

@FangedParakeet "Test mode:" is supposed to be removed given the Test badging and to get the instructive text all on one line. Could you please open a PR for Blocks and ensure Shortcode does not have the prefix?

Image

FangedParakeet commented 3 weeks ago

@pierorocca, see #9654. Quick fix, just approved it. 👍