62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T8185,'use client' import * as React from 'react' import { Check, Copy, CornerDownRight, Globe, Server, ShieldCheck, Terminal, Zap } from 'lucide-react' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card } from '@/components/ui/card' import { Separator } from '@/components/ui/separator' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' export interface ApiDocumentationPageProps { className?: string } type LanguageKey = 'curl' | 'node' | 'python' | 'go' | 'ruby' type StatusKey = '200' | '400' | '401' interface HeaderItem { name: string type: string required: boolean sample: string description: string } const headersList: HeaderItem[] = [ { name: 'Authorization', type: 'string', required: true, sample: 'Bearer uipkge_live_51Msz...', description: 'Secret API key prefixed with uipkge_live_ or sk_test_. Pass in the HTTP Authorization header.', }, { name: 'Content-Type', type: 'string', required: true, sample: 'application/json', description: 'Specifies the media type of the request body. Must be application/json.', }, { name: 'Idempotency-Key', type: 'string (UUID)', required: false, sample: '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d', description: 'Unique client-generated key that prevents duplicate executions if a request is retried.', }, ] interface NestedParam { name: string type: string required: boolean description: string example?: string } interface BodyParam { name: string type: string required: boolean description: string example?: string nested?: NestedParam[] } const bodyParams: BodyParam[] = [ { name: 'customer_id', type: 'string', required: true, description: 'Unique customer identifier for the subscriber. Must begin with the prefix cus_.', example: '"cus_N63vKZbI8O8yWp"', }, { name: 'plan_id', type: 'string', required: true, description: 'Identifier of the subscription tier to enroll the customer into.', example: '"plan_pro_monthly"', }, { name: 'items', type: 'array of objects', required: true, description: 'List of subscription line items defining the base plan and any optional recurring addons.', nested: [ { name: 'items[].price_id', type: 'string', required: true, description: 'Unique price object identifier corresponding to a catalog product.', example: '"price_1Msz82eZvKYlo2C"', }, { name: 'items[].quantity', type: 'integer', required: false, description: 'Unit quantity of the specified price item. Defaults to 1 if omitted.', example: '1', }, ], }, { name: 'payment_method_id', type: 'string', required: false, description: 'Attached payment method ID (pm_...) to charge. If omitted, uses the customer default payment source.', example: '"pm_1OdVq82eZvKYlo2C"', }, { name: 'billing_cycle_anchor', type: 'integer (timestamp)', required: false, description: 'Future Unix timestamp that marks the beginning of recurring billing cycles.', example: '1717200000', }, { name: 'trial_period_days', type: 'integer', required: false, description: 'Number of zero-charge trial days before regular billing begins (1 to 90).', example: '14', }, { name: 'coupon_code', type: 'string', required: false, description: 'Valid discount or promotional coupon applied to initial invoices.', example: '"LAUNCH2026"', }, { name: 'metadata', type: 'object', required: false, description: 'Arbitrary key-value map for attribution and custom IDs. Supports up to 50 keys, max 500 chars/value.', example: '{"referrer": "onboarding_flow"}', }, ] interface ResponseAttr { name: string type: string description: string example: string } const responseAttributes: ResponseAttr[] = [ { name: 'id', type: 'string', description: 'Unique identifier for the subscription entity, prefixed with sub_.', example: '"sub_1Om48B2eZvKYlo2CqO8k2"', }, { name: 'object', type: 'string', description: 'String representing the object type. Always subscription.', example: '"subscription"', }, { name: 'customer', type: 'string', description: 'Customer identifier associated with this subscription record.', example: '"cus_N63vKZbI8O8yWp"', }, { name: 'status', type: 'string', description: 'Current lifecycle status: trialing, active, past_due, canceled, unpaid, or incomplete.', example: '"trialing"', }, { name: 'current_period_start', type: 'integer (timestamp)', description: 'Unix timestamp marking the start of the current active billing cycle.', example: '1717200000', }, { name: 'current_period_end', type: 'integer (timestamp)', description: 'Unix timestamp marking the end of the current cycle and scheduled renewal date.', example: '1719792000', }, { name: 'trial_end', type: 'integer (timestamp) | null', description: 'Unix timestamp when the free trial period concludes and billing begins.', example: '1718409600', }, { name: 'cancel_at_period_end', type: 'boolean', description: 'If true, the subscription will terminate automatically at the end of the current period.', example: 'false', }, { name: 'latest_invoice', type: 'string', description: 'Identifier of the most recent invoice generated for this subscription (in_...).', example: '"in_1Om48B2eZvKYlo2Cj891"', }, ] interface StatusPill { code: StatusKey label: string summary: string dotColor: string } const statusPills: StatusPill[] = [ { code: '200', label: '200 OK', summary: 'Subscription created successfully. Returns full subscription entity.', dotColor: 'bg-success', }, { code: '400', label: '400 Bad Request', summary: 'Missing required parameters or malformed JSON payload.', dotColor: 'bg-warning', }, { code: '401', label: '401 Unauthorized', summary: 'Missing, expired, or invalid Bearer secret API key.', dotColor: 'bg-destructive', }, ] const requestSnippets: Record = { curl: `curl -X POST https://api.acme.com/v1/customers/subscriptions \\ -H "Authorization: Bearer uipkge_live_51Msz..." \\ -H "Content-Type: application/json" \\ -H "Idempotency-Key: 9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d" \\ -d '{ "customer_id": "cus_N63vKZbI8O8yWp", "plan_id": "plan_pro_monthly", "payment_method_id": "pm_1OdVq82eZvKYlo2C", "billing_cycle_anchor": 1717200000, "items": [ { "price_id": "price_1Msz82eZvKYlo2C", "quantity": 1 }, { "price_id": "price_addon_seats_pro", "quantity": 5 } ], "trial_period_days": 14, "coupon_code": "LAUNCH2026", "metadata": { "referrer": "onboarding_flow", "account_manager": "priya.raman" } }'`, node: `import Acme from '@acme/sdk' const acme = new Acme({ apiKey: process.env.ACME_SECRET_KEY, }) const subscription = await acme.subscriptions.create({ customerId: 'cus_N63vKZbI8O8yWp', planId: 'plan_pro_monthly', paymentMethodId: 'pm_1OdVq82eZvKYlo2C', billingCycleAnchor: 1717200000, items: [ { priceId: 'price_1Msz82eZvKYlo2C', quantity: 1 }, { priceId: 'price_addon_seats_pro', quantity: 5 }, ], trialPeriodDays: 14, couponCode: 'LAUNCH2026', metadata: { referrer: 'onboarding_flow', accountManager: 'priya.raman', }, }, { idempotencyKey: '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d', }) console.log(subscription.id)`, python: `import os import acme acme.api_key = os.environ.get("ACME_SECRET_KEY") subscription = acme.Subscription.create( customer_id="cus_N63vKZbI8O8yWp", plan_id="plan_pro_monthly", payment_method_id="pm_1OdVq82eZvKYlo2C", billing_cycle_anchor=1717200000, items=[ {"price_id": "price_1Msz82eZvKYlo2C", "quantity": 1}, {"price_id": "price_addon_seats_pro", "quantity": 5}, ], trial_period_days=14, coupon_code="LAUNCH2026", metadata={ "referrer": "onboarding_flow", "account_manager": "priya.raman", }, idempotency_key="9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d", ) print(subscription.id)`, go: `package main import ( "context" "fmt" "os" "github.com/acme/acme-go" ) func main() { client := acme.NewClient(os.Getenv("ACME_SECRET_KEY")) params := &acme.SubscriptionCreateParams{ CustomerID: acme.String("cus_N63vKZbI8O8yWp"), PlanID: acme.String("plan_pro_monthly"), PaymentMethodID: acme.String("pm_1OdVq82eZvKYlo2C"), Items: []*acme.SubscriptionItemParams{ {PriceID: acme.String("price_1Msz82eZvKYlo2C"), Quantity: acme.Int64(1)}, {PriceID: acme.String("price_addon_seats_pro"), Quantity: acme.Int64(5)}, }, TrialPeriodDays: acme.Int64(14), CouponCode: acme.String("LAUNCH2026"), Metadata: map[string]string{ "referrer": "onboarding_flow", "account_manager": "priya.raman", }, } sub, err := client.Subscriptions.New(context.Background(), params) if err != nil { panic(err) } fmt.Printf("Created subscription: %s\\n", sub.ID) }`, ruby: `require "acme" Acme.api_key = ENV["ACME_SECRET_KEY"] subscription = Acme::Subscription.create( { customer_id: "cus_N63vKZbI8O8yWp", plan_id: "plan_pro_monthly", payment_method_id: "pm_1OdVq82eZvKYlo2C", billing_cycle_anchor: 1717200000, items: [ { price_id: "price_1Msz82eZvKYlo2C", quantity: 1 }, { price_id: "price_addon_seats_pro", quantity: 5 } ], trial_period_days: 14, coupon_code: "LAUNCH2026", metadata: { referrer: "onboarding_flow", account_manager: "priya.raman" } }, { idempotency_key: "9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d" } ) puts subscription.id`, } const responseSnippets: Record = { '200': `{ "id": "sub_1Om48B2eZvKYlo2CqO8k2", "object": "subscription", "customer": "cus_N63vKZbI8O8yWp", "status": "trialing", "plan": { "id": "plan_pro_monthly", "name": "Pro Tier Monthly", "amount": 4900, "currency": "usd", "interval": "month" }, "items": { "object": "list", "data": [ { "id": "si_98f12a3bc4d5", "price": "price_1Msz82eZvKYlo2C", "quantity": 1 }, { "id": "si_98f12a3bc4d6", "price": "price_addon_seats_pro", "quantity": 5 } ], "total_count": 2 }, "current_period_start": 1717200000, "current_period_end": 1719792000, "trial_start": 1717200000, "trial_end": 1718409600, "cancel_at_period_end": false, "latest_invoice": "in_1Om48B2eZvKYlo2Cj891", "metadata": { "account_manager": "priya.raman", "referrer": "onboarding_flow" }, "created_at": 1717200000 }`, '400': `{ "error": { "type": "invalid_request_error", "code": "parameter_missing", "param": "customer_id", "message": "Missing required param: customer_id. Please provide a valid customer identifier.", "doc_url": "https://api.acme.com/docs/errors#parameter_missing" } }`, '401': `{ "error": { "type": "authentication_error", "code": "invalid_api_key", "message": "Invalid API Key provided: uipkge_live_51Msz... Check your secret key in dashboard.", "doc_url": "https://api.acme.com/docs/errors#authentication" } }`, } export function ApiDocumentationPage({ className }: ApiDocumentationPageProps) { const [selectedLang, setSelectedLang] = React.useState('curl') const [selectedStatus, setSelectedStatus] = React.useState('200') const [copiedEndpoint, setCopiedEndpoint] = React.useState(false) const [copiedRequest, setCopiedRequest] = React.useState(false) const [copiedResponse, setCopiedResponse] = React.useState(false) const endpointUrl = 'https://api.acme.com/v1/customers/subscriptions' const endpointPath = '/v1/customers/subscriptions' const copyEndpoint = React.useCallback(() => { if (typeof navigator !== 'undefined' && navigator.clipboard) { navigator.clipboard.writeText(endpointUrl) setCopiedEndpoint(true) setTimeout(() => { setCopiedEndpoint(false) }, 2000) } }, [endpointUrl]) const copyRequestSnippet = React.useCallback(() => { const code = requestSnippets[selectedLang] if (typeof navigator !== 'undefined' && navigator.clipboard) { navigator.clipboard.writeText(code) setCopiedRequest(true) setTimeout(() => { setCopiedRequest(false) }, 2000) } }, [selectedLang]) const copyResponseSnippet = React.useCallback(() => { const json = responseSnippets[selectedStatus] if (typeof navigator !== 'undefined' && navigator.clipboard) { navigator.clipboard.writeText(json) setCopiedResponse(true) setTimeout(() => { setCopiedResponse(false) }, 2000) } }, [selectedStatus]) return (

