Skip to content

[FE-38] Build Payment Method Display Card with masked details and remove confirmation #1017

@devwums

Description

@devwums

Problem

The billing/settings page has no component to display a saved payment method. Members cannot see their saved card details or remove/update their payment method.

Proposed Solution

Create frontend/cntr/PaymentMethodCard/PaymentMethodCard.tsx. Props: method: { type: 'card' | 'bank', last4: string, brand?: string, expiryMonth?: number, expiryYear?: number }, onRemove: () => void, onUpdate: () => void. Renders the card details with masked digits (•••• •••• •••• {last4}), brand label, expiry as MM/YY, and "Update" / "Remove" buttons. Remove button shows an inline confirmation before calling onRemove. All implementation must live inside frontend/cntr/.

Acceptance Criteria

  • File at frontend/cntr/PaymentMethodCard/PaymentMethodCard.tsx
  • Displays masked card number with only last 4 digits visible
  • Expiry formatted as MM/YY (e.g., "09/27")
  • "Remove" requires an inline confirmation click before calling onRemove
  • "Update" calls onUpdate immediately
  • Test in frontend/cntr/PaymentMethodCard/PaymentMethodCard.test.tsx

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions