@blocklet/payment-react-headless 1.26.0

package/es/shared/polling.d.ts

@@ -0,0 +1,15 @@
+import type { CheckoutResult } from '../checkout/types';
+/**
+ * Poll for checkout session completion.
+ * Extracted from react/src/payment/form/index.tsx:72-99
+ *
+ * Uses p-wait-for with 2s interval and 3 minute timeout.
+ * Completion condition: session.status === 'complete' && payment_status in ['paid', 'no_payment_required']
+ * Throws if paymentIntent has last_payment_error.
+ */
+export declare function waitForCheckoutComplete(sessionId: string): Promise<CheckoutResult>;
+/**
+ * Generate unique idempotency key for submit (Final Freeze Architecture).
+ * Format: ${sessionId}-${currencyId}-${timestamp}-${random}
+ */
+export declare function generateIdempotencyKey(sessionId: string, currencyId: string): string;

package/es/shared/polling.js

@@ -0,0 +1,20 @@
+import pWaitFor from "p-wait-for";
+import api, { API } from "./api.js";
+export async function waitForCheckoutComplete(sessionId) {
+  let result;
+  await pWaitFor(
+    async () => {
+      const { data } = await api.get(API.RETRIEVE_SESSION(sessionId));
+      if (data.paymentIntent && data.paymentIntent.status === "requires_action" && data.paymentIntent.last_payment_error) {
+        throw new Error(data.paymentIntent.last_payment_error.message);
+      }
+      result = data;
+      return data.checkoutSession?.status === "complete" && ["paid", "no_payment_required"].includes(data.checkoutSession?.payment_status);
+    },
+    { interval: 2e3, timeout: 3 * 60 * 1e3 }
+  );
+  return result;
+}
+export function generateIdempotencyKey(sessionId, currencyId) {
+  return `${sessionId}-${currencyId}-${Date.now()}-${Math.random().toString(36).substring(2, 10)}`;
+}

package/es/shared/types.d.ts

@@ -0,0 +1,10 @@
+export interface ApiConfig {
+    baseUrl?: string;
+    authToken?: string;
+    locale?: string;
+    livemode?: boolean;
+}
+export interface LoadingState {
+    isLoading: boolean;
+    error: string | null;
+}

package/es/shared/validation.d.ts

@@ -0,0 +1,38 @@
+import type { CheckoutFormData } from '../checkout/types';
+export declare const postalCodePatterns: Record<string, RegExp>;
+export declare function validatePostalCode(postalCode: string, country?: string): boolean;
+export declare function getFieldValidation(fieldName: string, validations?: Record<string, {
+    pattern?: string;
+    pattern_message?: Record<string, string>;
+}>, locale?: string): {
+    pattern?: {
+        value: RegExp;
+        message: string;
+    };
+};
+export declare function validatePhone(phone: string): Promise<boolean>;
+export declare function validateEmail(email: string): boolean;
+export interface ValidateFormOptions {
+    phoneEnabled: boolean;
+    addressMode: 'auto' | 'required' | null;
+    fieldValidation?: Record<string, {
+        pattern?: string;
+        pattern_message?: Record<string, string>;
+    }>;
+    locale?: string;
+}
+export interface FormErrors {
+    customer_name?: string;
+    customer_email?: string;
+    customer_phone?: string;
+    'billing_address.country'?: string;
+    'billing_address.state'?: string;
+    'billing_address.line1'?: string;
+    'billing_address.city'?: string;
+    'billing_address.postal_code'?: string;
+    [key: string]: string | undefined;
+}
+export declare function validateForm(values: CheckoutFormData | null, options: ValidateFormOptions): Promise<{
+    valid: boolean;
+    errors: FormErrors;
+}>;

package/es/shared/validation.js

