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:T10b8,"use client" import * as React from "react" import { PricingSelectCardStacked } from "@/registry/new-york/blocks/pricing-select-cards/components/pricing-select-card-stacked" import { PricingSelectCardGrid } from "@/registry/new-york/blocks/pricing-select-cards/components/pricing-select-card-grid" import { PricingSelectCardGroup } from "@/registry/new-york/blocks/pricing-select-cards/components/pricing-select-card-group" import { usePaddlePrices } from "@/registry/new-york/blocks/paddle-client/lib/hooks/use-paddle-prices" import { ExpressCheckoutDrawer } from "./express-checkout-drawer" import { Button } from "@/registry/new-york/ui/button" import type { CheckoutCustomer, Environments, } from "@/registry/new-york/blocks/paddle-client/lib/paddle-sdk-types" import type { CheckoutCompleteData } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types" import type { PricingSelectPlan } from "@/registry/new-york/blocks/pricing-select-cards/components/pricing-select-card" import { cn } from "@/lib/utils" /** Props for the `ExpressCheckout` component. */ export type ExpressCheckoutProps = { clientToken: string environment?: Environments plans: PricingSelectPlan[] defaultPriceId?: string layout?: "stacked" | "grid" customer?: CheckoutCustomer discountCode?: string discountId?: string customData?: Record theme?: "light" | "dark" locale?: string showNonExpressPaymentMethods?: boolean onComplete?: (data: CheckoutCompleteData) => void onError?: (error: Error) => void submitLabel?: string className?: string } export function ExpressCheckout({ clientToken, environment = "production", plans, defaultPriceId, layout = "stacked", customer, discountCode, discountId, customData, theme, locale, showNonExpressPaymentMethods, onComplete, onError, submitLabel = "Subscribe now", className, }: ExpressCheckoutProps) { const [selectedPlan, setSelectedPlan] = React.useState(defaultPriceId || plans[0]?.priceId || "") const [drawerOpen, setDrawerOpen] = React.useState(false) const selectedPlanName = plans.find((p) => p.priceId === selectedPlan)?.name const { prices, loading, error } = usePaddlePrices({ clientToken, environment, priceIds: plans.map((plan) => plan.priceId), countryCode: customer?.address?.countryCode, }) if (error) { return (

Failed to load pricing: {error.message}

) } return (

{plans.map((plan) => layout === "grid" ? ( ) : ( ) )}

) } 52:T123e,"use client" import * as React from "react" import { Drawer, DrawerContent, DrawerDescription, DrawerTitle, } from "@/registry/new-york/ui/drawer" import { Skeleton } from "@/registry/new-york/ui/skeleton" import { useCheckoutDrawer } from "@/registry/new-york/blocks/express-checkout/hooks/use-checkout-drawer" import type { OpenCheckoutOptions, CheckoutCustomer, Environments, } from "@/registry/new-york/blocks/paddle-client/lib/paddle-sdk-types" import type { CheckoutCompleteData } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types" /** Props for the `ExpressCheckoutDrawer` component. */ export type ExpressCheckoutDrawerProps = { open: boolean onOpenChange: (open: boolean) => void priceId: string clientToken: string environment?: Environments customer?: CheckoutCustomer discountCode?: string discountId?: string customData?: Record theme?: "light" | "dark" locale?: string showNonExpressPaymentMethods?: boolean onComplete?: (data: CheckoutCompleteData) => void onError?: (error: Error) => void } export function ExpressCheckoutDrawer({ open, onOpenChange, priceId, clientToken, environment = "production", customer, discountCode, discountId, customData, theme, locale, showNonExpressPaymentMethods, onComplete, onError, }: ExpressCheckoutDrawerProps) { const { openCheckout, closeCheckout, checkoutHeight, isReady } = useCheckoutDrawer({ clientToken, environment, theme, locale, showNonExpressPaymentMethods, onComplete, onError, }) const [checkoutLoaded, setCheckoutLoaded] = React.useState(false) // Stable ref — effects re-run only when actual values change const stableCustomer = React.useMemo( () => customer, // eslint-disable-next-line react-hooks/exhaustive-deps [ customer?.id, customer?.email, customer?.address?.id, customer?.address?.countryCode, customer?.address?.postalCode, customer?.address?.region, customer?.address?.city, customer?.address?.firstLine, customer?.business?.id, customer?.business?.name, customer?.business?.taxIdentifier, ] ) const stableCustomData = React.useMemo( () => customData, // JSON.stringify is the most pragmatic deep-compare for Record // eslint-disable-next-line react-hooks/exhaustive-deps [JSON.stringify(customData)] ) React.useEffect(() => { if (open && isReady && priceId) { setCheckoutLoaded(false) // Delay until drawer is fully mounted and visible const timeoutId = setTimeout(() => { const options: OpenCheckoutOptions = { priceId, ...(stableCustomer && { customer: stableCustomer }), ...(discountCode ? { discountCode } : discountId ? { discountId } : {}), ...(stableCustomData && { customData: stableCustomData }), } openCheckout(options) // Brief delay for Paddle to render before showing content setTimeout(() => setCheckoutLoaded(true), 500) }, 300) return () => clearTimeout(timeoutId) } }, [ open, isReady, priceId, stableCustomer, discountCode, discountId, stableCustomData, openCheckout, ]) React.useEffect(() => { if (!open) { closeCheckout() setCheckoutLoaded(false) } }, [open, closeCheckout]) return ( {/* Hidden title and description for accessibility */} Checkout Complete your purchase using the checkout form below. {/* Inner container handles height transitions separately from Vaul's drawer animation */}