{/* Top Reference Navigation Bar */}

Acme Billing API / Subscriptions v2026-03-01

Base: https://api.acme.com/v1

{/* Two-Column Reference Layout */}

{/* Left Main Column: Documentation Prose & Schema Tables (approx 58-60%) */}

{/* Endpoint Section Header */}

POST {endpointPath}

Create a subscription

Creates a new recurring subscription contract for an existing customer account. If a default payment method is attached, initial recurring invoices are calculated and charged upon trial conclusion or cycle anchor date.

{/* Metadata Badges */}

Idempotent: Yes (via Idempotency-Key)

Auth: Bearer Secret Key

Rate Limit: 100 req/min

{/* Request Headers */}

Request Headers

HTTP/1.1 & HTTP/2

Header Type Requirement Description {headersList.map((header) => ( {header.name} {header.type} {header.required ? ( REQUIRED ) : ( optional )}

{header.description}


                            Sample: {header.sample}

))}

{/* Request Body Parameters */}

Request Body Parameters

Provide arguments in a standard JSON payload format.

application/json

Parameter Type Requirement Description & Constraints {bodyParams.map((param) => ( {param.name} {param.type} {param.required ? ( REQUIRED ) : ( optional )}

{param.description}

{param.example && (

Example: {param.example}

)} {/* Nested Schema Rows */} {param.nested?.map((child) => (

{child.name}

{child.type} {child.required ? ( REQUIRED ) : ( optional )}

{child.description}

{child.example && (

Example: {child.example}

)} ))} ))}