@@ -0,0 +1,190 @@
+import isEmail from "validator/lib/isEmail";
+const fourDigit = /^\d{4}$/;
+const fiveDigit = /^\d{5}$/;
+const sixDigit = /^\d{6}$/;
+export const postalCodePatterns = {
+  GB: /^GIR[ ]?0AA|((AB|AL|B|BA|BB|BD|BH|BL|BN|BR|BS|BT|CA|CB|CF|CH|CM|CO|CR|CT|CV|CW|DA|DD|DE|DG|DH|DL|DN|DT|DY|E|EC|EH|EN|EX|FK|FY|G|GL|GY|GU|HA|HD|HG|HP|HR|HS|HU|HX|IG|IM|IP|IV|JE|KA|KT|KW|KY|L|LA|LD|LE|LL|LN|LS|LU|M|ME|MK|ML|N|NE|NG|NN|NP|NR|NW|OL|OX|PA|PE|PH|PL|PO|PR|RG|RH|RM|S|SA|SE|SG|SK|SL|SM|SN|SO|SP|SR|SS|ST|SW|SY|TA|TD|TF|TN|TQ|TR|TS|TW|UB|W|WA|WC|WD|WF|WN|WR|WS|WV|YO|ZE)(\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}))|BFPO[ ]?\d{1,4}$/i,
+  JE: /^JE\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
+  GG: /^GY\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
+  IM: /^IM\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
+  US: /^\d{5}([ -]\d{4})?$/,
+  CA: /^[ABCEGHJKLMNPRSTVXY]\d[ABCEGHJ-NPRSTV-Z][ ]?\d[ABCEGHJ-NPRSTV-Z]\d$/i,
+  DE: fiveDigit,
+  JP: /^\d{3}-?\d{4}$/,
+  FR: /^\d{2}[ ]?\d{3}$/,
+  AU: fourDigit,
+  IT: fiveDigit,
+  CH: fourDigit,
+  AT: fourDigit,
+  ES: fiveDigit,
+  NL: /^\d{4}[ ]?[A-Z]{2}$/i,
+  BE: fourDigit,
+  DK: fourDigit,
+  SE: /^\d{3}[ ]?\d{2}$/,
+  NO: fourDigit,
+  BR: /^\d{5}-?\d{3}$/,
+  PT: /^\d{4}(-\d{3})?$/,
+  FI: fiveDigit,
+  KR: fiveDigit,
+  CN: sixDigit,
+  TW: /^\d{3}(\d{2})?$/,
+  SG: sixDigit,
+  IN: /^[1-9]\d{5}$/,
+  RU: sixDigit,
+  PL: /^\d{2}-\d{3}$/,
+  CZ: /^\d{3}[ ]?\d{2}$/,
+  HU: fourDigit,
+  RO: sixDigit,
+  BG: fourDigit,
+  HR: fiveDigit,
+  SK: /^\d{3}[ ]?\d{2}$/,
+  SI: fourDigit,
+  TR: fiveDigit,
+  IL: fiveDigit,
+  ZA: fourDigit,
+  MX: fiveDigit,
+  AR: /^([A-HJ-NP-Z])?\d{4}([A-Z]{3})?$/i,
+  CL: /^\d{7}$/,
+  CO: sixDigit,
+  NZ: fourDigit,
+  MY: fiveDigit,
+  TH: fiveDigit,
+  PH: fourDigit,
+  ID: fiveDigit,
+  VN: sixDigit
+};
+export function validatePostalCode(postalCode, country) {
+  if (!postalCode) return true;
+  try {
+    const countryUpper = country?.toUpperCase();
+    if (!countryUpper) return false;
+    const pattern = postalCodePatterns[countryUpper];
+    return !pattern || pattern.test(postalCode);
+  } catch {
+    return false;
+  }
+}
+export function getFieldValidation(fieldName, validations, locale = "en") {
+  if (!validations || !validations[fieldName]) return {};
+  const fieldValidation = validations[fieldName];
+  const rules = {};
+  if (fieldValidation.pattern) {
+    rules.pattern = {
+      value: new RegExp(fieldValidation.pattern),
+      message: fieldValidation.pattern_message?.[locale] || "Invalid format"
+    };
+  }
+  return rules;
+}
+let phoneUtil = null;
+async function getPhoneUtil() {
+  if (!phoneUtil) {
+    const result = await import("google-libphonenumber");
+    const PhoneNumberUtil = (result.default || result)?.PhoneNumberUtil;
+    if (!PhoneNumberUtil) {
+      throw new Error("PhoneNumberUtil not found");
+    }
+    phoneUtil = PhoneNumberUtil.getInstance();
+  }
+  return phoneUtil;
+}
+const PHONE_REGEX_FALLBACK = /^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,6}$/im;
+export async function validatePhone(phone) {
+  if (!phone || phone.trim() === "") return false;
+  try {
+    const util = await getPhoneUtil();
+    const parsed = util.parseAndKeepRawInput(phone);
+    return util.isValidNumber(parsed);
+  } catch {
+    return PHONE_REGEX_FALLBACK.test(phone);
+  }
+}
+export function validateEmail(email) {
+  if (!email || email.trim() === "") return false;
+  return isEmail(email);
+}
+export async function validateForm(values, options) {
+  const errors = {};
+  const { phoneEnabled, addressMode, fieldValidation, locale = "en" } = options;
+  if (!values) {
+    return { valid: false, errors: { customer_name: "Required" } };
+  }
+  const customerName = values.customer_name;
+  if (!customerName || customerName.trim() === "") {
+    errors.customer_name = "Required";
+  } else {
+    const nameRule = getFieldValidation("customer_name", fieldValidation, locale);
+    if (nameRule.pattern && !nameRule.pattern.value.test(customerName)) {
+      errors.customer_name = nameRule.pattern.message;
+    }
+  }
+  const customerEmail = values.customer_email;
+  if (!customerEmail || !validateEmail(customerEmail)) {
+    errors.customer_email = !customerEmail ? "Required" : "Invalid email";
+  } else {
+    const emailRule = getFieldValidation("customer_email", fieldValidation, locale);
+    if (emailRule.pattern && !emailRule.pattern.value.test(customerEmail)) {
+      errors.customer_email = emailRule.pattern.message;
+    }
+  }
+  if (phoneEnabled) {
+    const customerPhone = values.customer_phone;
+    if (!customerPhone || customerPhone.trim() === "") {
+      errors.customer_phone = "Required";
+    } else if (!await validatePhone(customerPhone)) {
+      errors.customer_phone = "Invalid phone number";
+    } else {
+      const phoneRule = getFieldValidation("customer_phone", fieldValidation, locale);
+      if (phoneRule.pattern && !phoneRule.pattern.value.test(customerPhone)) {
+        errors.customer_phone = phoneRule.pattern.message;
+      }
+    }
+  }
+  const billingAddress = values.billing_address;
+  const postalCode = billingAddress?.postal_code;
+  const country = billingAddress?.country;
+  const state = billingAddress?.state;
+  const line1 = billingAddress?.line1;
+  const city = billingAddress?.city;
+  if (!postalCode) {
+    errors["billing_address.postal_code"] = "Required";
+  } else if (!validatePostalCode(postalCode, country)) {
+    errors["billing_address.postal_code"] = "Invalid postal code";
+  } else {
+    const postalRule = getFieldValidation("billing_address.postal_code", fieldValidation, locale);
+    if (postalRule.pattern && !postalRule.pattern.value.test(postalCode)) {
+      errors["billing_address.postal_code"] = postalRule.pattern.message;
+    }
+  }
+  if (!state) {
+    errors["billing_address.state"] = "Required";
+  } else {
+    const stateRule = getFieldValidation("billing_address.state", fieldValidation, locale);
+    if (stateRule.pattern && !stateRule.pattern.value.test(state)) {
+      errors["billing_address.state"] = stateRule.pattern.message;
+    }
+  }
+  if (addressMode === "required") {
+    if (!country) errors["billing_address.country"] = "Required";
+    if (!line1) {
+      errors["billing_address.line1"] = "Required";
+    } else {
+      const line1Rule = getFieldValidation("billing_address.line1", fieldValidation, locale);
+      if (line1Rule.pattern && !line1Rule.pattern.value.test(line1)) {
+        errors["billing_address.line1"] = line1Rule.pattern.message;
+      }
+    }
+    if (!city) {
+      errors["billing_address.city"] = "Required";
+    } else {
+      const cityRule = getFieldValidation("billing_address.city", fieldValidation, locale);
+      if (cityRule.pattern && !cityRule.pattern.value.test(city)) {
+        errors["billing_address.city"] = cityRule.pattern.message;
+      }
+    }
+  }
+  return {
+    valid: Object.keys(errors).length === 0,
+    errors
+  };
+}

