> For the complete documentation index, see [llms.txt](https://developer.paddle.com/llms.txt).

# Subscription payment card

A customer's next payment date, amount, and the payment method on file, with option to update the payment method.

---

## What it does

A compact card showing a customer's upcoming payment: the amount due, the date, and which payment method is going to be charged. Includes an optional link out to your update-payment-method flow.

## When to use

- You're building your own billing screen rather than using the [customer portal](https://developer.paddle.com/concepts/customer-portal.md).
- You're laying out a billing or account settings page and want next payment details separate from the main status card.
- You're building a side panel or compact summary view where the [subscription status card](https://developer.paddle.com/sdks/components/subscription-status-card.md) would be too detailed.

**Registry:** [`https://developer.paddle.com/r/subscription-payment-card.json`](https://developer.paddle.com/r/subscription-payment-card.json)

## Install

```bash
npx shadcn@latest add @paddle/subscription-payment-card
```

Also runnable with `pnpm dlx shadcn@latest add @paddle/subscription-payment-card` or `yarn dlx shadcn@latest add @paddle/subscription-payment-card`.

## Props

- **nextPayment** (NextPaymentData): Upcoming payment — amount, currency, date. Absent when the subscription is paused or canceled. Pass undefined for all three data props to render the skeleton loading state.
- **paymentMethod** (PaymentMethodData): Payment method details. Pass raw fields from transaction.payments[0].method_details — the component resolves the display label and icon automatically. type accepts card, paypal, apple_pay, google_pay, wire_transfer, alipay, ideal, sofort, and more.
- **updatePaymentMethodUrl** (string): Portal deep-link to update the payment method. Absent for manual (invoice) collection.
- **className** (string): Extra Tailwind classes applied to the root element.