@b3dotfun/sdk 0.1.66 → 0.1.68

package/src/anyspend/react/components/checkout/AnySpendCheckoutTrigger.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import { useTokenData } from "@b3dotfun/sdk/global-account/react";
+import { formatTokenAmount, safeBigInt } from "@b3dotfun/sdk/shared/utils/number";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { type ReactNode, useMemo } from "react";
+import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper";
+import type { AnySpendCheckoutClasses } from "../types/classes";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "../types/customization";
+import { AnySpendCustomizationProvider } from "../context/AnySpendCustomizationContext";
+import type { CheckoutItem, CheckoutSummaryLine } from "./AnySpendCheckout";
+import { CheckoutCartPanel } from "./CheckoutCartPanel";
+import { CheckoutPaymentPanel, type PaymentMethod } from "./CheckoutPaymentPanel";
+import { PoweredByBranding } from "./PoweredByBranding";
+
+export interface AnySpendCheckoutTriggerProps {
+  /** Payment recipient address (hex) */
+  recipientAddress: string;
+  /** Destination token address */
+  destinationTokenAddress: string;
+  /** Destination chain ID */
+  destinationTokenChainId: number;
+  /** Line items to display in the cart (optional — if omitted, only the payment panel is shown) */
+  items?: CheckoutItem[];
+  /** Total amount in wei — required when items are not provided */
+  totalAmount?: string;
+  /** Organization name */
+  organizationName?: string;
+  /** Organization logo URL */
+  organizationLogo?: string;
+  /** Theme color (hex) */
+  themeColor?: string;
+  /** Custom button text */
+  buttonText?: string;
+  /** Workflow ID to trigger on payment */
+  workflowId?: string;
+  /** Organization ID that owns the workflow */
+  orgId?: string;
+  /** Optional callback metadata merged into the order */
+  callbackMetadata?: {
+    /** Passed as trigger result inputs — accessible via {{root.result.inputs.*}} */
+    inputs?: Record<string, unknown>;
+  } & Record<string, unknown>;
+  /** Called on successful payment */
+  onSuccess?: (result: { txHash?: string; orderId?: string }) => void;
+  /** Called on payment error */
+  onError?: (error: Error) => void;
+  /** URL to redirect to after payment */
+  returnUrl?: string;
+  /** Label for the return button */
+  returnLabel?: string;
+  /** Custom class names */
+  classes?: AnySpendCheckoutClasses;
+  /** Display mode — set automatically when used inside B3DynamicModal */
+  mode?: "modal" | "page";
+  /** Custom footer for the order summary. Pass `null` to hide, or a ReactNode to replace the default. */
+  footer?: ReactNode | null;
+  /** Which payment method to expand initially. Defaults to none (all collapsed). */
+  defaultPaymentMethod?: PaymentMethod;
+  /** Optional sender (payer) address — pre-fills token balances in the crypto panel */
+  senderAddress?: string;
+  /** Render function overrides for replaceable UI elements */
+  slots?: AnySpendSlots;
+  /** String or ReactNode overrides for text/messages */
+  content?: AnySpendContent;
+  /** Structured color/theme configuration */
+  theme?: AnySpendTheme;
+  /** Shipping cost. String = amount in wei. Object = amount + custom label. */
+  shipping?: string | { amount: string; label?: string };
+  /** Tax amount. String = amount in wei. Object = amount + custom label + optional rate display. */
+  tax?: string | { amount: string; label?: string; rate?: string };
+  /** Discount amount (displayed as negative). String = amount in wei. Object = amount + label + optional code. */
+  discount?: string | { amount: string; label?: string; code?: string };
+  /** Additional summary line items (fees, tips, etc.) */
+  summaryLines?: CheckoutSummaryLine[];
+}
+
+export function AnySpendCheckoutTrigger({
+  recipientAddress,
+  destinationTokenAddress,
+  destinationTokenChainId,
+  items,
+  totalAmount: totalAmountOverride,
+  organizationName,
+  organizationLogo,
+  themeColor,
+  buttonText = "Pay",
+  workflowId,
+  orgId,
+  callbackMetadata,
+  onSuccess,
+  onError,
+  returnUrl,
+  returnLabel,
+  classes,
+  footer,
+  defaultPaymentMethod,
+  senderAddress,
+  slots,
+  content,
+  theme,
+  shipping,
+  tax,
+  discount,
+  summaryLines,
+}: AnySpendCheckoutTriggerProps) {
+  // Merge workflowId + orgId into callbackMetadata
+  const mergedMetadata = useMemo(() => {
+    if (!workflowId && !orgId && !callbackMetadata) return undefined;
+    return {
+      ...(workflowId ? { workflowId } : {}),
+      ...(orgId ? { orgId } : {}),
+      ...callbackMetadata,
+    };
+  }, [workflowId, orgId, callbackMetadata]);
+
+  // Compute total from items + adjustments or use override
+  const computedTotal = useMemo(() => {
+    if (totalAmountOverride) return totalAmountOverride;
+    if (!items || items.length === 0) return "0";
+    let total = BigInt(0);
+    for (const item of items) {
+      total += safeBigInt(item.amount) * BigInt(item.quantity);
+    }
+    const shippingAmt = typeof shipping === "string" ? shipping : shipping?.amount;
+    if (shippingAmt) total += safeBigInt(shippingAmt);
+    const taxAmt = typeof tax === "string" ? tax : tax?.amount;
+    if (taxAmt) total += safeBigInt(taxAmt);
+    const discountAmt = typeof discount === "string" ? discount : discount?.amount;
+    if (discountAmt) total -= safeBigInt(discountAmt);
+    if (summaryLines) {
+      for (const line of summaryLines) total += safeBigInt(line.amount);
+    }
+    if (total < BigInt(0)) total = BigInt(0);
+    return total.toString();
+  }, [items, totalAmountOverride, shipping, tax, discount, summaryLines]);
+
+  // Get destination token metadata
+  const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
+  const tokenSymbol = tokenData?.symbol || "";
+  const tokenDecimals = tokenData?.decimals || 18;
+
+  const formattedTotal = useMemo(
+    () => formatTokenAmount(BigInt(computedTotal || "0"), tokenDecimals),
+    [computedTotal, tokenDecimals],
+  );
+
+  const hasItems = items && items.length > 0;
+  const fingerprint = getFingerprintConfig();
+
+  return (
+    <AnySpendFingerprintWrapper fingerprint={fingerprint}>
+      <AnySpendCustomizationProvider slots={slots} content={content} theme={theme}>
+        <div className="anyspend-checkout-trigger flex flex-col">
+          {/* Cart summary with items */}
+          {hasItems && (
+            <div className="border-b border-gray-200 p-5 dark:border-neutral-700">
+              <CheckoutCartPanel
+                items={items}
+                totalAmount={computedTotal}
+                tokenSymbol={tokenSymbol}
+                tokenDecimals={tokenDecimals}
+                organizationName={organizationName}
+                organizationLogo={organizationLogo}
+                classes={classes}
+                footer={footer}
+                shipping={typeof shipping === "string" ? { amount: shipping } : shipping}
+                tax={typeof tax === "string" ? { amount: tax } : tax}
+                discount={typeof discount === "string" ? { amount: discount } : discount}
+                summaryLines={summaryLines}
+              />
+            </div>
+          )}
+
+          {/* Total-only header when no items */}
+          {!hasItems && (
+            <div className="border-b border-gray-200 p-5 dark:border-neutral-700">
+              <div className="flex flex-col gap-3">
+                <div className={cn("flex items-center justify-between", classes?.cartSummary)}>
+                  <span className="text-base font-semibold text-gray-900 dark:text-gray-100">Total</span>
+                  <span className={cn("text-base font-semibold text-gray-900 dark:text-gray-100", classes?.cartTotal)}>
+                    {formattedTotal} {tokenSymbol}
+                  </span>
+                </div>
+                {footer === undefined ? (
+                  <PoweredByBranding
+                    organizationName={organizationName}
+                    organizationLogo={organizationLogo}
+                    classes={classes}
+                  />
+                ) : (
+                  footer
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Payment methods */}
+          <div className="px-2 py-3">
+            <CheckoutPaymentPanel
+              recipientAddress={recipientAddress}
+              destinationTokenAddress={destinationTokenAddress}
+              destinationTokenChainId={destinationTokenChainId}
+              totalAmount={computedTotal}
+              buttonText={buttonText}
+              themeColor={themeColor}
+              returnUrl={returnUrl}
+              returnLabel={returnLabel}
+              onSuccess={onSuccess}
+              onError={onError}
+              callbackMetadata={mergedMetadata}
+              classes={classes}
+              defaultPaymentMethod={defaultPaymentMethod}
+              senderAddress={senderAddress}
+            />
+          </div>
+        </div>
+      </AnySpendCustomizationProvider>
+    </AnySpendFingerprintWrapper>
+  );
+}

package/src/anyspend/react/components/checkout/CartItemRow.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import type { CheckoutItem, AnySpendCheckoutClasses } from "./AnySpendCheckout";
+
+interface CartItemRowProps {
+  item: CheckoutItem;
+  formattedPrice: string;
+  classes?: AnySpendCheckoutClasses;
+}
+
+export function CartItemRow({ item, formattedPrice, classes }: CartItemRowProps) {
+  return (
+    <div className={cn("flex items-start gap-3 py-3", classes?.cartItemRow)}>
+      {item.imageUrl && (
+        <div className={cn("h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-gray-100", classes?.cartItemImage)}>
+          <img src={item.imageUrl} alt={item.name} className="h-full w-full object-cover" />
+        </div>
+      )}
+      <div className="flex min-w-0 flex-1 items-start justify-between">
+        <div className="min-w-0 flex-1">
+          <p className={cn("text-sm font-medium text-gray-900 dark:text-gray-100", classes?.cartItemName)}>
+            {item.name}
+          </p>
+          {item.description && (
+            <p
+              className={cn(
+                "mt-0.5 line-clamp-2 text-xs text-gray-500 dark:text-gray-400",
+                classes?.cartItemDescription,
+              )}
+            >
+              {item.description}
+            </p>
+          )}
+          {item.quantity > 1 && <p className="mt-0.5 text-xs text-gray-400 dark:text-gray-500">Qty: {item.quantity}</p>}
+          {item.metadata && Object.keys(item.metadata).length > 0 && (
+            <div className={cn("mt-1 flex flex-wrap gap-x-3 gap-y-0.5", classes?.cartItemMetadata)}>
+              {Object.entries(item.metadata).map(([key, value]) => (
+                <span
+                  key={key}
+                  className={cn("text-xs text-gray-400 dark:text-gray-500", classes?.cartItemMetadataLabel)}
+                >
+                  {key}:{" "}
+                  <span className={cn("text-gray-600 dark:text-gray-300", classes?.cartItemMetadataValue)}>
+                    {value}
+                  </span>
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+        <p className={cn("ml-3 text-sm font-medium text-gray-900 dark:text-gray-100", classes?.cartItemPrice)}>
+          {formattedPrice}
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/anyspend/react/components/checkout/CartSummary.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { formatTokenAmount, safeBigInt } from "@b3dotfun/sdk/shared/utils/number";
+import { useMemo } from "react";
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+import type { CheckoutSummaryLine } from "./AnySpendCheckout";
+
+interface CartSummaryProps {
+  /** Formatted total (final amount after all adjustments) */
+  total: string;
+  tokenSymbol?: string;
+  classes?: AnySpendCheckoutClasses;
+  /** Formatted subtotal (sum of items only — shown when adjustments exist) */
+  subtotal?: string;
+  tokenDecimals?: number;
+  shipping?: { amount: string; label?: string };
+  tax?: { amount: string; label?: string; rate?: string };
+  discount?: { amount: string; label?: string; code?: string };
+  summaryLines?: CheckoutSummaryLine[];
+  /** Formatted USD equivalent (e.g. "$5.56") — shown for non-stablecoin tokens */
+  usdEquivalent?: string | null;
+}
+
+export function CartSummary({
+  total,
+  tokenSymbol,
+  classes,
+  subtotal,
+  tokenDecimals = 18,
+  shipping,
+  tax,
+  discount,
+  summaryLines,
+  usdEquivalent,
+}: CartSummaryProps) {
+  const hasAdjustments =
+    !!shipping?.amount || !!tax?.amount || !!discount?.amount || (summaryLines && summaryLines.length > 0);
+
+  const formattedShipping = useMemo(
+    () => (shipping?.amount ? formatTokenAmount(safeBigInt(shipping.amount), tokenDecimals) : null),
+    [shipping?.amount, tokenDecimals],
+  );
+
+  const formattedTax = useMemo(
+    () => (tax?.amount ? formatTokenAmount(safeBigInt(tax.amount), tokenDecimals) : null),
+    [tax?.amount, tokenDecimals],
+  );
+
+  const formattedDiscount = useMemo(
+    () => (discount?.amount ? formatTokenAmount(safeBigInt(discount.amount), tokenDecimals) : null),
+    [discount?.amount, tokenDecimals],
+  );
+
+  const formattedSummaryLines = useMemo(
+    () =>
+      summaryLines?.map(line => ({
+        ...line,
+        formattedAmount: formatTokenAmount(safeBigInt(line.amount), tokenDecimals),
+        isNegative: safeBigInt(line.amount) < BigInt(0),
+      })),
+    [summaryLines, tokenDecimals],
+  );
+
+  return (
+    <div className={cn("border-t border-gray-200 pt-3 dark:border-neutral-700", classes?.cartSummary)}>
+      {/* Subtotal — only shown when adjustments exist */}
+      {hasAdjustments && subtotal && (
+        <div className={cn("flex items-center justify-between py-1", classes?.cartSubtotal)}>
+          <span className="text-sm text-gray-500 dark:text-gray-400">Subtotal</span>
+          <span className="text-sm text-gray-500 dark:text-gray-400">
+            {subtotal} {tokenSymbol}
+          </span>
+        </div>
+      )}
+
+      {/* Shipping */}
+      {formattedShipping && (
+        <div className={cn("flex items-center justify-between py-1", classes?.cartSummaryLine)}>
+          <span className={cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel)}>
+            {shipping?.label || "Shipping"}
+          </span>
+          <span className={cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount)}>
+            {formattedShipping} {tokenSymbol}
+          </span>
+        </div>
+      )}
+
+      {/* Tax */}
+      {formattedTax && (
+        <div className={cn("flex items-center justify-between py-1", classes?.cartSummaryLine)}>
+          <span className={cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel)}>
+            {tax?.label || "Tax"}
+            {tax?.rate && <span className="ml-1 text-xs text-gray-400 dark:text-gray-500">({tax.rate})</span>}
+          </span>
+          <span className={cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount)}>
+            {formattedTax} {tokenSymbol}
+          </span>
+        </div>
+      )}
+
+      {/* Discount */}
+      {formattedDiscount && (
+        <div className={cn("flex items-center justify-between py-1", classes?.cartDiscount)}>
+          <span className="text-sm text-gray-500 dark:text-gray-400">
+            {discount?.label || "Discount"}
+            {discount?.code && (
+              <span className="ml-1 rounded bg-green-50 px-1.5 py-0.5 text-xs font-medium text-green-600 dark:bg-green-900/20 dark:text-green-400">
+                {discount.code}
+              </span>
+            )}
+          </span>
+          <span className="text-sm font-medium text-green-600 dark:text-green-400">
+            -{formattedDiscount} {tokenSymbol}
+          </span>
+        </div>
+      )}
+
+      {/* Custom summary lines */}
+      {formattedSummaryLines?.map(line => (
+        <div key={line.label} className={cn("flex items-center justify-between py-1", classes?.cartSummaryLine)}>
+          <span className={cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel)}>
+            {line.label}
+            {line.description && (
+              <span className="ml-1 text-xs text-gray-400 dark:text-gray-500">({line.description})</span>
+            )}
+          </span>
+          <span
+            className={cn(
+              "text-sm",
+              line.isNegative ? "font-medium text-green-600 dark:text-green-400" : "text-gray-500 dark:text-gray-400",
+              classes?.cartSummaryLineAmount,
+            )}
+          >
+            {line.formattedAmount} {tokenSymbol}
+          </span>
+        </div>
+      ))}
+
+      {/* Total — always shown, separator when adjustments exist */}
+      <div
+        className={cn("flex flex-col", hasAdjustments && "mt-1 border-t border-gray-100 pt-2 dark:border-neutral-800")}
+      >
+        <div className="flex items-center justify-between">
+          <span className="text-base font-semibold text-gray-900 dark:text-gray-100">Total</span>
+          <span className={cn("text-base font-semibold text-gray-900 dark:text-gray-100", classes?.cartTotal)}>
+            {total} {tokenSymbol}
+          </span>
+        </div>
+        {usdEquivalent && (
+          <div className="flex justify-end">
+            <span className="text-xs text-gray-400 dark:text-gray-500">~{usdEquivalent} USD</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/anyspend/react/components/checkout/CheckoutCartPanel.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { formatTokenAmount, safeBigInt } from "@b3dotfun/sdk/shared/utils/number";
+import { type ReactNode, useMemo } from "react";
+import type { CheckoutItem, CheckoutSummaryLine, AnySpendCheckoutClasses } from "./AnySpendCheckout";
+import { CartItemRow } from "./CartItemRow";
+import { CartSummary } from "./CartSummary";
+import { PoweredByBranding } from "./PoweredByBranding";
+
+interface CheckoutCartPanelProps {
+  items: CheckoutItem[];
+  totalAmount: string;
+  tokenSymbol?: string;
+  tokenDecimals?: number;
+  organizationName?: string;
+  organizationLogo?: string;
+  classes?: AnySpendCheckoutClasses;
+  /** Custom footer. Pass `null` to hide, or a ReactNode to replace the default PoweredByBranding. */
+  footer?: ReactNode | null;
+  shipping?: { amount: string; label?: string };
+  tax?: { amount: string; label?: string; rate?: string };
+  discount?: { amount: string; label?: string; code?: string };
+  summaryLines?: CheckoutSummaryLine[];
+  /** Formatted USD equivalent (e.g. "$5.56") — shown for non-stablecoin tokens */
+  usdEquivalent?: string | null;
+}
+
+export function CheckoutCartPanel({
+  items,
+  totalAmount,
+  tokenSymbol = "",
+  tokenDecimals = 18,
+  organizationName,
+  organizationLogo,
+  classes,
+  footer,
+  shipping,
+  tax,
+  discount,
+  summaryLines,
+  usdEquivalent,
+}: CheckoutCartPanelProps) {
+  const formattedTotal = useMemo(
+    () => formatTokenAmount(safeBigInt(totalAmount), tokenDecimals),
+    [totalAmount, tokenDecimals],
+  );
+
+  // Compute subtotal from items only (before adjustments)
+  const formattedSubtotal = useMemo(() => {
+    let subtotal = BigInt(0);
+    for (const item of items) {
+      subtotal += safeBigInt(item.amount) * BigInt(item.quantity);
+    }
+    return formatTokenAmount(subtotal, tokenDecimals);
+  }, [items, tokenDecimals]);
+
+  return (
+    <div className={cn("anyspend-cart-panel flex flex-col", classes?.cartPanel)}>
+      <h2
+        className={cn(
+          "anyspend-cart-title mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100",
+          classes?.cartTitle,
+        )}
+      >
+        Order Summary
+      </h2>
+
+      <div className="anyspend-cart-items divide-y divide-gray-100 dark:divide-gray-800">
+        {items.map((item, index) => {
+          const itemTotal = safeBigInt(item.amount) * BigInt(item.quantity);
+          const formattedPrice = `${formatTokenAmount(itemTotal, tokenDecimals)} ${tokenSymbol}`;
+
+          return <CartItemRow key={item.id || index} item={item} formattedPrice={formattedPrice} classes={classes} />;
+        })}
+      </div>
+
+      <CartSummary
+        total={formattedTotal}
+        tokenSymbol={tokenSymbol}
+        classes={classes}
+        subtotal={formattedSubtotal}
+        tokenDecimals={tokenDecimals}
+        shipping={shipping}
+        tax={tax}
+        discount={discount}
+        summaryLines={summaryLines}
+        usdEquivalent={usdEquivalent}
+      />
+
+      {footer === undefined ? (
+        <PoweredByBranding organizationName={organizationName} organizationLogo={organizationLogo} classes={classes} />
+      ) : (
+        footer
+      )}
+    </div>
+  );
+}

package/src/anyspend/react/components/checkout/CheckoutFormField.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import type { CheckoutFormField as FormFieldType } from "../../../types/forms";
+
+interface CheckoutFormFieldProps {
+  field: FormFieldType;
+  value: unknown;
+  onChange: (id: string, value: unknown) => void;
+  error?: string;
+  className?: string;
+}
+
+const inputBaseClass =
+  "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 outline-none transition-colors focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-blue-400";
+
+const labelClass = "mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300";
+
+export function CheckoutFormFieldComponent({ field, value, onChange, error, className }: CheckoutFormFieldProps) {
+  const handleChange = (val: unknown) => {
+    onChange(field.id, val);
+  };
+
+  const renderField = () => {
+    switch (field.type) {
+      case "text":
+      case "email":
+      case "phone":
+      case "number":
+        return (
+          <input
+            type={field.type === "phone" ? "tel" : field.type}
+            value={(value as string) || ""}
+            onChange={e => handleChange(e.target.value)}
+            placeholder={field.placeholder}
+            required={field.required}
+            className={cn(
+              "anyspend-form-input",
+              inputBaseClass,
+              error && "border-red-400 focus:border-red-500 focus:ring-red-500",
+            )}
+            minLength={field.validation?.minLength}
+            maxLength={field.validation?.maxLength}
+            min={field.validation?.min}
+            max={field.validation?.max}
+            pattern={field.validation?.pattern}
+          />
+        );
+
+      case "textarea":
+        return (
+          <textarea
+            value={(value as string) || ""}
+            onChange={e => handleChange(e.target.value)}
+            placeholder={field.placeholder}
+            required={field.required}
+            rows={3}
+            className={cn(
+              "anyspend-form-textarea",
+              inputBaseClass,
+              "resize-y",
+              error && "border-red-400 focus:border-red-500 focus:ring-red-500",
+            )}
+            minLength={field.validation?.minLength}
+            maxLength={field.validation?.maxLength}
+          />
+        );
+
+      case "select":
+        return (
+          <select
+            value={(value as string) || ""}
+            onChange={e => handleChange(e.target.value)}
+            required={field.required}
+            className={cn("anyspend-form-select", inputBaseClass, "cursor-pointer", error && "border-red-400")}
+          >
+            <option value="">{field.placeholder || "Select..."}</option>
+            {field.options?.map(opt => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        );
+
+      case "checkbox":
+        return (
+          <label className="anyspend-form-checkbox flex cursor-pointer items-center gap-2">
+            <input
+              type="checkbox"
+              checked={!!value}
+              onChange={e => handleChange(e.target.checked)}
+              className="h-4 w-4 rounded border-gray-300 text-blue-500 focus:ring-blue-500"
+            />
+            <span className="text-sm text-gray-700 dark:text-gray-300">{field.placeholder || field.label}</span>
+          </label>
+        );
+
+      default:
+        return (
+          <input
+            type="text"
+            value={(value as string) || ""}
+            onChange={e => handleChange(e.target.value)}
+            placeholder={field.placeholder}
+            required={field.required}
+            className={cn("anyspend-form-input", inputBaseClass, error && "border-red-400")}
+          />
+        );
+    }
+  };
+
+  return (
+    <div
+      className={cn("anyspend-form-field space-y-1", className)}
+      data-field-id={field.id}
+      data-field-type={field.type}
+    >
+      {field.type !== "checkbox" && (
+        <label className={cn("anyspend-form-label", labelClass)}>
+          {field.label}
+          {field.required && <span className="ml-0.5 text-red-500">*</span>}
+        </label>
+      )}
+      {renderField()}
+      {error && <p className="anyspend-form-error text-xs text-red-500">{error}</p>}
+    </div>
+  );
+}