package/es/types/checkout-augmented.d.ts

@@ -0,0 +1,42 @@
+import type { TCheckoutSessionExpanded, TPrice, TPriceExpanded } from '@blocklet/payment-types';
+export interface CheckoutSessionUser {
+    did?: string;
+    sourceAppPid?: string;
+    connectedAccounts?: Array<{
+        provider: string;
+    }>;
+    extraConfigs?: {
+        connectedAccounts?: Array<{
+            provider: string;
+        }>;
+    };
+}
+export type CheckoutSessionRuntime = TCheckoutSessionExpanded & {
+    user?: CheckoutSessionUser;
+    quote_locked_at?: number;
+};
+export type PriceWithCrossSell = TPriceExpanded & {
+    cross_sell?: {
+        cross_sells_to?: TPrice;
+        cross_sells_to_id?: string;
+    };
+};
+export interface UpsellExpanded {
+    upsells_to_id?: string;
+    upsells_to?: TPrice;
+}
+/**
+ * Get human-readable message from unknown error.
+ * Works for standard Error, AxiosError, and string errors.
+ */
+export declare function getErrorMessage(err: unknown): string;
+/**
+ * Extract API error details from an unknown axios-like error.
+ * Returns message, error code, and raw response data.
+ */
+export declare function getAxiosErrorDetails(err: unknown): {
+    message: string;
+    code: string | undefined;
+    data: Record<string, unknown> | undefined;
+    isCancelled: boolean;
+};

