Preview
Payment
Next payment
$29.99
Feb 1, 2026
Payment method
Visa ending 4242
Playground
Data
Payment method
Install
pnpm dlx shadcn@latest add @paddle/subscription-payment-cardyarn dlx shadcn@latest add @paddle/subscription-payment-cardnpx shadcn@latest add @paddle/subscription-payment-cardProps
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.
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.
- 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 would be too detailed.