Payment Method Cards

Display and manage saved payment methods with add, remove, and set default functionality.

Preview

Empty State

Loading State

Features

Responsive card grid (1-3 columns)
Brand-colored card icons (Visa, Mastercard, Amex, etc.)
Default card highlighting with emerald styling
Expired card warning with red styling
Scrollable add card modal (max 90vh height)
Empty state with call-to-action
Actions appear on hover

Install Summary

This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.

Component Files

File	Path
payment-method-list.tsx	components/billing/payment-method-cards/payment-method-list.tsx
payment-method-card.tsx	components/billing/payment-method-cards/payment-method-card.tsx
add-card-modal.tsx	components/billing/payment-method-cards/add-card-modal.tsx
types.ts	components/billing/payment-method-cards/types.ts
index.ts	components/billing/payment-method-cards/index.ts

Utility Files

File	Path
design-tokens.ts	lib/design-tokens.ts

Dependencies

Install these dependencies before using the component:

Terminal

bash

npx shadcn@latest add button dialog input label

Terminal

bash

npm install @phosphor-icons/react

Installation

Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:

Component Files

The component consists of the following files:

1. payment-method-list.tsx

payment-method-list.tsx

tsx

"use client";

import { useState } from "react";
import { Plus, CreditCard } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";

2. payment-method-card.tsx

payment-method-card.tsx

tsx

"use client";

import React, { useState } from "react";
import {
  CreditCard,

3. add-card-modal.tsx

add-card-modal.tsx

tsx

"use client";

import { useState } from "react";
import { CreditCard, CircleNotch as Loader2, MapPin } from "@phosphor-icons/react";
import {

4. types.ts

types.ts

tsx

export type CardBrand =
  | "visa"
  | "mastercard"
  | "amex"
  | "discover"

5. index.ts

index.ts

tsx

export { PaymentMethodCard } from "./payment-method-card";
export { PaymentMethodList } from "./payment-method-list";
export { AddCardModal } from "./add-card-modal";
export type {
  CardBrand,
  BillingAddress,
  PaymentMethod,
  PaymentMethodCardProps,
  AddCardFormData,
  AddCardModalProps,
  PaymentMethodListProps,
} from "./types";

Shared Utilities

This component uses shared utility functions. These are included in the bundle above:

design-tokens.ts

tsx

// Border radius
export const radius = {
  card: "rounded-xl",
  badge: "rounded-full",
  button: "rounded-lg",

Usage

app/billing/page.tsx

tsx

"use client";

import { useState } from "react";
import { PaymentMethodList, type PaymentMethod, type AddCardFormData } from "@/components/billing";

Card Brands

Brand	Background
visa	Blue 600
mastercard	Orange 500
amex	Blue 500
discover	Orange 600
unknown	Gray 500