package/es/types/checkout-augmented.js

@@ -0,0 +1,17 @@
+export function getErrorMessage(err) {
+  const axErr = err;
+  if (axErr?.response?.data?.error) return axErr.response.data.error;
+  if (err instanceof Error) return err.message;
+  if (typeof err === "string") return err;
+  return axErr?.message || "Unknown error";
+}
+export function getAxiosErrorDetails(err) {
+  const axErr = err;
+  const data = axErr?.response?.data;
+  return {
+    message: data?.error || axErr?.message || "Unknown error",
+    code: data?.code,
+    data,
+    isCancelled: axErr?.name === "CanceledError" || axErr?.name === "AbortError"
+  };
+}

package/es/types/external.d.ts

@@ -0,0 +1,18 @@
+declare module 'google-libphonenumber' {
+  export class PhoneNumberUtil {
+    static getInstance(): PhoneNumberUtil;
+    parseAndKeepRawInput(numberToParse: string, defaultRegion?: string): any;
+    isValidNumber(number: any): boolean;
+  }
+}
+
+declare module '@arcblock/ws' {
+  export class WsClient {
+    constructor(url: string, options?: Record<string, any>);
+    connect(): void;
+    disconnect(): void;
+    isConnected(): boolean;
+    subscribe(channel: string): any;
+    unsubscribe(channel: string): void;
+  }
+}

package/examples/01-basic-checkout.tsx

