50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T18af,"use client" import * as React from "react" import { CreditCard, Calendar, ExternalLink } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/registry/new-york/ui/card" import { Skeleton } from "@/registry/new-york/ui/skeleton" import { Separator } from "@/registry/new-york/ui/separator" import { cn } from "@/lib/utils" import type { NextPaymentData, PaymentMethodData, } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types" import { getPaymentMethodDisplay } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-payment-method-display" import { getPaymentMethodIcon } from "@/registry/new-york/blocks/paddle-helpers/lib/payment-method-icons" import { formatMoney, formatDate, } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-format" export type SubscriptionPaymentCardProps = { /** * Next payment details. Absent when subscription is paused or canceled. * * Pass `undefined` for all three data props (`nextPayment`, `paymentMethod`, * `updatePaymentMethodUrl`) to render the skeleton loading state. */ nextPayment?: NextPaymentData /** * Payment method details. Pass raw fields from `transaction.payments[0].method_details` * — the component resolves the display label automatically. * Absent when not available from transaction history. */ paymentMethod?: PaymentMethodData /** Portal deep link to update payment method. Absent for manual collection. */ updatePaymentMethodUrl?: string className?: string } export function SubscriptionPaymentCard({ nextPayment, paymentMethod, updatePaymentMethodUrl, className, }: SubscriptionPaymentCardProps) { const isLoading = nextPayment === undefined && paymentMethod === undefined && updatePaymentMethodUrl === undefined if (isLoading) { return } const displayLabel = paymentMethod ? (paymentMethod.label ?? getPaymentMethodDisplay(paymentMethod.type, paymentMethod.cardBrand, paymentMethod.last4)) : undefined const PaymentMethodIcon = paymentMethod ? (getPaymentMethodIcon(paymentMethod.type, paymentMethod.cardBrand) ?? CreditCard) : CreditCard const expiryLabel = paymentMethod?.expiryMonth !== undefined && paymentMethod?.expiryYear !== undefined ? `Expires ${String(paymentMethod.expiryMonth).padStart(2, "0")}/${String(paymentMethod.expiryYear).slice(-2)}` : undefined return ( Payment {nextPayment ? ( <>

{formatMoney(nextPayment.amount, nextPayment.currency)}

{formatDate(nextPayment.date)}

) : (

No upcoming payment

)} {displayLabel && ( <>

{displayLabel}

{expiryLabel &&

{expiryLabel}

} {updatePaymentMethodUrl && ( Update )}

)} {/* Update link when no payment method but URL is available */} {!displayLabel && updatePaymentMethodUrl && ( <> Update payment method )} ) } function PaymentInfoRow({ icon: Icon, label, children, }: { icon: React.ElementType label: string children: React.ReactNode }) { return (

{label}

{children}

) } function SubscriptionPaymentCardSkeleton({ className }: { className?: string }) { return (

) } 54:T8a1,"use client" import * as React from "react" import { mapSubscriptionToNextPayment, mapTransactionToPaymentMethod, getUpdatePaymentMethodUrl, } from "@/registry/new-york/blocks/subscription-payment-card/lib/subscription-payment-card-utils" import { SubscriptionPaymentCard, type SubscriptionPaymentCardProps, } from "./subscription-payment-card" type SubscriptionInput = Parameters[0] type NextTransactionInput = Parameters[1] export type PaddleSubscriptionPaymentCardProps = { /** Paddle Subscription */ subscription: SubscriptionInput /** * `next_transaction` include from the subscription fetch. * Required for accurate next-bill amount. Fetch with: * `paddle.subscriptions.get(id, { include: ["next_transaction"] })` */ nextTransaction?: NextTransactionInput /** * Most recent completed transaction for the subscription. * Used to determine the stored payment method. Fetch with: * `paddle.transactions.list({ subscriptionId, status: ["completed"], perPage: 1 })` */ lastTransaction?: NextTransactionInput } & Omit /** * Paddle-aware wrapper for `SubscriptionPaymentCard`. * * Accepts raw Paddle subscription and transaction entities, maps them to * `NextPaymentData` and `PaymentMethodData`, and renders the UI component. * * @example * */ export function PaddleSubscriptionPaymentCard({ subscription, nextTransaction, lastTransaction, ...uiProps }: PaddleSubscriptionPaymentCardProps) { const nextPayment = mapSubscriptionToNextPayment(subscription, nextTransaction) const paymentMethod = mapTransactionToPaymentMethod(lastTransaction) const updatePaymentMethodUrl = getUpdatePaymentMethodUrl(subscription) return ( ) } 55:Tf6f,import type { NextPaymentData, PaymentMethodData, } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types" import { parseAmount } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-format" // --- // Input shapes — minimal types matching the Paddle Node SDK / API response. // --- type MethodDetails = { type: string card?: { type?: string | null last4?: string | null expiryMonth?: number | null expiryYear?: number | null } | null } type PaymentEntry = { methodDetails?: MethodDetails | null } type PaddleTransaction = { payments?: PaymentEntry[] | null details?: { totals?: { grandTotal?: string | null } | null } | null } type PaddleSubscription = { currencyCode: string nextBilledAt?: string | null managementUrls?: { updatePaymentMethod?: string | null } | null } /** * Extracts the `NextPaymentData` display contract from a Paddle subscription. * * Requires the `next_transaction` include on the subscription fetch for the * accurate next-bill amount (which may differ from the recurring total if * there are prorations or one-time charges). Falls back to the subscription's * `next_billed_at` for the date. Returns `undefined` when `next_billed_at` * is absent (paused or canceled subscriptions). * * @param subscription - Paddle Subscription * @param nextTransaction - `subscription.nextTransaction` from the `next_transaction` include * @returns Next payment display data, or `undefined` if no upcoming payment * * @example * const data = await paddle.subscriptions.get(subscriptionId, { * include: ["next_transaction"], * }) * const nextPayment = mapSubscriptionToNextPayment(data, data.nextTransaction) */ export function mapSubscriptionToNextPayment( subscription: PaddleSubscription, nextTransaction?: PaddleTransaction | null ): NextPaymentData | undefined { if (!subscription.nextBilledAt) return undefined const amount = nextTransaction?.details?.totals?.grandTotal ? parseAmount(nextTransaction.details.totals.grandTotal, subscription.currencyCode) : 0 return { amount, currency: subscription.currencyCode, date: subscription.nextBilledAt, } } /** * Extracts the `PaymentMethodData` display contract from the most recent * completed Paddle transaction for a subscription. * * Sourced from `transaction.payments[0].method_details` — the last recorded * payment method. Returns `undefined` if no payment entry is present. * * @param transaction - Most recent completed Paddle Transaction for the subscription * @returns Payment method display data, or `undefined` if unavailable * * @example * // Fetch the most recent completed transaction for the subscription * const transactions = await paddle.transactions.list({ * subscriptionId, * status: ["completed"], * perPage: 1, * }) * const paymentMethod = mapTransactionToPaymentMethod(transactions.data[0]) */ export function mapTransactionToPaymentMethod( transaction?: PaddleTransaction | null ): PaymentMethodData | undefined { const methodDetails = transaction?.payments?.[0]?.methodDetails if (!methodDetails) return undefined return { type: methodDetails.type, cardBrand: methodDetails.card?.type ?? undefined, last4: methodDetails.card?.last4 ?? undefined, expiryMonth: methodDetails.card?.expiryMonth ?? undefined, expiryYear: methodDetails.card?.expiryYear ?? undefined, } } /** * Returns the `updatePaymentMethodUrl` prop value from a subscription's * management URLs. * * Returns `undefined` for manually-collected subscriptions (where the portal * URL is `null`) so the update link is hidden. * * @param subscription - Paddle Subscription * @returns Portal URL, or `undefined` if unavailable */ export function getUpdatePaymentMethodUrl(subscription: PaddleSubscription): string | undefined { return subscription.managementUrls?.updatePaymentMethod ?? undefined } 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["@paddle/paddle-helpers","card","skeleton","separator"]}]]}],["$","$L51",null,{"sourceUrl":"https://developer.paddle.com/r/subscription-payment-card.json","proxyUrl":"https://shadcnregistry.com/r/paddle/subscription-payment-card","itemId":"@paddle/subscription-payment-card"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/new-york/blocks/subscription-payment-card/components/subscription-payment-card.tsx","content":"$53","type":"registry:component"},{"path":"registry/new-york/blocks/subscription-payment-card/components/paddle-subscription-payment-card.tsx","content":"$54","type":"registry:component"},{"path":"registry/new-york/blocks/subscription-payment-card/lib/subscription-payment-card-utils.ts","content":"$55","type":"registry:lib"}]}]]}],"$L56"]}]

Subscription Payment Card

Installation

Files

components

lib

Styles