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:T1e30,"use client" import * as React from "react" import { CheckoutSummary } from "@/registry/new-york/blocks/checkout-summary/components/checkout-summary" import { useCheckout } from "@/registry/new-york/blocks/paddle-client/lib/hooks/use-checkout" import { addPaddleEventListener } from "@/registry/new-york/blocks/paddle-client/lib/paddle-instance" import { mapCheckoutEventsToSummary } from "@/registry/new-york/blocks/checkout-summary/lib/checkout-summary-utils" import { cn } from "@/lib/utils" import { CheckoutEventNames, type Environments, type CheckoutCustomer, type CheckoutEventsData, type PaddleEventData, type CheckoutOpenLineItem, } from "@/registry/new-york/blocks/paddle-client/lib/paddle-sdk-types" import type { CheckoutCompleteData, CheckoutSummaryData, } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types" const INLINE_CHECKOUT_FRAME_TARGET = "paddle-inline-checkout-frame" const SUMMARY_EVENT_NAMES = new Set([ CheckoutEventNames.CHECKOUT_LOADED, CheckoutEventNames.CHECKOUT_UPDATED, CheckoutEventNames.CHECKOUT_ITEMS_UPDATED, CheckoutEventNames.CHECKOUT_CUSTOMER_CREATED, CheckoutEventNames.CHECKOUT_CUSTOMER_UPDATED, CheckoutEventNames.CHECKOUT_DISCOUNT_APPLIED, CheckoutEventNames.CHECKOUT_DISCOUNT_REMOVED, ]) /** Props for the `InlineCheckout` component. */ export type InlineCheckoutProps = { clientToken: string environment?: Environments items: CheckoutOpenLineItem[] variant?: "one-page" | "multi-page" theme?: "light" | "dark" locale?: string /** Must be an absolute URL (starting with `https://` or `http://`) */ successUrl?: string /** Controls where the order summary appears relative to the checkout frame. Defaults to "start" (summary on the left). */ summaryPosition?: "start" | "end" | "top" | "bottom" customer?: CheckoutCustomer customerAuthToken?: string discountCode?: string discountId?: string customData?: Record policyUrl?: string policyLabel?: string /** Called when the Paddle checkout completes successfully */ onComplete?: (data: CheckoutCompleteData) => void /** Called for every Paddle.js event emitted during checkout */ onEvent?: (event: PaddleEventData) => void /** Called when the Paddle checkout fails to initialize or encounters an error */ onError?: (error: Error) => void className?: string } export function InlineCheckout({ clientToken, environment = "production", items, variant = "one-page", theme, locale, successUrl, summaryPosition = "start", customer, customerAuthToken, discountCode, discountId, customData, policyUrl, policyLabel, onComplete, onEvent, onError, className, }: InlineCheckoutProps) { const [summaryData, setSummaryData] = React.useState(undefined) const [initError, setInitError] = React.useState(null) // Ref avoids stale closure in event listener const onEventRef = React.useRef(onEvent) React.useEffect(() => { onEventRef.current = onEvent }, [onEvent]) const { openCheckout, updateItems, isReady } = useCheckout({ clientToken, environment, theme, locale, checkoutSettings: { displayMode: "inline", variant, frameTarget: INLINE_CHECKOUT_FRAME_TARGET, frameInitialHeight: 450, frameStyle: "width: 100%; min-width: 312px; background-color: transparent; border: none;", }, onComplete, onError: (error) => { setInitError(error) onError?.(error) }, }) // 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, // eslint-disable-next-line react-hooks/exhaustive-deps [JSON.stringify(customData)] ) const itemsKey = React.useMemo( () => items.map((i) => `${i.priceId}:${i.quantity ?? 1}`).join(","), [items] ) const isOpenRef = React.useRef(false) // Tracks the last itemsKey applied to the open checkout so we can skip the // redundant updateItems call that would otherwise fire on the same render // cycle as openCheckout when isReady first becomes true. const prevItemsKeyRef = React.useRef(null) // Open checkout once Paddle is ready React.useEffect(() => { if (!isReady || items.length === 0) return if (!isOpenRef.current) { isOpenRef.current = true openCheckout({ priceId: items[0].priceId, items, ...(stableCustomer && { customer: stableCustomer }), ...(customerAuthToken && { customerAuthToken }), ...(discountCode ? { discountCode } : discountId ? { discountId } : {}), ...(stableCustomData && { customData: stableCustomData }), ...(successUrl && { successUrl }), }) } // eslint-disable-next-line react-hooks/exhaustive-deps }, [isReady]) // Update items reactively after mount React.useEffect(() => { if (!isReady || !isOpenRef.current) return // First run after openCheckout — record the baseline key and skip the call. // openCheckout already applied these items; calling updateItems immediately // after would be a redundant SDK call. if (prevItemsKeyRef.current === null) { prevItemsKeyRef.current = itemsKey return } if (prevItemsKeyRef.current === itemsKey) return prevItemsKeyRef.current = itemsKey updateItems(items.map((i) => ({ priceId: i.priceId, quantity: i.quantity ?? 1 }))) // eslint-disable-next-line react-hooks/exhaustive-deps }, [itemsKey, isReady]) // Subscribe to all Paddle events: update summary + forward to onEvent React.useEffect(() => { const unsubscribe = addPaddleEventListener((event: PaddleEventData) => { if (onEventRef.current) { onEventRef.current(event) } if (event.name && SUMMARY_EVENT_NAMES.has(event.name) && event.data) { setSummaryData(mapCheckoutEventsToSummary(event.data as CheckoutEventsData)) } }) return unsubscribe }, []) if (initError) { return (

Failed to open checkout. Please refresh and try again.

) } const isHorizontal = summaryPosition === "start" || summaryPosition === "end" const summaryFirst = summaryPosition === "start" || summaryPosition === "top" return (

{summaryFirst && (

)}

{!summaryFirst && (

)}

) } 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-client","@paddle/checkout-summary","card"]}]]}],["$","$L4f",null,{"sourceUrl":"https://developer.paddle.com/r/inline-checkout.json","proxyUrl":"https://shadcnregistry.com/r/paddle/inline-checkout","itemId":"@paddle/inline-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/inline-checkout/components/inline-checkout.tsx","content":"$51","type":"registry:component"}]}]]}],"$L52"]}]

Inline Checkout

Installation

Files

components

Styles