@b3dotfun/sdk 0.0.13 → 0.0.14-alpha.2

package/dist/types/anyspend/services/anyspend.d.ts

@@ -1,11 +1,12 @@
 import { OnrampOptions } from "@b3dotfun/sdk/anyspend/react";
-import { GetCoinbaseOnrampOptionsResponse, GetOrderAndTxsResponse, GetOrderHistoryResponse, GetQuoteRequest, GetQuoteResponse } from "../types/api_req_res";
 import { components } from "../types/api";
+import { GetCoinbaseOnrampOptionsResponse, GetOrderAndTxsResponse, GetOrderHistoryResponse, GetQuoteRequest, GetQuoteResponse } from "../types/api_req_res";
+import { VisitorData } from "../types/fingerprint";
 export declare const anyspendService: {
     getTokenList: (isMainnet: boolean, chainId: number, query: string) => Promise<components["schemas"]["Token"][]>;
     getToken: (isMainnet: boolean, chainId: number, tokenAddress: string) => Promise<components["schemas"]["Token"]>;
     getQuote: (isMainnet: boolean, req: GetQuoteRequest) => Promise<GetQuoteResponse>;
-    createOrder: ({ isMainnet, recipientAddress, type, srcChain, dstChain, srcTokenAddress, dstTokenAddress, srcAmount, payload, onramp, metadata, creatorAddress, partnerId, }: {
+    createOrder: ({ isMainnet, recipientAddress, type, srcChain, dstChain, srcTokenAddress, dstTokenAddress, srcAmount, payload, onramp, metadata, creatorAddress, partnerId, visitorData, }: {
         isMainnet: boolean;
         recipientAddress: string;
         type: string;
@@ -19,6 +20,7 @@ export declare const anyspendService: {
         metadata: Record<string, any>;
         creatorAddress?: string;
         partnerId?: string;
+        visitorData?: VisitorData;
     }) => Promise<{
         success: boolean;
         message: string;
@@ -27,8 +29,8 @@ export declare const anyspendService: {
     }>;
     getOrderAndTransactions: (isMainnet: boolean, orderId: string | undefined) => Promise<GetOrderAndTxsResponse>;
     getOrderHistory: (isMainnet: boolean, creatorAddress: string | undefined, limit?: number, offset?: number) => Promise<GetOrderHistoryResponse>;
-    getCoinbaseOnrampOptions: (isMainnet: boolean, country: string) => Promise<GetCoinbaseOnrampOptionsResponse>;
-    checkStripeSupport: (isMainnet: boolean, ipAddress: string, usdAmount?: string) => Promise<{
+    getCoinbaseOnrampOptions: (isMainnet: boolean, country: string, visitorData?: VisitorData) => Promise<GetCoinbaseOnrampOptionsResponse>;
+    checkStripeSupport: (isMainnet: boolean, ipAddress: string, usdAmount?: string, visitorData?: VisitorData) => Promise<{
         stripeOnramp: boolean;
         stripeWeb2: boolean;
     }>;

package/dist/types/anyspend/types/fingerprint.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Types related to FingerprintJS integration
+ * We only need requestId and visitorId from the full FingerprintJS visitor data
+ */
+export interface VisitorData {
+    /**
+     * @description The unique identifier of the request to get visitor data
+     */
+    requestId: string;
+    /**
+     * @description The unique identifier of the visitor
+     */
+    visitorId: string;
+}

package/dist/types/global-account/react/hooks/useAuthentication.d.ts

@@ -4,7 +4,7 @@ export declare function useAuthentication(partnerId: string, loginWithSiwe?: boo
     isAuthenticating: boolean;
     isAuthenticated: boolean;
     isReady: boolean;
-    wallet: import("thirdweb/wallets").Wallet<`ecosystem.${string}`>;
+    wallet: import("thirdweb/dist/types/wallets/in-app/core/wallet/types").EcosystemWallet;
     preAuthenticate: typeof preAuthenticate;
     connect: (strategyOptions?: import("thirdweb/wallets").SingleStepAuthArgsType) => Promise<import("thirdweb/wallets").Wallet | null>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.13",
+  "version": "0.0.14-alpha.2",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -189,27 +189,6 @@
     "utils",
     "constants"
   ],
-  "scripts": {
-    "clean": "rm -rf dist",
-    "prebuild": "pnpm clean",
-    "fix-dist": "[ -d ./dist/react/src ] && cp -r ./dist/react/src/* ./dist/ && rm -rf ./dist/react || echo \"No react directory found\"",
-    "build": "pnpm clean && pnpm lint && pnpm build:types && pnpm build:cjs && pnpm build:esm && pnpm build:css",
-    "build:types": "tsc -p tsconfig.cjs.json --emitDeclarationOnly --declarationDir dist/types",
-    "build:cjs": "tsc -p tsconfig.cjs.json --outDir dist/cjs --module commonjs && tsc-alias -p tsconfig.cjs.json --outDir dist/cjs && mkdir -p dist/cjs/shared/generated && cp src/shared/generated/chain-networks.json src/shared/generated/coingecko-chains.json dist/cjs/shared/generated/",
-    "build:esm": "tsc -p tsconfig.esm.json --outDir dist/esm --module esnext  && tsc-alias -p tsconfig.esm.json --outDir dist/esm && mkdir -p dist/esm/shared/generated && cp src/shared/generated/chain-networks.json src/shared/generated/coingecko-chains.json dist/esm/shared/generated/ && node scripts/fix-esm-imports.js",
-    "build:css": "postcss src/styles/index.css -o dist/styles/index.css",
-    "dev:cjs": "tsc-watch -p tsconfig.cjs.json --onSuccess \"tsc-alias -p tsconfig.cjs.json --outDir dist/cjs\"",
-    "dev:esm": "tsc-watch -p tsconfig.esm.json --onSuccess \"tsc-alias -p tsconfig.esm.json --outDir dist/esm\"",
-    "dev": "concurrently \"pnpm dev:cjs\" \"pnpm dev:esm\" \"pnpm dev:css\"",
-    "dev:css": "postcss src/styles/index.css -o dist/styles/index.css --watch",
-    "prepublishOnly": "pnpm build",
-    "release:test": "pnpm version prerelease --preid test && git push --follow-tags && pnpm publish --tag test --no-git-checks",
-    "release:alpha": "pnpm version prerelease --preid alpha && git push --follow-tags && pnpm publish --tag alpha --no-git-checks",
-    "typecheck": "tsc --noEmit",
-    "generate:thirdweb": "npx @hey-api/openapi-ts --file src/thirdweb/openapi-ts.config.ts --input src/thirdweb/insight-service.json",
-    "lint": "eslint 'src/**/*.{ts,tsx}'",
-    "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix"
-  },
   "dependencies": {
     "@amplitude/analytics-browser": "2.14.0",
     "@b3dotfun/b3-api": "0.0.28",
@@ -220,6 +199,7 @@
     "@feathersjs/feathers": "5.0.33",
     "@feathersjs/socketio-client": "5.0.33",
     "@feathersjs/typebox": "5.0.33",
+    "@fingerprintjs/fingerprintjs-pro-react": "^2.7.0",
     "@hey-api/client-fetch": "0.8.3",
     "@hey-api/openapi-ts": "0.64.13",
     "@lottiefiles/dotlottie-react": "0.7.2",
@@ -256,7 +236,7 @@
     "sonner": "1.7.4",
     "stripe": "18.2.1",
     "tailwind-merge": "2.6.0",
-    "thirdweb": "5.93.16",
+    "thirdweb": "5.105.20",
     "typescript": "5.8.2",
     "vaul": "^1.1.2",
     "viem": "2.27.2",
@@ -307,11 +287,12 @@
     "@react-three/postprocessing": "2.16.6",
     "@readyplayerme/visage": "6.10.0",
     "@tanstack/react-query": "5.55.0",
+    "@fingerprintjs/fingerprintjs-pro-react": "^2.7.0",
     "framer-motion": "12.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-native-mmkv": "^3.2.0",
-    "thirdweb": "5.93.16",
+    "thirdweb": "5.105.20",
     "three": "0.175.0"
   },
   "peerDependenciesMeta": {
@@ -327,5 +308,25 @@
     "three": {
       "optional": true
     }
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "prebuild": "pnpm clean",
+    "fix-dist": "[ -d ./dist/react/src ] && cp -r ./dist/react/src/* ./dist/ && rm -rf ./dist/react || echo \"No react directory found\"",
+    "build": "pnpm clean && pnpm lint && pnpm build:types && pnpm build:cjs && pnpm build:esm && pnpm build:css",
+    "build:types": "tsc -p tsconfig.cjs.json --emitDeclarationOnly --declarationDir dist/types",
+    "build:cjs": "tsc -p tsconfig.cjs.json --outDir dist/cjs --module commonjs && tsc-alias -p tsconfig.cjs.json --outDir dist/cjs && mkdir -p dist/cjs/shared/generated && cp src/shared/generated/chain-networks.json src/shared/generated/coingecko-chains.json dist/cjs/shared/generated/",
+    "build:esm": "tsc -p tsconfig.esm.json --outDir dist/esm --module esnext  && tsc-alias -p tsconfig.esm.json --outDir dist/esm && mkdir -p dist/esm/shared/generated && cp src/shared/generated/chain-networks.json src/shared/generated/coingecko-chains.json dist/esm/shared/generated/ && node scripts/fix-esm-imports.js",
+    "build:css": "postcss src/styles/index.css -o dist/styles/index.css",
+    "dev:cjs": "tsc-watch -p tsconfig.cjs.json --onSuccess \"tsc-alias -p tsconfig.cjs.json --outDir dist/cjs\"",
+    "dev:esm": "tsc-watch -p tsconfig.esm.json --onSuccess \"tsc-alias -p tsconfig.esm.json --outDir dist/esm\"",
+    "dev": "concurrently \"pnpm dev:cjs\" \"pnpm dev:esm\" \"pnpm dev:css\"",
+    "dev:css": "postcss src/styles/index.css -o dist/styles/index.css --watch",
+    "release:test": "pnpm version prerelease --preid test && git push --follow-tags && pnpm publish --tag test --no-git-checks",
+    "release:alpha": "pnpm version prerelease --preid alpha && git push --follow-tags && pnpm publish --tag alpha --no-git-checks",
+    "typecheck": "tsc --noEmit",
+    "generate:thirdweb": "npx @hey-api/openapi-ts --file src/thirdweb/openapi-ts.config.ts --input src/thirdweb/insight-service.json",
+    "lint": "eslint 'src/**/*.{ts,tsx}'",
+    "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix"
   }
-}
+}

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

@@ -0,0 +1,60 @@
+import { FingerprintJSPro, FpjsProvider } from "@fingerprintjs/fingerprintjs-pro-react";
+import { ReactNode } from "react";
+
+interface FingerprintConfig {
+  apiKey: string;
+  endpoint?: string;
+  scriptUrlPattern?: string;
+}
+
+interface AnySpendFingerprintWrapperProps {
+  children: ReactNode;
+  fingerprint?: FingerprintConfig;
+}
+
+/**
+ * Internal wrapper that only initializes FingerprintJS when AnySpend components are actually used.
+ * This prevents unnecessary fingerprinting of users who don't interact with AnySpend.
+ */
+export function AnySpendFingerprintWrapper({ children, fingerprint }: AnySpendFingerprintWrapperProps) {
+  // If no fingerprint config is provided, render children without fingerprinting
+  if (!fingerprint?.apiKey) {
+    console.warn("No Fingerprint API key provided. Fingerprinting will be disabled.");
+    return <>{children}</>;
+  }
+
+  // Ensure endpoint has https:// prefix
+  const endpoint =
+    fingerprint.endpoint && !fingerprint.endpoint.startsWith("http")
+      ? `https://${fingerprint.endpoint}`
+      : fingerprint.endpoint;
+
+  return (
+    <FpjsProvider
+      loadOptions={{
+        apiKey: fingerprint.apiKey,
+        endpoint: endpoint ? [endpoint, FingerprintJSPro.defaultEndpoint] : undefined,
+        scriptUrlPattern: fingerprint.scriptUrlPattern
+          ? [fingerprint.scriptUrlPattern, FingerprintJSPro.defaultScriptUrlPattern]
+          : undefined,
+      }}
+    >
+      {children}
+    </FpjsProvider>
+  );
+}
+
+// Helper function to get fingerprint config from environment variables
+export function getFingerprintConfig(): FingerprintConfig | undefined {
+  const apiKey = process.env.NEXT_PUBLIC_FINGERPRINT_API_KEY;
+
+  if (!apiKey) {
+    return undefined;
+  }
+
+  return {
+    apiKey,
+    endpoint: process.env.NEXT_PUBLIC_FINGERPRINT_ENDPOINT,
+    scriptUrlPattern: process.env.NEXT_PUBLIC_FINGERPRINT_SCRIPT_URL,
+  };
+}

package/src/anyspend/react/components/common/PanelOnrampPayment.tsx

@@ -1,4 +1,6 @@
 import { useAnyspendCreateOnrampOrder, useGeoOnrampOptions } from "@b3dotfun/sdk/anyspend/react";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 import { Button } from "@b3dotfun/sdk/global-account/react";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { motion } from "framer-motion";
@@ -6,8 +8,7 @@ import invariant from "invariant";
 import { ChevronLeft, ChevronRight, Landmark, Loader2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
-import { components } from "@b3dotfun/sdk/anyspend/types/api";
-import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
+import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper";
 
 interface PanelOnrampPaymentProps {
   srcAmountOnRamp: string;
@@ -31,27 +32,38 @@ interface PanelOnrampPaymentProps {
   recipientImageUrl?: string;
 }
 
-export function PanelOnrampPayment({
-  srcAmountOnRamp,
-  // recipientName,
-  recipientAddress,
-  isMainnet,
-  isBuyMode,
-  destinationTokenChainId,
-  destinationTokenAddress,
-  selectedDstChainId,
-  selectedDstToken,
-  anyspendQuote,
-  globalAddress,
-  onOrderCreated,
-  onBack,
-  orderType,
-  nft,
-  tournament,
-  payload,
-  recipientEnsName,
-  recipientImageUrl,
-}: PanelOnrampPaymentProps) {
+export function PanelOnrampPayment(props: PanelOnrampPaymentProps) {
+  const fingerprintConfig = getFingerprintConfig();
+
+  return (
+    <AnySpendFingerprintWrapper fingerprint={fingerprintConfig}>
+      <PanelOnrampPaymentInner {...props} />
+    </AnySpendFingerprintWrapper>
+  );
+}
+
+function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
+  const {
+    srcAmountOnRamp,
+    recipientAddress,
+    isMainnet,
+    isBuyMode,
+    destinationTokenChainId,
+    destinationTokenAddress,
+    selectedDstChainId,
+    selectedDstToken,
+    anyspendQuote,
+    globalAddress,
+    onOrderCreated,
+    onBack,
+    orderType,
+    nft,
+    tournament,
+    payload,
+    recipientEnsName,
+    recipientImageUrl,
+  } = props;
+
   // Use a stable amount for geo onramp options to prevent unnecessary refetches
   const [stableAmountForGeo, setStableAmountForGeo] = useState(srcAmountOnRamp);
   const hasInitialized = useRef(false);
@@ -73,6 +85,8 @@ export function PanelOnrampPayment({
     isLoading: isLoadingGeoOnramp,
   } = useGeoOnrampOptions(isMainnet, stableAmountForGeo);
 
+  const isLoading = isLoadingGeoOnramp;
+
   const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
     onSuccess: data => {
       const orderId = data.data.id;
@@ -219,7 +233,7 @@ export function PanelOnrampPayment({
           <Loader2 className="h-4 w-4 animate-spin" />
           <span className="text-as-primary/70">Creating onramp order...</span>
         </div>
-      ) : isLoadingGeoOnramp ? (
+      ) : isLoading ? (
         <div className="bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6">
           <Loader2 className="h-4 w-4 animate-spin" />
           <span className="text-as-primary/70">Loading payment options...</span>

package/src/anyspend/react/components/common/PaymentStripeWeb2.tsx

@@ -8,6 +8,7 @@ import { AddressElement, Elements, PaymentElement, useElements, useStripe } from
 import { loadStripe, PaymentIntentResult, StripePaymentElementOptions } from "@stripe/stripe-js";
 import { HelpCircle, Info, X } from "lucide-react";
 import { useEffect, useState } from "react";
+import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper";
 import HowItWorks from "./HowItWorks";
 import PaymentMethodIcons from "./PaymentMethodIcons";
 
@@ -21,6 +22,7 @@ interface PaymentStripeWeb2Props {
 
 export default function PaymentStripeWeb2({ isMainnet, order, onPaymentSuccess }: PaymentStripeWeb2Props) {
   const { theme } = useB3();
+  const fingerprintConfig = getFingerprintConfig();
 
   const { clientSecret, isLoadingStripeClientSecret, stripeClientSecretError } = useStripeClientSecret(
     isMainnet,
@@ -36,15 +38,17 @@ export default function PaymentStripeWeb2({ isMainnet, order, onPaymentSuccess }
   }
 
   return (
-    <Elements
-      stripe={stripePromise}
-      options={{
-        clientSecret: clientSecret || undefined,
-        appearance: { theme: theme === "light" ? "stripe" : "night" },
-      }}
-    >
-      <StripePaymentForm order={order} clientSecret={clientSecret} onPaymentSuccess={onPaymentSuccess} />
-    </Elements>
+    <AnySpendFingerprintWrapper fingerprint={fingerprintConfig}>
+      <Elements
+        stripe={stripePromise}
+        options={{
+          clientSecret: clientSecret || undefined,
+          appearance: { theme: theme === "light" ? "stripe" : "night" },
+        }}
+      >
+        <StripePaymentForm order={order} clientSecret={clientSecret} onPaymentSuccess={onPaymentSuccess} />
+      </Elements>
+    </AnySpendFingerprintWrapper>
   );
 }
 
@@ -102,7 +106,6 @@ function StripePaymentForm({
   useEffect(() => {
     if (stripe && elements) {
       setStripeReady(true);
-      console.log("@@stripe-web2-payment:initialized:", JSON.stringify({ orderId: order.id }, null, 2));
     }
   }, [stripe, elements, order.id]);
 
@@ -127,7 +130,6 @@ function StripePaymentForm({
   // Handle payment element changes
   const handlePaymentElementChange = (event: any) => {
     // Show address element only for card payments
-    console.log("@@stripe-web2-payment:payment-element-change:", JSON.stringify(event, null, 2));
     setShowAddressElement(event.value.type === "card");
   };
 
@@ -143,8 +145,6 @@ function StripePaymentForm({
     setMessage(null);
 
     try {
-      console.log("@@stripe-web2-payment:confirming-payment:", JSON.stringify({ orderId: order.id }, null, 2));
-
       const result = (await stripe.confirmPayment({
         elements,
         confirmParams: {
@@ -191,9 +191,6 @@ function StripePaymentForm({
     const fromStripe = url.searchParams.get("fromStripe");
     const paymentIntent = url.searchParams.get("payment_intent");
 
-    console.log("@@stripe-web2-payment:fromStripe:", fromStripe);
-    console.log("@@stripe-web2-payment:paymentIntent:", paymentIntent);
-
     if (fromStripe && paymentIntent) {
       // Close the modal as we're returning from 3DS
       setB3ModalOpen(true);

package/src/anyspend/react/components/index.ts

@@ -3,6 +3,7 @@ export { AnySpend } from "./AnySpend";
 export { AnySpendBondKit } from "./AnySpendBondKit";
 export { AnySpendBuySpin } from "./AnySpendBuySpin";
 export { AnySpendCustom } from "./AnySpendCustom";
+export * from "./AnySpendFingerprintWrapper";
 export { AnySpendNFT } from "./AnySpendNFT";
 export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
 export { AnySpendStakeB3 } from "./AnySpendStakeB3";

package/src/anyspend/react/components/webview/WebviewOnrampPayment.tsx

@@ -10,6 +10,7 @@ import { Loader2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { formatUnits } from "viem";
+import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper";
 
 const stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);
 
@@ -23,6 +24,15 @@ interface WebviewOnrampPaymentProps {
   userId?: string;
 }
 
+export function WebviewOnrampPayment(props: WebviewOnrampPaymentProps) {
+  const fingerprintConfig = getFingerprintConfig();
+  return (
+    <AnySpendFingerprintWrapper fingerprint={fingerprintConfig}>
+      <WebviewOnrampPaymentInner {...props} />
+    </AnySpendFingerprintWrapper>
+  );
+}
+
 // Stripe Payment Form Component
 function StripePaymentForm({
   order,
@@ -140,7 +150,7 @@ function StripePaymentForm({
   );
 }
 
-export function WebviewOnrampPayment({
+function WebviewOnrampPaymentInner({
   srcAmountOnRamp,
   recipientAddress,
   destinationToken,

package/src/anyspend/react/hooks/useAnyspendCreateOnrampOrder.ts

@@ -1,12 +1,15 @@
 import { USDC_BASE } from "@b3dotfun/sdk/anyspend/constants";
 import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { VisitorData } from "@b3dotfun/sdk/anyspend/types/fingerprint";
 import { buildMetadata, buildPayload, normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
+import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react";
 import { useMutation } from "@tanstack/react-query";
 import { useMemo } from "react";
+
 import { parseUnits } from "viem";
 import { base } from "viem/chains";
 import { CreateOrderParams } from "./useAnyspendCreateOrder";
-import { components } from "@b3dotfun/sdk/anyspend/types/api";
 
 export type OnrampOptions = {
   vendor: components["schemas"]["OnrampMetadata"]["vendor"];
@@ -31,6 +34,13 @@ export type UseAnyspendCreateOnrampOrderProps = {
  * Specifically handles orders that involve fiat-to-crypto onramp functionality
  */
 export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspendCreateOnrampOrderProps = {}) {
+  // Get fingerprint data
+  const { data: fpData } = useVisitorData({ extendedResult: true }, { immediate: true });
+  const visitorData: VisitorData | undefined = fpData && {
+    requestId: fpData.requestId,
+    visitorId: fpData.visitorId,
+  };
+
   const { mutate: createOrder, isPending } = useMutation({
     mutationFn: async (params: CreateOnrampOrderParams) => {
       const {
@@ -82,7 +92,9 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspend
             expectedDstAmount,
             nft,
             tournament,
-            payload,
+            payload: {
+              ...payload,
+            },
           }),
           onramp,
           metadata: buildMetadata(orderType, {
@@ -92,10 +104,13 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspend
             expectedDstAmount,
             nft,
             tournament,
-            payload,
+            payload: {
+              ...payload,
+            },
           }),
           creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined,
           partnerId,
+          visitorData,
         });
       } catch (error: any) {
         // If the error has a response with message and statusCode, throw that

package/src/anyspend/react/hooks/useAnyspendCreateOrder.ts

@@ -1,6 +1,8 @@
 import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
-import { buildMetadata, buildPayload, normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { VisitorData } from "@b3dotfun/sdk/anyspend/types/fingerprint";
+import { buildMetadata, buildPayload, normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
+import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react";
 import { useMutation } from "@tanstack/react-query";
 import { useMemo } from "react";
 
@@ -32,6 +34,12 @@ export type UseAnyspendCreateOrderProps = {
  * For onramp orders, use useAnyspendCreateOnrampOrder instead.
  */
 export function useAnyspendCreateOrder({ onSuccess, onError }: UseAnyspendCreateOrderProps = {}) {
+  // Get fingerprint data
+  const { data: fpData } = useVisitorData({ extendedResult: true }, { immediate: true });
+  const visitorData: VisitorData | undefined = fpData && {
+    requestId: fpData.requestId,
+    visitorId: fpData.visitorId,
+  };
   const { mutate: createOrder, isPending } = useMutation({
     mutationFn: async (params: CreateOrderParams) => {
       const {
@@ -63,7 +71,9 @@ export function useAnyspendCreateOrder({ onSuccess, onError }: UseAnyspendCreate
             expectedDstAmount: params.expectedDstAmount,
             nft: params.nft,
             tournament: params.tournament,
-            payload: params.payload,
+            payload: {
+              ...params.payload,
+            },
           }),
           metadata: buildMetadata(orderType, {
             orderType,
@@ -72,9 +82,12 @@ export function useAnyspendCreateOrder({ onSuccess, onError }: UseAnyspendCreate
             expectedDstAmount: params.expectedDstAmount,
             nft: params.nft,
             tournament: params.tournament,
-            payload: params.payload,
+            payload: {
+              ...params.payload,
+            },
           }),
           creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined,
+          visitorData,
         });
       } catch (error: any) {
         // If the error has a response with message and statusCode, throw that

package/src/anyspend/react/hooks/useCoinbaseOnrampOptions.ts

@@ -1,12 +1,18 @@
 import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
+import { VisitorData } from "@b3dotfun/sdk/anyspend/types/fingerprint";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 
-export function useCoinbaseOnrampOptions(isMainnet: boolean, country?: string) {
+export function useCoinbaseOnrampOptions(
+  isMainnet: boolean,
+  country?: string,
+  visitorData?: VisitorData,
+  isLoadingVisitorData?: boolean,
+) {
   const { data, isLoading, error, refetch } = useQuery({
-    queryKey: ["getCoinbaseOnrampOptions", isMainnet, country],
-    queryFn: () => anyspendService.getCoinbaseOnrampOptions(isMainnet, country!),
-    enabled: Boolean(country),
+    queryKey: ["getCoinbaseOnrampOptions", isMainnet, country, visitorData],
+    queryFn: () => anyspendService.getCoinbaseOnrampOptions(isMainnet, country!, visitorData),
+    enabled: Boolean(country) && !isLoadingVisitorData,
   });
 
   return useMemo(

package/src/anyspend/react/hooks/useGeoOnrampOptions.ts

@@ -1,16 +1,27 @@
+import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react";
 import { useMemo } from "react";
-
+import { VisitorData } from "../../types/fingerprint";
 import { useCoinbaseOnrampOptions } from "./useCoinbaseOnrampOptions";
 import { useGetGeo } from "./useGetGeo";
 import { useStripeSupport } from "./useStripeSupport";
 
 export function useGeoOnrampOptions(isMainnet: boolean, srcFiatAmount: string) {
+  // Get fingerprint data
+  const { data: fpData, isLoading: isLoadingVisitorData } = useVisitorData(
+    { extendedResult: true },
+    { immediate: true },
+  );
+  const visitorData: VisitorData | undefined = fpData && {
+    requestId: fpData.requestId,
+    visitorId: fpData.visitorId,
+  };
+
   // Use existing hooks
   const { geoData, loading: isLoadingGeo, error: geoError } = useGetGeo();
   const { coinbaseOnrampOptions, isLoadingCoinbaseOnrampOptions, coinbaseOnrampOptionsError } =
-    useCoinbaseOnrampOptions(isMainnet, geoData?.country);
+    useCoinbaseOnrampOptions(isMainnet, geoData?.country, visitorData);
   const { isStripeOnrampSupported, isStripeWeb2Supported, isLoadingStripeSupport, stripeSupportError } =
-    useStripeSupport(isMainnet, geoData?.ip || "", srcFiatAmount);
+    useStripeSupport(isMainnet, geoData?.ip || "", srcFiatAmount, visitorData);
 
   // Calculate available payment methods based on the amount
   const coinbaseAvailablePaymentMethods = useMemo(() => {
@@ -33,7 +44,7 @@ export function useGeoOnrampOptions(isMainnet: boolean, srcFiatAmount: string) {
       isStripeOnrampSupported,
       isStripeWeb2Supported,
       isOnrampSupported: coinbaseAvailablePaymentMethods.length > 0 || isStripeOnrampSupported || isStripeWeb2Supported,
-      isLoading: isLoadingGeo || isLoadingCoinbaseOnrampOptions || isLoadingStripeSupport,
+      isLoading: isLoadingGeo || isLoadingCoinbaseOnrampOptions || isLoadingStripeSupport || isLoadingVisitorData,
       isLoadingGeo,
       isLoadingCoinbaseOnrampOptions,
       isLoadingStripeSupport,

package/src/anyspend/react/hooks/useStripeSupport.ts

@@ -1,12 +1,19 @@
 import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
+import { VisitorData } from "@b3dotfun/sdk/anyspend/types/fingerprint";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 
-export function useStripeSupport(isMainnet: boolean, ipAddress: string, usdAmount?: string) {
+export function useStripeSupport(
+  isMainnet: boolean,
+  ipAddress: string,
+  usdAmount?: string,
+  visitorData?: VisitorData,
+  isLoadingVisitorData?: boolean,
+) {
   const { data, isLoading, error, refetch } = useQuery({
-    queryKey: ["useStripeSupport", isMainnet, ipAddress, usdAmount],
-    queryFn: () => anyspendService.checkStripeSupport(isMainnet, ipAddress, usdAmount),
-    enabled: !!ipAddress,
+    queryKey: ["useStripeSupport", isMainnet, ipAddress, usdAmount, visitorData?.requestId, visitorData?.visitorId],
+    queryFn: () => anyspendService.checkStripeSupport(isMainnet, ipAddress, usdAmount, visitorData),
+    enabled: !!ipAddress && !isLoadingVisitorData,
   });
 
   return useMemo(

package/src/anyspend/react/providers/StripeRedirectHandler.tsx

@@ -20,10 +20,6 @@ export function StripeRedirectHandler() {
     const paymentIntent = url.searchParams.get("payment_intent");
     const orderId = url.searchParams.get("orderId");
 
-    console.log("@@stripe-web2-payment:fromStripe:", fromStripe);
-    console.log("@@stripe-web2-payment:paymentIntent:", paymentIntent);
-    console.log("@@stripe-web2-payment:orderId:", orderId);
-
     if (fromStripe && paymentIntent && orderId) {
       // Re-open the modal with the order details
       setB3ModalOpen(true);