4e: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"] 4f: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"] 50: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"] 51:T14ff,"use client" import * as React from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/registry/new-york/ui/card" import { Separator } from "@/registry/new-york/ui/separator" import { Skeleton } from "@/registry/new-york/ui/skeleton" import { cn } from "@/lib/utils" import type { CheckoutSummaryData } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types" import { formatMoney, formatBillingCycle, } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-format" /** Props for the `CheckoutSummary` component. */ export type CheckoutSummaryProps = { summary?: CheckoutSummaryData policyUrl?: string policyLabel?: string className?: string } export function CheckoutSummary({ summary, policyUrl, policyLabel = "Refund policy", className, }: CheckoutSummaryProps) { if (!summary) { return } const { items, subtotal, tax, total, discount, currency, recurringTotal, recurringInterval, recurringFrequency, trialPeriod, } = summary const recurringInfo = recurringTotal !== undefined && recurringInterval ? (() => { const cycleLabel = formatBillingCycle({ frequency: recurringFrequency ?? 1, interval: recurringInterval, }) const recurringAmount = formatMoney(recurringTotal, currency) return cycleLabel ? `${recurringAmount} / ${cycleLabel}` : recurringAmount })() : undefined return ( Order summary

{item.name} {item.priceName && ( — {item.priceName} )} {item.quantity > 1 && ( × {item.quantity} )}
{formatMoney(item.lineTotal, currency)}

Subtotal: {formatMoney(subtotal, currency)}
Discount: −{formatMoney(discount, currency)}
Tax: {formatMoney(tax, currency)}
Total: {formatMoney(total, currency)}

{(recurringInfo || trialPeriod) && (

{trialPeriod && {trialPeriod} free trial. } {recurringInfo && Then {recurringInfo}.}

)} {policyUrl && ( {policyLabel} )} ) } function CheckoutSummarySkeleton({ className }: { className?: string }) { return (

) } 52:T4fe,"use client" import * as React from "react" import { mapCheckoutEventsToSummary } from "@/registry/new-york/blocks/checkout-summary/lib/checkout-summary-utils" import { CheckoutSummary, type CheckoutSummaryProps } from "./checkout-summary" type CheckoutEventsInput = Parameters[0] export type PaddleCheckoutSummaryProps = { /** * Raw `CheckoutEventsData` from a Paddle.js checkout event callback * (e.g. `checkout.loaded`, `checkout.updated`). */ checkoutData?: CheckoutEventsInput } & Omit /** * Paddle-aware wrapper for `CheckoutSummary`. * * Accepts raw `CheckoutEventsData` from Paddle.js checkout event callbacks, * maps it to `CheckoutSummaryData`, and renders the order summary UI. * * Pass `undefined` to render the skeleton loading state. * * @example * const [checkoutData, setCheckoutData] = useState() * * */ export function PaddleCheckoutSummary({ checkoutData, ...uiProps }: PaddleCheckoutSummaryProps) { const summary = checkoutData ? mapCheckoutEventsToSummary(checkoutData) : undefined return } 53:Td9d,import type { CheckoutSummaryData } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types" import { formatTrialPeriod } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-format" // --- // Input shapes — minimal types matching the Paddle.js CheckoutEventsData shape. // Field names use snake_case (Paddle.js convention). Pass the raw checkout event // payload or any object matching this shape. // --- type TimePeriodLike = { interval: string frequency: number } type CheckoutEventItem = { product?: { name?: string | null } | null price_name?: string | null quantity?: number | null totals?: { subtotal?: number | null } | null billing_cycle?: TimePeriodLike | null trial_period?: TimePeriodLike | null } type CheckoutEventsInput = { currency_code?: string | null items?: CheckoutEventItem[] | null totals?: { subtotal?: number | null tax?: number | null total?: number | null discount?: number | null } | null recurring_totals?: { total?: number | null } | null } /** * Maps a Paddle.js checkout event payload to the `CheckoutSummaryData` * display contract consumed by `CheckoutSummary`. * * Paddle.js checkout event totals are already decimal numbers (not lowest-denomination), * so no cents-to-decimal conversion is needed here. For Paddle API amounts, use * `parseAmount()` from `paddle-format` — those are returned in lowest denomination. * * @param data - Paddle.js checkout event data (e.g. from `checkout.loaded` / `checkout.updated`) * @returns Mapped summary data for `` * * @example * paddle.Update({ eventCallback: (event) => { * const summary = mapCheckoutEventsToSummary(event.data) * }}) */ export function mapCheckoutEventsToSummary(data: CheckoutEventsInput): CheckoutSummaryData { const currency = data.currency_code ?? "" const items = (data.items ?? []).map((item) => ({ name: item.product?.name ?? "", priceName: item.price_name ?? undefined, quantity: item.quantity ?? 1, lineTotal: item.totals?.subtotal ?? 0, })) const totals = data.totals const recurringTotals = data.recurring_totals const discount = totals?.discount && totals.discount > 0 ? totals.discount : undefined // Build recurring billing info from the first item that has a billing cycle. // Using find() rather than [0] handles mixed carts (e.g. one-time setup fee // followed by a recurring subscription) where the first item may not recur. let recurringTotal: number | undefined let recurringInterval: string | undefined let recurringFrequency: number | undefined const firstRecurringItem = data.items?.find((item) => item.billing_cycle != null) const billingCycle = firstRecurringItem?.billing_cycle if (billingCycle && recurringTotals?.total != null) { recurringTotal = recurringTotals.total recurringInterval = billingCycle.interval recurringFrequency = billingCycle.frequency } // Build trial period label from the first item that has a trial period. let trialPeriod: string | undefined const firstTrialItem = data.items?.find((item) => item.trial_period != null) if (firstTrialItem?.trial_period) { trialPeriod = formatTrialPeriod(firstTrialItem.trial_period) } return { items, subtotal: totals?.subtotal ?? 0, tax: totals?.tax ?? 0, total: totals?.total ?? 0, discount, currency, recurringTotal, recurringInterval, recurringFrequency, trialPeriod, } } 4a:["$","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":[]}],["$","$L4e",null,{"registryDependencies":["@paddle/paddle-helpers","card","separator","skeleton"]}]]}],["$","$L4f",null,{"sourceUrl":"https://developer.paddle.com/r/checkout-summary.json","proxyUrl":"https://shadcnregistry.com/r/paddle/checkout-summary","itemId":"@paddle/checkout-summary"}],["$","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"}],["$","$L50",null,{"files":[{"path":"registry/new-york/blocks/checkout-summary/components/checkout-summary.tsx","content":"$51","type":"registry:component"},{"path":"registry/new-york/blocks/checkout-summary/components/paddle-checkout-summary.tsx","content":"$52","type":"registry:component"},{"path":"registry/new-york/blocks/checkout-summary/lib/checkout-summary-utils.ts","content":"$53","type":"registry:lib"}]}]]}],"$L54"]}]

Checkout Summary

Installation

Files

components

lib

Styles