@@ -0,0 +1,159 @@
+/* eslint-disable react/button-has-type */
+/**
+ * Basic Checkout — minimal integration using CheckoutProvider + feature hooks.
+ *
+ * This is how payment-react's CheckoutV2 component uses the headless package internally.
+ * The CheckoutProvider sets up layered contexts (session → payment method → exchange rate →
+ * customer form → submit), and feature hooks consume them.
+ *
+ * Usage:
+ *   <CheckoutProvider sessionId="cs_xxx">
+ *     <MyCheckoutUI />
+ *   </CheckoutProvider>
+ */
+import {
+  CheckoutProvider,
+  useSessionContext,
+  usePaymentMethodContext,
+  usePricingFeature,
+  useCustomerFormFeature,
+  useSubmitFeature,
+  useLineItems,
+  useProduct,
+} from '../src';
+
+function CheckoutUI() {
+  const { isLoading, error } = useSessionContext();
+  const { product } = useProduct();
+  const lineItems = useLineItems();
+  const { currency, currencies, setCurrency, types, setType } = usePaymentMethodContext();
+  const pricing = usePricingFeature();
+  const form = useCustomerFormFeature();
+  const submit = useSubmitFeature();
+
+  if (isLoading || !product) return <div>Loading...</div>;
+  if (error) return <div>Error: {error}</div>;
+
+  return (
+    <div style={{ display: 'flex', gap: 32 }}>
+      {/* Left: Product info */}
+      <div style={{ flex: 1 }}>
+        <h2>{product.name}</h2>
+        <p>{product.description}</p>
+        {product.features.length > 0 && (
+          <ul>
+            {product.features.map((f: { name: string }) => (
+              <li key={f.name}>{f.name}</li>
+            ))}
+          </ul>
+        )}
+
+        {/* Line items */}
+        {lineItems.items.map((item) => {
+          const price = (item as any).upsell_price || item.price;
+          return (
+            <div key={item.id}>
+              <span>{price?.product?.name}</span>
+              <span> × {item.quantity}</span>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Right: Payment */}
+      <div style={{ flex: 1 }}>
+        {/* Payment method tabs */}
+        {types.length > 1 &&
+          types.map((t) => (
+            <button key={t.type} onClick={() => setType(t.type)} style={{ fontWeight: t.active ? 'bold' : 'normal' }}>
+              {t.label}
+            </button>
+          ))}
+
+        {/* Currency selector */}
+        {currencies.length > 1 && (
+          <select value={currency?.id || ''} onChange={(e) => setCurrency(e.target.value)}>
+            {currencies.map((c) => (
+              <option key={c.id} value={c.id}>
+                {c.symbol}
+              </option>
+            ))}
+          </select>
+        )}
+
+        {/* Customer form */}
+        {form.fields.map((f) => {
+          const inputId = `customer-field-${String(f.name).replace(/[^a-zA-Z0-9\-_:.]/g, '-')}`;
+          const hasError = Boolean(form.touched[f.name] && form.errors[f.name]);
+
+          return (
+            <div key={f.name}>
+              <label htmlFor={inputId}>
+                {f.name}
+                {f.required ? ' *' : ''}
+              </label>
+              <input
+                id={inputId}
+                name={f.name}
+                type={f.type === 'email' ? 'email' : 'text'}
+                value={String((form.values as any)[f.name] || '')}
+                aria-invalid={hasError}
+                onChange={(e) => form.onChange(f.name, e.target.value)}
+              />
+              {hasError && <span style={{ color: 'red' }}>{form.errors[f.name]}</span>}
+            </div>
+          );
+        })}
+
+        {/* Pricing summary */}
+        <div>
+          <p>Subtotal: {pricing.subtotal}</p>
+          {pricing.discount && <p>Discount: -{pricing.discount}</p>}
+          {pricing.tax && (
+            <p>
+              Tax ({pricing.tax.rate}%): {pricing.tax.amount}
+            </p>
+          )}
+          {pricing.trial.active && <p>Trial: {pricing.trial.days} days free</p>}
+          <p>
+            <strong>Total: {pricing.total}</strong>
+          </p>
+          {pricing.usdEquivalent && <p>≈ {pricing.usdEquivalent}</p>}
+        </div>
+
+        {/* Submit */}
+        <button onClick={submit.execute} disabled={submit.status === 'submitting'}>
+          {submit.status === 'submitting' ? 'Processing...' : `Pay ${pricing.total}`}
+        </button>
+
+        {/* Status feedback */}
+        {submit.status === 'confirming_fast_pay' && submit.context?.type === 'fast_pay' && (
+          <div>
+            <p>
+              Confirm: {submit.context.amount} via {submit.context.payType}
+            </p>
+            <button onClick={submit.confirm}>Confirm</button>
+            <button onClick={submit.cancel}>Cancel</button>
+          </div>
+        )}
+        {submit.status === 'waiting_did' && <p>Confirm in DID Wallet...</p>}
+        {submit.status === 'waiting_stripe' && <p>Complete card payment...</p>}
+        {submit.status === 'completed' && <p>Payment successful!</p>}
+        {submit.status === 'failed' && submit.context?.type === 'error' && (
+          <p style={{ color: 'red' }}>
+            {submit.context.message} <button onClick={submit.retry}>Retry</button>
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** Wrap with CheckoutProvider — this is the entry point */
+export function BasicCheckout({ sessionId }: { sessionId: string }) {
+  return (
+    <CheckoutProvider sessionId={sessionId}>
+      <CheckoutUI />
+    </CheckoutProvider>
+  );
+}

package/examples/01-credit-recharge.tsx

@@ -0,0 +1,19 @@
+// Scenario 1: Credit Recharge (< 20 lines)
+import React from 'react';
+import { useCheckout } from '../src';
+
+export function CreditRecharge({ sessionId }: { sessionId: string }) {
+  const { product, pricing, submit, canSubmit } = useCheckout(sessionId);
+  if (!product) return <div>Loading...</div>;
+  return (
+    <div>
+      <h2>{product.name}</h2>
+      <p>Total: {pricing.total}{pricing.usdEquivalent && ` (${pricing.usdEquivalent})`}</p>
+      <button onClick={submit.execute} disabled={!canSubmit}>
+        {submit.status === 'submitting' ? 'Processing...' : 'Pay'}
+      </button>
+      {submit.status === 'completed' && <p>Success!</p>}
+      {submit.context?.type === 'error' && <p>{submit.context.message}</p>}
+    </div>
+  );
+}

package/examples/02-subscription.tsx

@@ -0,0 +1,40 @@
+// Scenario 2: Subscription Purchase (< 50 lines)
+import React from 'react';
+import { useCheckout } from '../src';
+
+export function SubscriptionCheckout({ sessionId }: { sessionId: string }) {
+  const { product, pricing, form, submit, lineItems, canSubmit, isLoading } = useCheckout(sessionId);
+  if (isLoading || !product) return <div>Loading...</div>;
+
+  return (
+    <div>
+      <h2>{product.name}</h2>
+      <p>{product.description}</p>
+      <ul>{product.features.map((f) => <li key={f.name}>{f.name}</li>)}</ul>
+
+      {lineItems.billingInterval && lineItems.billingInterval.available.map((opt) => (
+        <button key={opt.interval} onClick={() => lineItems.billingInterval!.switch(opt.interval)}>
+          {opt.interval === 'year' ? 'Annual' : 'Monthly'}
+        </button>
+      ))}
+
+      {pricing.trial.active && <p>Free trial: {pricing.trial.days} days</p>}
+
+      {form.fields.filter((f) => f.group !== 'address').map((field) => (
+        <input key={field.name} placeholder={field.name}
+          value={String((form.values as any)[field.name] || '')}
+          onChange={(e) => form.onChange(field.name, e.target.value)} />
+      ))}
+      {Object.entries(form.errors).map(([k, v]) => <p key={k} style={{ color: 'red' }}>{v}</p>)}
+
+      <p>Total: {pricing.total}</p>
+      {pricing.trial.active && <p>After trial: {pricing.trial.afterTrialPrice}/{product.billing.displayInterval}</p>}
+
+      <button onClick={submit.execute} disabled={!canSubmit}>
+        {submit.status === 'submitting' ? 'Processing...' : `Subscribe ${product.billing.displayInterval}`}
+      </button>
+      {submit.status === 'waiting_stripe' && <p>Complete payment with card...</p>}
+      {submit.status === 'completed' && <p>Subscribed!</p>}
+    </div>
+  );
+}

package/examples/03-upsell.tsx

@@ -0,0 +1,60 @@
+// Scenario 3: Upsell (< 60 lines)
+import React from 'react';
+import { useCheckout } from '../src';
+
+export function UpsellCheckout({ sessionId }: { sessionId: string }) {
+  const { product, pricing, lineItems, submit, canSubmit, isLoading } = useCheckout(sessionId);
+
+  if (isLoading || !product) return <div>Loading...</div>;
+
+  return (
+    <div>
+      <h2>{product.name}</h2>
+
+      {/* Line items with upsell */}
+      {lineItems.items.map((item) => {
+        const price = item.upsell_price || item.price;
+        const upsellTarget = (item.price as any)?.upsell?.upsells_to;
+
+        return (
+          <div key={item.id}>
+            <span>{price?.product?.name}</span>
+            <span> - {price?.unit_amount}</span>
+
+            {/* Show upsell toggle if not yet upselled */}
+            {!item.upsell_price_id && upsellTarget && (
+              <button onClick={() => lineItems.upsell(item.price_id, (item.price as any).upsell.upsells_to_id)}>
+                Upgrade to {upsellTarget.recurring?.interval === 'year' ? 'Annual' : 'Premium'}
+              </button>
+            )}
+
+            {/* Show downsell if currently upselled */}
+            {item.upsell_price_id && (
+              <button onClick={() => lineItems.downsell(item.upsell_price_id!)}>
+                Revert to original
+              </button>
+            )}
+
+            {/* Quantity adjust */}
+            {(item as any).adjustable_quantity?.enabled && (
+              <span>
+                <button onClick={() => lineItems.updateQuantity(item.id, item.quantity - 1)}>-</button>
+                <span>{item.quantity}</span>
+                <button onClick={() => lineItems.updateQuantity(item.id, item.quantity + 1)}>+</button>
+              </span>
+            )}
+          </div>
+        );
+      })}
+
+      <p>Total: {pricing.total}</p>
+      {pricing.discount && <p>Discount: -{pricing.discount}</p>}
+
+      <button onClick={submit.execute} disabled={!canSubmit}>
+        {submit.status === 'submitting' ? 'Processing...' : 'Pay'}
+      </button>
+      {submit.status === 'completed' && <p>Done!</p>}
+      {submit.context?.type === 'error' && <p style={{ color: 'red' }}>{submit.context.message}</p>}
+    </div>
+  );
+}