{/* Response Schema Attributes */}

Response Object Attributes

Properties returned in the 200 OK HTTP JSON payload representation.

Attribute Type Description Sample Value {responseAttributes.map((attr) => ( {attr.name} {attr.type} {attr.description} {attr.example} ))}

{/* Right Column: Interactive Code & Response Inspector (approx 40-42%, Dark Slate) */}

{/* Request Code Card */}

{/* Language Selector Tabs Header */}

{(['curl', 'node', 'python', 'go', 'ruby'] as const).map((lang) => { const labels: Record = { curl: 'cURL', node: 'Node.js', python: 'Python', go: 'Go', ruby: 'Ruby', } const active = selectedLang === lang return ( ) })}

{/* Subheader Bar */}

Request Example

{selectedLang}

{/* Code Body */}

                  {requestSnippets[selectedLang]}

{/* Response Code Card */}

{/* Response Status Tabs Header */}

Response {statusPills.map((pill) => { const active = selectedStatus === pill.code return ( ) })}

{/* Subheader Status Description */}

{statusPills.find((p) => p.code === selectedStatus)?.summary}

{/* JSON Response Payload */}

                  {responseSnippets[selectedStatus]}

) } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/card.json","https://uipkge.dev/r/react/separator.json","https://uipkge.dev/r/react/table.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/api-documentation-page/ApiDocumentationPage.tsx","content":"$64","type":"registry:page","target":"~/components/blocks/ApiDocumentationPage.tsx"}],"className":"h-[70svh] min-h-80"}]]}]