Preview
Past due
Payment failed. Please update your payment method to avoid losing access. Update payment method
Canceled
This subscription was canceled on Jan 15, 2026.
Scheduled cancel
This subscription is scheduled to cancel on Feb 15, 2026.
Scheduled pause
This subscription will pause on Feb 1, 2026.
Paused + resuming
This subscription is paused. It will resume on Mar 1, 2026.
Paused
This subscription is paused.
Trialing
Your trial ends on Jan 31, 2026.
Playground
Props
Install
pnpm dlx shadcn@latest add @paddle/subscription-alertyarn dlx shadcn@latest add @paddle/subscription-alertnpx shadcn@latest add @paddle/subscription-alertUse an AI agent
Import this component from https://developer.paddle.com/r/subscription-alert.json and open the code for editing. IMPORTANT: preserve the component exactly as-is. Do NOT change colors, CSS variables, Tailwind classes, spacing, fonts, or any visual styles. Do NOT regenerate or restyle the UI. Create files from the registry JSON verbatim and show the code tree.Props
subscription SubscriptionAlertData
Subscription state. The component derives the right alert (past-due, paused, trial ending, scheduled change, etc.) automatically — and returns
null for healthy states, so it's safe to render unconditionally. For past-due alerts, include updatePaymentMethodUrl on the subscription object to surface the recovery CTA. onDismiss () => void
Render the alert with a dismiss button. Persist dismissal in your own layer if you want it to stick across reloads.
className string
Extra Tailwind classes applied to the root element.
What it does
A focused alert banner that picks the right message based on subscription state. Pass the subscription, and the component renders the relevant alert. It supports:
- Payment failed
- Canceling or pausing at period end
- Canceled or paused, including resume date
- Trial ending
Returns null for healthy states, so it's safe to drop in unconditionally.
When to use
- You want to alert subscribers to actionable conditions, like updating their payment method.
- You're rendering alongside the subscription status card component to surface state changes prominently.
- You need consistent messaging without writing custom logic for every subscription state combination.