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

[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

[AbdulmujibOladayo]

@AbdulmujibOladayo has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

Hello team, i would love to resolve this issue. i have so many free time so i will be dedicated to your project.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @AbdulmujibOladayo to this issue.

[drips-wave]

Congratulations, @AbdulmujibOladayo! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 2, 2026.

🧑‍💻 @AbdulmujibOladayo: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @AbdulmujibOladayo as part of the Stellar Wave Program's 5th Wave 🥳

😎 @AbdulmujibOladayo: You earned 150 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.