{!checkoutLoaded && (

)}

) } 53:T9aa,"use client" import { useEffect, useCallback, useRef, useState } from "react" import type { PaddleEventData, CheckoutSettings, } from "@/registry/new-york/blocks/paddle-client/lib/paddle-sdk-types" import { addPaddleEventListener } from "@/registry/new-york/blocks/paddle-client/lib/paddle-instance" import { useCheckout, type UseCheckoutArgs, } from "@/registry/new-york/blocks/paddle-client/lib/hooks/use-checkout" const INITIAL_HEIGHT = 220 const PADDING = 95 // Inflated due to Paddle iframe sizing bug, will be reduced to ~40 once fixed // checkout.ping.size carries a height field not yet in @paddle/paddle-js types type PaddlePingSizeEvent = PaddleEventData & { height?: number } // Express checkout settings — passed explicitly to useCheckout to match the // checkout-container target div rendered in ExpressCheckoutDrawer. const EXPRESS_SETTINGS: CheckoutSettings = { displayMode: "inline", variant: "express", frameTarget: "checkout-container", frameInitialHeight: 180, frameStyle: "width: 100%; border: 0;", } export type UseCheckoutDrawerArgs = Omit export function useCheckoutDrawer(args: UseCheckoutDrawerArgs) { const { openCheckout, closeCheckout, isReady } = useCheckout({ ...args, checkoutSettings: EXPRESS_SETTINGS, }) const [checkoutHeight, setCheckoutHeight] = useState(INITIAL_HEIGHT) const heightTimeoutRef = useRef | null>(null) // Debounce height updates for smooth drawer transitions const setHeightDebounced = useCallback((height: number) => { if (heightTimeoutRef.current) { clearTimeout(heightTimeoutRef.current) } heightTimeoutRef.current = setTimeout(() => { const maxHeight = window.innerHeight * 0.8 setCheckoutHeight(Math.min(height + PADDING, maxHeight)) }, 50) }, []) // Track drawer height via checkout.ping.size events useEffect(() => { const unsubscribe = addPaddleEventListener((event) => { const { type, height } = event as PaddlePingSizeEvent if (type === "checkout.ping.size" && height) { setHeightDebounced(height) } }) return unsubscribe }, [setHeightDebounced]) // Cleanup debounce on unmount useEffect(() => { return () => { if (heightTimeoutRef.current) { clearTimeout(heightTimeoutRef.current) } } }, []) return { openCheckout, closeCheckout, checkoutHeight, isReady, } } 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":[["$","li","vaul",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/vaul","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":"vaul"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":["@paddle/paddle-client","@paddle/pricing-select-cards","drawer","button"]}]]}],["$","$L4f",null,{"sourceUrl":"https://developer.paddle.com/r/express-checkout.json","proxyUrl":"https://shadcnregistry.com/r/paddle/express-checkout","itemId":"@paddle/express-checkout"}],["$","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/express-checkout/components/express-checkout.tsx","content":"$51","type":"registry:component"},{"path":"registry/new-york/blocks/express-checkout/components/express-checkout-drawer.tsx","content":"$52","type":"registry:component"},{"path":"registry/new-york/blocks/express-checkout/hooks/use-checkout-drawer.tsx","content":"$53","type":"registry:hook"}]}]]}],"$L54"]}]

Express Checkout

Installation

Files

components

hooks

Styles