@b3dotfun/sdk 0.1.68 → 0.1.69-alpha.0

package/src/anyspend/react/components/AnySpend.tsx

@@ -27,6 +27,8 @@ import {
   toast,
   TransitionPanel,
   useAccountWallet,
+  useAuth,
+  useAuthStore,
   useB3Config,
   useModalStore,
   useProfile,
@@ -64,6 +66,8 @@ import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaym
 import { GasIndicator } from "./common/GasIndicator";
 import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails";
 import { OrderHistory } from "./common/OrderHistory";
+import { KycGate } from "./checkout/KycGate";
+import { LoginStep } from "@b3dotfun/sdk/global-account/react/components/SignInWithB3/steps/LoginStep";
 import { PanelOnramp } from "./common/PanelOnramp";
 import { PanelOnrampPayment } from "./common/PanelOnrampPayment";
 import { PointsDetailPanel } from "./common/PointsDetailPanel";
@@ -94,6 +98,8 @@ export enum PanelView {
   POINTS_DETAIL,
   FEE_DETAIL,
   DIRECT_TRANSFER_SUCCESS,
+  FIAT_KYC,
+  FIAT_AUTH,
 }
 
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
@@ -140,6 +146,8 @@ export function AnySpend(props: {
   content?: AnySpendContent;
   /** Structured color/theme configuration */
   theme?: AnySpendTheme;
+  /** When true, shows a KYC gate before Stripe Web2 (credit card) payments. Default false. */
+  kycEnabled?: boolean;
 }) {
   const fingerprintConfig = getFingerprintConfig();
 
@@ -175,6 +183,7 @@ function AnySpendInner({
   destinationTokenAmount,
   callbackMetadata,
   senderAddress,
+  kycEnabled = false,
 }: {
   sourceChainId?: number;
   destinationTokenAddress?: string;
@@ -201,6 +210,7 @@ function AnySpendInner({
   slots?: AnySpendSlots;
   content?: AnySpendContent;
   theme?: AnySpendTheme;
+  kycEnabled?: boolean;
 }) {
   const { slots, content } = useAnySpendCustomization();
   const searchParams = useSearchParamsSSR();
@@ -209,7 +219,13 @@ function AnySpendInner({
   const { partnerId } = useB3Config();
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
-
+  const { isAuthenticated } = useAuth();
+  // KYC approval is tracked per-session so we only prompt the wallet
+  // signature when the user actually clicks Buy, not on panel mount.
+  // useRef so handleFiatOrder can read the updated value synchronously
+  // in the same frame that onStatusResolved sets it (setState is async).
+  // When kycEnabled is false (default), pre-approve so the KYC gate is skipped.
+  const kycApprovedRef = useRef(!kycEnabled);
   // Determine if we're in "buy mode" based on whether destination token props are provided
   const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
 
@@ -236,7 +252,17 @@ function AnySpendInner({
   // Track previous panel for proper back navigation
   const previousPanel = useRef<PanelView>(PanelView.MAIN);
 
-  const [activeTab, setActiveTab] = useState<"crypto" | "fiat">(defaultActiveTab);
+  const [activeTab, setActiveTab] = useState<"crypto" | "fiat">(() => {
+    if (typeof window !== "undefined") {
+      const stored = sessionStorage.getItem("anyspend_active_tab") as "crypto" | "fiat" | null;
+      if (stored === "crypto" || stored === "fiat") return stored;
+    }
+    return defaultActiveTab;
+  });
+
+  useEffect(() => {
+    sessionStorage.setItem("anyspend_active_tab", activeTab);
+  }, [activeTab]);
 
   const [orderId, setOrderId] = useState<string | undefined>(loadOrder);
   const [directTransferTxHash, setDirectTransferTxHash] = useState<string | undefined>();
@@ -273,10 +299,20 @@ function AnySpendInner({
     resetPaymentMethods,
   } = useCryptoPaymentMethodState();
 
-  const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState<FiatPaymentMethod>(FiatPaymentMethod.NONE);
+  const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState<FiatPaymentMethod>(() => {
+    if (typeof window !== "undefined") {
+      const stored = sessionStorage.getItem("anyspend_fiat_method") as FiatPaymentMethod | null;
+      if (stored && Object.values(FiatPaymentMethod).includes(stored)) return stored;
+    }
+    return FiatPaymentMethod.NONE;
+  });
   // const [newRecipientAddress, setNewRecipientAddress] = useState("");
   // const recipientInputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    sessionStorage.setItem("anyspend_fiat_method", selectedFiatPaymentMethod);
+  }, [selectedFiatPaymentMethod]);
+
   // Get initial chain IDs from URL or defaults
   const initialSrcChainId = sourceChainId || parseInt(searchParams.get("fromChainId") || "0") || mainnet.id;
   const initialDstChainId =
@@ -297,11 +333,27 @@ function AnySpendInner({
   const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
   const [srcAmount, setSrcAmount] = useState<string>(searchParams.get("fromAmount") || "0");
 
-  // State for onramp amount
-  const [srcAmountOnRamp, setSrcAmountOnRamp] = useState<string>(searchParams.get("fromAmount") || "5");
+  // State for onramp amount — persisted in sessionStorage so it survives Persona KYC roundtrip
+  const [srcAmountOnRamp, setSrcAmountOnRamp] = useState<string>(() => {
+    if (typeof window !== "undefined") {
+      const stored = sessionStorage.getItem("anyspend_fiat_amount");
+      if (stored) return stored;
+    }
+    return searchParams.get("fromAmount") || "5";
+  });
 
-  // State for destination chain/token selection
-  const [selectedDstChainId, setSelectedDstChainId] = useState<number>(initialDstChainId);
+  useEffect(() => {
+    sessionStorage.setItem("anyspend_fiat_amount", srcAmountOnRamp);
+  }, [srcAmountOnRamp]);
+
+  // State for destination chain/token selection (sync effects come after state declarations below) — persisted in sessionStorage for Persona KYC roundtrip
+  const [selectedDstChainId, setSelectedDstChainId] = useState<number>(() => {
+    if (!isBuyMode && typeof window !== "undefined") {
+      const stored = sessionStorage.getItem("anyspend_dst_chain_id");
+      if (stored) return parseInt(stored, 10);
+    }
+    return initialDstChainId;
+  });
   // Helper to check if address is Hyperliquid USDC (supports both 34-char and 42-char formats)
   const isHyperliquidUSDCAddress = (address?: string) =>
     eqci(address, HYPERLIQUID_USDC_ADDRESS) || eqci(address, ZERO_ADDRESS);
@@ -323,12 +375,29 @@ function AnySpendInner({
     defaultToken: defaultDstToken,
     prefix: "to",
   });
-  const [selectedDstToken, setSelectedDstToken] = useState<components["schemas"]["Token"]>(
-    isBuyMode ? defaultDstToken : dstTokenFromUrl,
-  );
+  const [selectedDstToken, setSelectedDstToken] = useState<components["schemas"]["Token"]>(() => {
+    if (!isBuyMode && typeof window !== "undefined") {
+      const stored = sessionStorage.getItem("anyspend_dst_token");
+      if (stored) {
+        try {
+          return JSON.parse(stored) as components["schemas"]["Token"];
+        } catch {}
+      }
+    }
+    return isBuyMode ? defaultDstToken : dstTokenFromUrl;
+  });
   const { data: dstTokenMetadata } = useTokenData(selectedDstToken?.chainId, selectedDstToken?.address);
   const [dstAmount, setDstAmount] = useState<string>(searchParams.get("toAmount") || "");
 
+  // Sync dst chain/token to sessionStorage so they survive Persona KYC roundtrip
+  useEffect(() => {
+    if (!isBuyMode) sessionStorage.setItem("anyspend_dst_chain_id", selectedDstChainId.toString());
+  }, [selectedDstChainId, isBuyMode]);
+
+  useEffect(() => {
+    if (!isBuyMode) sessionStorage.setItem("anyspend_dst_token", JSON.stringify(selectedDstToken));
+  }, [selectedDstToken, isBuyMode]);
+
   const [isSrcInputDirty, setIsSrcInputDirty] = useState(true);
   // Add refs to track if we've applied metadata
   const appliedSrcMetadataRef = useRef(false);
@@ -728,6 +797,17 @@ function AnySpendInner({
   // Call onSuccess when order is executed
   useOnOrderSuccess({ orderData: oat, orderId, onSuccess });
 
+  // Clear all persisted selection state once an order is submitted — next open starts fresh
+  useEffect(() => {
+    if (orderId) {
+      sessionStorage.removeItem("anyspend_fiat_amount");
+      sessionStorage.removeItem("anyspend_active_tab");
+      sessionStorage.removeItem("anyspend_fiat_method");
+      sessionStorage.removeItem("anyspend_dst_chain_id");
+      sessionStorage.removeItem("anyspend_dst_token");
+    }
+  }, [orderId]);
+
   const { createOrder, isCreatingOrder } = useAnyspendCreateOrder({
     onSuccess: data => {
       const orderId = data.data.id;
@@ -817,8 +897,8 @@ function AnySpendInner({
       if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
         return { text: "Select payment method", disable: false, error: false, loading: false };
       }
-      // If payment method is selected, show "Buy"
-      return { text: "Buy", disable: false, error: false, loading: false };
+      // If payment method is selected, show "Continue"
+      return { text: "Continue", disable: false, error: false, loading: false };
     }
 
     if (activeTab === "crypto") {
@@ -845,7 +925,7 @@ function AnySpendInner({
       }
     }
 
-    return { text: "Buy", disable: false, error: false, loading: false };
+    return { text: "Continue", disable: false, error: false, loading: false };
   }, [
     activeInputAmountInWei,
     isSameChainSameToken,
@@ -1028,7 +1108,20 @@ function AnySpendInner({
         vendor = "stripe";
         paymentMethodString = "";
       } else if (paymentMethod === FiatPaymentMethod.STRIPE_WEB2) {
-        // Stripe embedded payment form
+        // Stripe embedded payment form requires authentication + KYC
+        // Read from store directly to avoid stale closure when called from onLoginSuccess callback
+        const currentlyAuthenticated = useAuthStore.getState().isAuthenticated;
+        if (!currentlyAuthenticated) {
+          navigateToPanel(PanelView.FIAT_AUTH, "forward");
+          return;
+        }
+        if (!kycApprovedRef.current) {
+          // Navigate to KYC gate. KycGate shows an explicit "Continue to Verify"
+          // CTA and pre-signs from that user-gesture context before enabling
+          // the useKycStatus query — so no surprise signature popup here.
+          navigateToPanel(PanelView.FIAT_KYC, "forward");
+          return;
+        }
         if (!stripeWeb2Support.isSupport) {
           toast.error("Pay with Card not available");
           return;
@@ -1147,14 +1240,23 @@ function AnySpendInner({
     };
   }, [activePanel, navigateBack]);
 
+  // When auth completes while on the FIAT_AUTH panel, navigate back and retry the order
+  useEffect(() => {
+    if (isAuthenticated && activePanel === PanelView.FIAT_AUTH) {
+      navigateBack();
+      handleFiatOrder(selectedFiatPaymentMethod);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isAuthenticated]);
+
   const historyView = (
-    <div className={"mx-auto flex w-[560px] max-w-full flex-col items-center"}>
+    <div className={"mx-auto flex w-full max-w-[560px] flex-col items-center"}>
       <OrderHistory mode={mode} onBack={navigateBack} onSelectOrder={onSelectOrder} />
     </div>
   );
 
   const orderDetailsView = (
-    <div className={"mx-auto w-[460px] max-w-full p-5"}>
+    <div className={"mx-auto w-full max-w-[460px] p-5"}>
       <div className="relative flex flex-col gap-4">
         {oat && (
           <OrderDetails
@@ -1187,7 +1289,7 @@ function AnySpendInner({
   );
 
   const mainView = (
-    <div className={classes?.mainContent || "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5"}>
+    <div className={classes?.mainContent || "mx-auto flex w-full max-w-[460px] flex-col items-center gap-2 pt-5"}>
       <div className={"flex w-full max-w-full flex-col items-center gap-2 px-5"}>
         {/* Token Header - Show when in buy mode */}
         {isBuyMode && !hideHeader && (
@@ -1547,7 +1649,7 @@ function AnySpendInner({
       returnLabel: resolvedReturnLabel || undefined,
     })
   ) : (
-    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-6 p-5">
+    <div className="mx-auto flex w-full max-w-[460px] flex-col items-center gap-6 p-5">
       <div className="flex flex-col items-center gap-4">
         <AnimatedCheckmark className="h-16 w-16" />
         <div className="text-center">
@@ -1593,6 +1695,32 @@ function AnySpendInner({
     </div>
   );
 
+  const kycView = (
+    <div className="mx-auto flex w-full max-w-[460px] flex-col gap-4 px-5 pt-5">
+      <KycGate
+        enabled={activePanel === PanelView.FIAT_KYC}
+        onStatusResolved={approved => {
+          if (approved) {
+            kycApprovedRef.current = true;
+            navigateBack();
+            handleFiatOrder(selectedFiatPaymentMethod);
+          }
+        }}
+      />
+    </div>
+  );
+
+  const authView = (
+    <div className="mx-auto w-full max-w-[460px]">
+      <LoginStep
+        chain={baseChain}
+        onSuccess={async () => {
+          // isAuthenticated will be true at this point — the useEffect below handles navigation
+        }}
+      />
+    </div>
+  );
+
   // Add tabs to the main component when no order is loaded
   return (
     <StyleRoot>
@@ -1667,6 +1795,12 @@ function AnySpendInner({
             <div key="direct-transfer-success-view" className={cn(mode === "page" && "p-6")}>
               {directTransferSuccessView}
             </div>,
+            <div key="fiat-kyc-view" className={cn(mode === "page" && "p-6")}>
+              {kycView}
+            </div>,
+            <div key="fiat-auth-view" className={cn(mode === "page" && "p-6")}>
+              {authView}
+            </div>,
           ]}
         </TransitionPanel>
       </div>

package/src/anyspend/react/components/AnySpendCustom.tsx

@@ -1270,7 +1270,7 @@ function AnySpendCustomInner({
 
   // Recipient selection view
   const recipientSelectionView = (
-    <div className={cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4")}>
+    <div className={cn("bg-as-surface-primary mx-auto w-full max-w-[460px] rounded-xl p-4")}>
       <RecipientSelection
         initialValue={recipientAddress || ""}
         title="Add recipient address or ENS"
@@ -1287,7 +1287,7 @@ function AnySpendCustomInner({
 
   // Crypto payment method view
   const cryptoPaymentMethodView = (
-    <div className={cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4")}>
+    <div className={cn("bg-as-surface-primary mx-auto w-full max-w-[460px] rounded-xl p-4")}>
       <CryptoPaymentMethod
         selectedPaymentMethod={effectiveCryptoPaymentMethod}
         setSelectedPaymentMethod={method => {
@@ -1318,7 +1318,7 @@ function AnySpendCustomInner({
 
   // Fiat payment method view
   const fiatPaymentMethodView = (
-    <div className={cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4")}>
+    <div className={cn("bg-as-surface-primary mx-auto w-full max-w-[460px] rounded-xl p-4")}>
       <FiatPaymentMethodComponent
         selectedPaymentMethod={selectedFiatPaymentMethod}
         setSelectedPaymentMethod={setSelectedFiatPaymentMethod}
@@ -1331,7 +1331,7 @@ function AnySpendCustomInner({
 
   // Points detail view
   const pointsDetailView = (
-    <div className={cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4")}>
+    <div className={cn("bg-as-surface-primary mx-auto w-full max-w-[460px] rounded-xl p-4")}>
       <PointsDetailPanel
         pointsAmount={anyspendQuote?.data?.pointsAmount || 0}
         onBack={() => setActivePanel(PanelView.CONFIRM_ORDER)}

package/src/anyspend/react/components/AnySpendCustomExactIn.tsx

@@ -416,7 +416,7 @@ function AnySpendCustomExactInInner({
     <div
       className={
         classes?.container ||
-        "anyspend-custom-exact-in-container mx-auto flex w-[460px] max-w-full flex-col items-center gap-2"
+        "anyspend-custom-exact-in-container mx-auto flex w-full max-w-[460px] flex-col items-center gap-2"
       }
     >
       {headerContent}
@@ -725,7 +725,7 @@ function AnySpendCustomExactInInner({
   };
 
   const orderDetailsView = (
-    <div className={"mx-auto w-[460px] max-w-full"}>
+    <div className={"mx-auto w-full max-w-[460px]"}>
       <div className="relative flex flex-col gap-4">
         {oat && (
           <OrderDetails

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

@@ -1,29 +1,31 @@
 "use client";
 
-import { useTokenData } from "@b3dotfun/sdk/global-account/react";
 import { USDC_BASE } from "@b3dotfun/sdk/anyspend/constants";
+import { useTokenData } from "@b3dotfun/sdk/global-account/react";
 import { formatUnits, safeBigInt } from "@b3dotfun/sdk/shared/utils/number";
-import { type ReactNode, useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState, type ReactNode } from "react";
+import type {
+  AddressData,
+  CheckoutFormComponentProps,
+  CheckoutFormSchema,
+  DiscountResult,
+  ShippingOption,
+} from "../../../types/forms";
 import { useAnyspendQuote } from "../../hooks/useAnyspendQuote";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper";
+import { AnySpendCustomizationProvider } from "../context/AnySpendCustomizationContext";
+import type { AnySpendCheckoutClasses } from "../types/classes";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "../types/customization";
 import { CheckoutCartPanel } from "./CheckoutCartPanel";
 import { CheckoutFormPanel } from "./CheckoutFormPanel";
 import { CheckoutLayout } from "./CheckoutLayout";
 import { CheckoutPaymentPanel, type PaymentMethod } from "./CheckoutPaymentPanel";
+import { VariablePricingInput, type VariablePricingConfig } from "./VariablePricingInput";
 
 export type { AnySpendCheckoutClasses } from "../types/classes";
-import type { AnySpendCheckoutClasses } from "../types/classes";
-import { AnySpendCustomizationProvider } from "../context/AnySpendCustomizationContext";
-import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "../types/customization";
-import type {
-  CheckoutFormSchema,
-  CheckoutFormComponentProps,
-  ShippingOption,
-  DiscountResult,
-  AddressData,
-} from "../../../types/forms";
 
-export type { CheckoutFormSchema, CheckoutFormComponentProps, ShippingOption, DiscountResult, AddressData };
+export type { VariablePricingConfig } from "./VariablePricingInput";
+export type { AddressData, CheckoutFormComponentProps, CheckoutFormSchema, DiscountResult, ShippingOption };
 
 export interface CheckoutItem {
   id?: string;
@@ -55,7 +57,7 @@ export interface AnySpendCheckoutProps {
   destinationTokenAddress: string;
   /** The destination chain ID */
   destinationTokenChainId: number;
-  /** Line items */
+  /** Line items. When `variablePricing.enabled` is true, pass a single placeholder item (e.g. amount "0") — the user-entered amount overrides the total. */
   items: CheckoutItem[];
   /** Override computed total */
   totalAmount?: string;
@@ -130,6 +132,12 @@ export interface AnySpendCheckoutProps {
   onDiscountApplied?: (result: DiscountResult) => void;
   /** Async function to validate a discount code. Returns DiscountResult. */
   validateDiscount?: (code: string) => Promise<DiscountResult>;
+  /** Variable pricing / name your price config. When enabled, user enters amount before payment. */
+  variablePricing?: VariablePricingConfig;
+  /** When true, fees are added on top of the amount (payer pays more, receiver gets exact amount) */
+  feeOnTop?: boolean;
+  /** When true, identity verification (KYC) is required before card payment. Defaults to false. */
+  kycEnabled?: boolean;
 }
 
 const emptyAddress: AddressData = { street: "", city: "", state: "", zip: "", country: "" };
@@ -175,7 +183,16 @@ export function AnySpendCheckout({
   enableDiscountCode,
   onDiscountApplied: onDiscountAppliedProp,
   validateDiscount,
+  // Variable pricing
+  variablePricing,
+  feeOnTop,
+  kycEnabled = false,
 }: AnySpendCheckoutProps) {
+  // ===== Variable pricing state =====
+  const [variablePricingAmount, setVariablePricingAmount] = useState<string>("0");
+  const isVariablePricingActive = variablePricing?.enabled === true;
+  const isVariablePricingValid = isVariablePricingActive ? variablePricingAmount !== "0" : true;
+
   // ===== Form state =====
   const [formData, setFormData] = useState<Record<string, unknown>>({});
   const [selectedShipping, setSelectedShipping] = useState<ShippingOption | null>(null);
@@ -236,7 +253,20 @@ export function AnySpendCheckout({
   }, [appliedDiscount, discountProp]);
 
   // Compute total from items + adjustments (including dynamic shipping/discount)
+  // Variable pricing overrides the total when active
   const computedTotal = useMemo(() => {
+    if (isVariablePricingActive && variablePricingAmount !== "0") {
+      let total = safeBigInt(variablePricingAmount);
+      if (effectiveShipping?.amount) total += safeBigInt(effectiveShipping.amount);
+      const taxAmt = typeof tax === "string" ? tax : tax?.amount;
+      if (taxAmt) total += safeBigInt(taxAmt);
+      if (effectiveDiscount?.amount) total -= safeBigInt(effectiveDiscount.amount);
+      if (summaryLines) {
+        for (const line of summaryLines) total += safeBigInt(line.amount);
+      }
+      if (total < BigInt(0)) total = BigInt(0);
+      return total.toString();
+    }
     if (totalAmountOverride) return totalAmountOverride;
     let total = BigInt(0);
     for (const item of items) {
@@ -251,7 +281,16 @@ export function AnySpendCheckout({
     }
     if (total < BigInt(0)) total = BigInt(0);
     return total.toString();
-  }, [items, totalAmountOverride, effectiveShipping, tax, effectiveDiscount, summaryLines]);
+  }, [
+    items,
+    totalAmountOverride,
+    effectiveShipping,
+    tax,
+    effectiveDiscount,
+    summaryLines,
+    isVariablePricingActive,
+    variablePricingAmount,
+  ]);
 
   // Get destination token metadata
   const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
@@ -300,14 +339,26 @@ export function AnySpendCheckout({
     if (formData.email) meta.customerEmail = formData.email;
     if (formData.name) meta.customerName = formData.name;
     if (checkoutSessionId) meta.checkoutSessionId = checkoutSessionId;
+    if (isVariablePricingActive && variablePricingAmount !== "0") {
+      meta.variablePricingAmount = variablePricingAmount;
+    }
     return Object.keys(meta).length > 0 ? meta : undefined;
-  }, [formData, selectedShipping, shippingAddress, appliedDiscount, checkoutSessionId]);
+  }, [
+    formData,
+    selectedShipping,
+    shippingAddress,
+    appliedDiscount,
+    checkoutSessionId,
+    isVariablePricingActive,
+    variablePricingAmount,
+  ]);
 
-  // Check if required form fields are filled
+  // Check if required form fields are filled and variable pricing is valid
   const isFormValid = useMemo(() => {
+    if (!isVariablePricingValid) return false;
     if (!formSchema) return true;
     return formSchema.fields.filter(f => f.required).every(f => formData[f.id] != null && formData[f.id] !== "");
-  }, [formSchema, formData]);
+  }, [formSchema, formData, isVariablePricingValid]);
 
   // Check if we have a form panel to show
   const hasFormContent =
@@ -325,6 +376,16 @@ export function AnySpendCheckout({
           mode={mode}
           paymentPanel={
             <>
+              {/* Variable pricing input renders above everything */}
+              {isVariablePricingActive && tokenData && variablePricing && (
+                <VariablePricingInput
+                  config={variablePricing}
+                  tokenDecimals={tokenDecimals}
+                  tokenSymbol={tokenSymbol}
+                  themeColor={themeColor}
+                  onChange={setVariablePricingAmount}
+                />
+              )}
               {/* Form panel renders above payment panel in the left/payment column */}
               {hasFormContent && (
                 <div className="mb-6">
@@ -370,6 +431,8 @@ export function AnySpendCheckout({
                 showOrderId={showOrderId}
                 callbackMetadata={checkoutFormMetadata}
                 isFormValid={isFormValid}
+                feeOnTop={feeOnTop}
+                kycEnabled={kycEnabled}
               />
             </>
           }

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

@@ -73,6 +73,8 @@ export interface AnySpendCheckoutTriggerProps {
   discount?: string | { amount: string; label?: string; code?: string };
   /** Additional summary line items (fees, tips, etc.) */
   summaryLines?: CheckoutSummaryLine[];
+  /** When true, identity verification (KYC) is required before card payment. Defaults to false. */
+  kycEnabled?: boolean;
 }
 
 export function AnySpendCheckoutTrigger({
@@ -103,6 +105,7 @@ export function AnySpendCheckoutTrigger({
   tax,
   discount,
   summaryLines,
+  kycEnabled = false,
 }: AnySpendCheckoutTriggerProps) {
   // Merge workflowId + orgId into callbackMetadata
   const mergedMetadata = useMemo(() => {
@@ -212,6 +215,7 @@ export function AnySpendCheckoutTrigger({
               classes={classes}
               defaultPaymentMethod={defaultPaymentMethod}
               senderAddress={senderAddress}
+              kycEnabled={kycEnabled}
             />
           </div>
         </div>

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

@@ -37,6 +37,10 @@ interface CheckoutPaymentPanelProps {
   showOrderId?: boolean;
   /** Whether the checkout form is valid. When false, payment methods are disabled. */
   isFormValid?: boolean;
+  /** When true, fees are added on top (payer pays more, receiver gets exact amount) */
+  feeOnTop?: boolean;
+  /** When true, identity verification (KYC) is required before card payment. Defaults to false. */
+  kycEnabled?: boolean;
 }
 
 function RadioCircle({ selected, themeColor }: { selected: boolean; themeColor?: string }) {
@@ -132,6 +136,8 @@ export function CheckoutPaymentPanel({
   showPoints,
   showOrderId,
   isFormValid = true,
+  feeOnTop,
+  kycEnabled = false,
 }: CheckoutPaymentPanelProps) {
   const [paymentMethod, setPaymentMethod] = useState<PaymentMethod | null>(defaultPaymentMethod ?? null);
 
@@ -291,6 +297,8 @@ export function CheckoutPaymentPanel({
                     onError={onError}
                     callbackMetadata={callbackMetadata}
                     classes={classes}
+                    feeOnTop={feeOnTop}
+                    kycEnabled={kycEnabled}
                   />
                 </div>
               </motion.div>

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

@@ -585,14 +585,8 @@ export function CryptoPayPanel({
                       {srcAmountFormatted} {selectedSrcToken?.symbol}
                     </span>{" "}
                     on{" "}
-                    <span className="font-semibold text-gray-900 dark:text-gray-100">
-                      {chainLogoUrl && (
-                        <img
-                          src={chainLogoUrl}
-                          alt=""
-                          className="mb-px mr-0.5 inline h-3.5 w-3.5 rounded-full align-text-bottom"
-                        />
-                      )}
+                    <span className="inline-flex items-center gap-1 rounded-full bg-gray-100 px-1.5 py-0.5 align-middle font-semibold text-gray-900 dark:bg-white/10 dark:text-gray-100">
+                      {chainLogoUrl && <img src={chainLogoUrl} alt="" className="h-3.5 w-3.5 rounded-full" />}
                       {chainName}
                     </span>{" "}
                     to:
@@ -613,11 +607,8 @@ export function CryptoPayPanel({
 
                   {/* Warning */}
                   <p className="text-xs leading-snug text-orange-500/80 dark:text-orange-400/80">
-                    Only send {selectedSrcToken?.symbol} on{" "}
-                    {chainLogoUrl && (
-                      <img src={chainLogoUrl} alt="" className="mr-0.5 inline h-3 w-3 rounded-full align-text-bottom" />
-                    )}
-                    {chainName}. Sending other tokens or using a different network may result in loss of funds.
+                    Only send {selectedSrcToken?.symbol} on <span className="font-semibold">{chainName}</span>. Sending
+                    other tokens or using a different network may result in loss of funds.
                   </p>
                 </div>
               </div>