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

• Above the field labels

Blocks specific

• Floating labels
• Add UPEAppearance support for Dark Mode input fields.

Designs

Figma - g1bWnb6JBO3X3bGrgJnRJe-fi-154_7168

P2 Design Post - pfHfG4-gT-p2

Applied with the noted changes above.

cc @FangedParakeet @nikkivias