@b3dotfun/sdk 0.0.79-alpha.1 → 0.0.79-alpha.2

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

@@ -44,7 +44,6 @@ import { motion } from "motion/react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 
 import { base } from "viem/chains";
-import { useFeatureFlags } from "../contexts/FeatureFlagsContext";
 import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi";
 import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState";
 import { useRecipientAddressState } from "../hooks/useRecipientAddressState";
@@ -188,6 +187,8 @@ export function AnySpendCustom(props: {
   onSuccess?: (txHash?: string) => void;
   showRecipient?: boolean;
   onShowPointsDetail?: () => void;
+  /** Fiat amount in USD for fiat payments */
+  srcFiatAmount?: string;
 }) {
   const fingerprintConfig = getFingerprintConfig();
 
@@ -215,6 +216,7 @@ function AnySpendCustomInner({
   onSuccess,
   showRecipient = true,
   onShowPointsDetail,
+  srcFiatAmount: srcFiatAmountProps,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -238,9 +240,9 @@ function AnySpendCustomInner({
   onSuccess?: (txHash?: string) => void;
   showRecipient?: boolean;
   onShowPointsDetail?: () => void;
+  srcFiatAmount?: string;
 }) {
   const hasMounted = useHasMounted();
-  const featureFlags = useFeatureFlags();
 
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
@@ -402,14 +404,31 @@ function AnySpendCustomInner({
     }
   }, [activeTab, anyspendQuote?.data]);
   const formattedSrcAmount = srcAmount ? formatTokenAmount(srcAmount, srcToken.decimals, 6, false) : null;
-  const srcFiatAmount = useMemo(
-    () => (activeTab === "fiat" && srcAmount ? formatUnits(srcAmount.toString(), USDC_BASE.decimals) : "0"),
-    [activeTab, srcAmount],
-  );
+  // Calculate fiat amount for geo check (regardless of activeTab) to determine tab availability
+  const srcFiatAmountForGeoCheck = useMemo(() => {
+    // Use prop if provided
+    if (srcFiatAmountProps) {
+      return srcFiatAmountProps;
+    }
+    // Fallback to dstAmount if destination token is USDC
+    if (dstAmount && dstToken.address.toLowerCase() === USDC_BASE.address.toLowerCase()) {
+      return formatUnits(dstAmount, USDC_BASE.decimals);
+    }
+    // Use srcAmount if available (from quote)
+    if (srcAmount) {
+      return formatUnits(srcAmount.toString(), USDC_BASE.decimals);
+    }
+    return "0";
+  }, [srcAmount, srcFiatAmountProps, dstAmount, dstToken.address]);
+
+  const srcFiatAmount = useMemo(() => {
+    if (activeTab !== "fiat") return "0";
+    return srcFiatAmountForGeoCheck;
+  }, [activeTab, srcFiatAmountForGeoCheck]);
 
-  // Get geo data and onramp options (after quote is available)
-  const { geoData, isOnrampSupported, coinbaseAvailablePaymentMethods, stripeWeb2Support } =
-    useGeoOnrampOptions(srcFiatAmount);
+  // Get geo data and onramp options (use srcFiatAmountForGeoCheck to check availability regardless of activeTab)
+  const { geoData, isOnrampSupported, coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support } =
+    useGeoOnrampOptions(srcFiatAmountForGeoCheck);
 
   useEffect(() => {
     if (oat?.data?.order.status === "executed" && !onSuccessCalled.current) {
@@ -521,9 +540,14 @@ function AnySpendCustomInner({
         // Get the current geo data from the hook
         const currentGeoData = geoData;
 
+        // Use total amount from quote (includes fees) for onramp, fallback to srcFiatAmount
+        const onrampAmount = anyspendQuote?.data?.currencyIn?.amountUsd
+          ? anyspendQuote.data.currencyIn.amountUsd.toString()
+          : srcFiatAmount;
+
         void createOnrampOrder({
           ...createOrderParams,
-          srcFiatAmount: srcFiatAmount,
+          srcFiatAmount: onrampAmount,
           onramp: {
             vendor: onramp.vendor,
             paymentMethod: onramp.paymentMethod,
@@ -601,12 +625,21 @@ function AnySpendCustomInner({
         }
         vendor = "coinbase";
         paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || "";
-      } else if (paymentMethod === FiatPaymentMethod.STRIPE) {
+      } else if (paymentMethod === FiatPaymentMethod.STRIPE_WEB2) {
+        // Stripe Web2 embedded payment
         if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
-          toast.error("Stripe not available");
+          toast.error("Stripe embedded payment not available");
           return;
         }
-        vendor = stripeWeb2Support && stripeWeb2Support.isSupport ? "stripe-web2" : "stripe";
+        vendor = "stripe-web2";
+        paymentMethodString = "";
+      } else if (paymentMethod === FiatPaymentMethod.STRIPE) {
+        // Stripe redirect (one-click buy URL)
+        if (!stripeOnrampSupport) {
+          toast.error("Stripe redirect payment not available");
+          return;
+        }
+        vendor = "stripe";
         paymentMethodString = "";
       } else {
         toast.error("Please select a payment method");
@@ -803,7 +836,7 @@ function AnySpendCustomInner({
 
   // Render points badge if conditions are met
   const renderPointsBadge = () => {
-    if (featureFlags.showPoints && anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0) {
+    if (anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0) {
       return (
         <PointsBadge
           pointsAmount={anyspendQuote.data.pointsAmount}
@@ -1162,20 +1195,32 @@ function AnySpendCustomInner({
                 <div className="flex flex-col items-end gap-0.5">
                   <div className="flex flex-wrap items-center justify-end gap-2">
                     {renderPointsBadge()}
-                    <span className="text-as-primary whitespace-nowrap text-xl font-semibold">
-                      ${srcFiatAmount || "0.00"}
-                    </span>
+                    {isLoadingAnyspendQuote ? (
+                      <div className="bg-as-surface-secondary h-7 w-16 animate-pulse rounded" />
+                    ) : (
+                      <span className="text-as-primary whitespace-nowrap text-xl font-semibold">
+                        {anyspendQuote?.data?.currencyIn?.amountUsd ? (
+                          `$${Number(anyspendQuote.data.currencyIn.amountUsd).toFixed(2)}`
+                        ) : (
+                          <>
+                            ${parseFloat(srcFiatAmount || "0").toFixed(2)}
+                            <span className="text-as-tertiarry text-base">+</span>
+                          </>
+                        )}
+                      </span>
+                    )}
                   </div>
-                  {anyspendQuote?.data?.fee?.type === "stripeweb2_fee" && anyspendQuote.data.fee.originalAmount && (
-                    <span className="text-as-secondary text-xs">
-                      incl. $
-                      {(
+                  {(() => {
+                    if (anyspendQuote?.data?.fee?.type === "stripeweb2_fee" && anyspendQuote.data.fee.originalAmount) {
+                      const fee =
                         (Number(anyspendQuote.data.fee.originalAmount) - Number(anyspendQuote.data.fee.finalAmount)) /
-                        1e6
-                      ).toFixed(2)}{" "}
-                      fee
-                    </span>
-                  )}
+                        1e6;
+                      if (fee > 0) {
+                        return <span className="text-as-secondary text-xs">incl. ${fee.toFixed(2)} fee</span>;
+                      }
+                    }
+                    return null;
+                  })()}
                 </div>
               </motion.div>
             </div>

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

@@ -7,7 +7,7 @@ import { getIpfsUrl } from "@b3dotfun/sdk/shared/utils/ipfs";
 import { formatDisplayNumber, formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { MoreVertical } from "lucide-react";
 import { AnimatePresence } from "motion/react";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { b3 } from "viem/chains";
 import { GetQuoteResponse } from "../../types/api_req_res";
 import { AnySpendCustom } from "./AnySpendCustom";
@@ -46,19 +46,19 @@ export function AnySpendNFT({
   onShowPointsDetail?: () => void;
 }) {
   const [imageUrlWithFallback, setFallbackImageUrl] = useState<string | null>(nftContract.imageUrl);
-  const [isLoadingFallback, setIsLoadingFallback] = useState(false);
+  const hasFetchedRef = useRef(false);
 
   // Fetch contract metadata when imageUrl is empty
   useEffect(() => {
     async function fetchContractMetadata() {
       // fetch image Uri if not provided
-      if (nftContract.imageUrl || isLoadingFallback) {
+      if (nftContract.imageUrl || hasFetchedRef.current) {
         return;
       }
 
-      try {
-        setIsLoadingFallback(true);
+      hasFetchedRef.current = true;
 
+      try {
         // Use the chainIdToPublicClient utility function
         const publicClient = chainIdToPublicClient(nftContract.chainId);
 
@@ -96,56 +96,57 @@ export function AnySpendNFT({
         }
       } catch (error) {
         console.error("Error fetching contract metadata:", error);
-      } finally {
-        setIsLoadingFallback(false);
       }
     }
 
     fetchContractMetadata();
-  }, [nftContract.contractAddress, nftContract.chainId, nftContract.imageUrl, nftContract.tokenId, isLoadingFallback]);
-
-  const header = ({
-    anyspendPrice,
-    isLoadingAnyspendPrice,
-  }: {
-    anyspendPrice: GetQuoteResponse | undefined;
-    isLoadingAnyspendPrice: boolean;
-  }) => (
-    <>
-      <div className="relative size-[200px]">
-        <div className="absolute inset-0 scale-95 bg-black/30 blur-md"></div>
-        <GlareCard className="overflow-hidden">
-          {imageUrlWithFallback && (
-            <img src={imageUrlWithFallback} alt={nftContract.name} className="size-full object-cover" />
-          )}
-          <div className="absolute inset-0 rounded-xl border border-white/10"></div>
-        </GlareCard>
-
-        <DropdownMenu nftContract={nftContract} />
-      </div>
-      <div className="from-b3-react-background to-as-on-surface-1 -mb-5 mt-[-100px] w-full rounded-t-lg bg-gradient-to-t">
-        <div className="h-[100px] w-full" />
-        <div className="mb-1 flex w-full flex-col items-center gap-2 p-5">
-          <span className="font-sf-rounded text-2xl font-semibold">{nftContract.name}</span>
-
-          <div className="flex w-fit items-center gap-1">
-            {anyspendPrice ? (
-              <AnimatePresence mode="wait">
-                <div
-                  className={cn("text-as-primary group flex items-center text-3xl font-semibold transition-all", {
-                    "opacity-0": isLoadingAnyspendPrice,
-                  })}
-                >
-                  {formatDisplayNumber(anyspendPrice?.data?.currencyIn?.amountUsd, { style: "currency" })}
-                </div>
-              </AnimatePresence>
-            ) : (
-              <div className="h-[36px] w-full" />
+  }, [nftContract.contractAddress, nftContract.chainId, nftContract.imageUrl, nftContract.tokenId]);
+
+  const header = useCallback(
+    ({
+      anyspendPrice,
+      isLoadingAnyspendPrice,
+    }: {
+      anyspendPrice: GetQuoteResponse | undefined;
+      isLoadingAnyspendPrice: boolean;
+    }) => (
+      <>
+        <div className="relative size-[200px]">
+          <div className="absolute inset-0 scale-95 bg-black/30 blur-md"></div>
+          <GlareCard className="overflow-hidden">
+            {imageUrlWithFallback && (
+              <img src={imageUrlWithFallback} alt={nftContract.name} className="size-full object-cover" />
             )}
+            <div className="absolute inset-0 rounded-xl border border-white/10"></div>
+          </GlareCard>
+
+          <DropdownMenu nftContract={nftContract} />
+        </div>
+        <div className="from-b3-react-background to-as-on-surface-1 -mb-5 mt-[-100px] w-full rounded-t-lg bg-gradient-to-t">
+          <div className="h-[100px] w-full" />
+          <div className="mb-1 flex w-full flex-col items-center gap-2 p-5">
+            <span className="font-sf-rounded text-2xl font-semibold">{nftContract.name}</span>
+
+            <div className="flex w-fit items-center gap-1">
+              {anyspendPrice ? (
+                <AnimatePresence mode="wait">
+                  <div
+                    className={cn("text-as-primary group flex items-center text-3xl font-semibold transition-all", {
+                      "opacity-0": isLoadingAnyspendPrice,
+                    })}
+                  >
+                    {formatDisplayNumber(anyspendPrice?.data?.currencyIn?.amountUsd, { style: "currency" })}
+                  </div>
+                </AnimatePresence>
+              ) : (
+                <div className="h-[36px] w-full" />
+              )}
+            </div>
           </div>
         </div>
-      </div>
-    </>
+      </>
+    ),
+    [imageUrlWithFallback, nftContract],
   );
 
   return (

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

@@ -5,7 +5,6 @@ import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
 import { ChevronRight, Info } from "lucide-react";
 import { motion } from "motion/react";
 import { components } from "../../../types/api";
-import { useFeatureFlags } from "../../contexts/FeatureFlagsContext";
 import { OrderTokenAmount } from "./OrderTokenAmount";
 import { PointsBadge } from "./PointsBadge";
 
@@ -55,8 +54,6 @@ export function CryptoReceiveSection({
   onShowPointsDetail,
   onShowFeeDetail,
 }: CryptoReceiveSectionProps) {
-  const featureFlags = useFeatureFlags();
-
   return (
     <motion.div
       initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
@@ -184,7 +181,7 @@ export function CryptoReceiveSection({
               );
             })()}
         </div>
-        {featureFlags.showPoints && anyspendQuote?.data?.pointsAmount > 0 && (
+        {anyspendQuote?.data?.pointsAmount > 0 && (
           <PointsBadge
             pointsAmount={anyspendQuote.data.pointsAmount}
             pointsMultiplier={anyspendQuote.data.pointsMultiplier}

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

@@ -7,7 +7,8 @@ import { ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
 export enum FiatPaymentMethod {
   NONE = "none",
   COINBASE_PAY = "coinbase_pay",
-  STRIPE = "stripe",
+  STRIPE = "stripe", // Stripe redirect (one-click buy URL)
+  STRIPE_WEB2 = "stripe_web2", // Stripe embedded payment
 }
 
 interface FiatPaymentMethodProps {
@@ -25,30 +26,34 @@ export function FiatPaymentMethodComponent({
   onSelectPaymentMethod,
   srcAmountOnRamp,
 }: FiatPaymentMethodProps) {
+  // Load geo-based onramp options like in PanelOnramp
+  const {
+    coinbaseAvailablePaymentMethods,
+    stripeOnrampSupport,
+    stripeWeb2Support,
+    isLoading: isLoadingGeoOnramp,
+  } = useGeoOnrampOptions(srcAmountOnRamp);
+
   // Helper function to get fees from API data
   const getFeeFromApi = (paymentMethod: FiatPaymentMethod): string | null => {
     switch (paymentMethod) {
       case FiatPaymentMethod.COINBASE_PAY:
         // Coinbase doesn't provide fee info in API, return null
         return null;
-      case FiatPaymentMethod.STRIPE:
-        // Get fee from Stripe API response
+      case FiatPaymentMethod.STRIPE_WEB2:
+        // Get fee from Stripe Web2 API response
         if (stripeWeb2Support && "formattedFeeUsd" in stripeWeb2Support) {
           return stripeWeb2Support.formattedFeeUsd;
         }
         return null;
+      case FiatPaymentMethod.STRIPE:
+        // Stripe redirect doesn't have fee info from API
+        return null;
       default:
         return null; // No fee when no payment method selected
     }
   };
 
-  // Load geo-based onramp options like in PanelOnramp
-  const {
-    coinbaseAvailablePaymentMethods,
-    stripeWeb2Support,
-    isLoading: isLoadingGeoOnramp,
-  } = useGeoOnrampOptions(srcAmountOnRamp);
-
   // Generate payment methods based on geo availability (like in PanelOnrampPayment)
   const availablePaymentMethods = [];
 
@@ -65,15 +70,28 @@ export function FiatPaymentMethodComponent({
     });
   }
 
-  // Add Stripe if available
-  if (stripeWeb2Support && stripeWeb2Support.isSupport) {
-    const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE);
+  // Add Stripe redirect (one-click) if available - primary option
+  if (stripeOnrampSupport) {
+    const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2); // Use same fee estimate
     availablePaymentMethods.push({
       id: FiatPaymentMethod.STRIPE,
-      name: "Stripe",
-      description: "Credit or debit card payment",
-      badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : "Standard Fee",
-      badgeColor: "bg-yellow-100 text-yellow-800",
+      name: "Credit/Debit Card",
+      description: "Pay via Stripe checkout",
+      badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
+      badgeColor: "bg-gray-100 text-gray-800",
+      available: true,
+    });
+  }
+
+  // Add Stripe Web2 (embedded) if available - secondary option
+  if (stripeWeb2Support && stripeWeb2Support.isSupport) {
+    const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2);
+    availablePaymentMethods.push({
+      id: FiatPaymentMethod.STRIPE_WEB2,
+      name: "Quick Pay",
+      description: "Credit or debit card",
+      badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
+      badgeColor: "bg-gray-100 text-gray-800",
       available: true,
     });
   }
@@ -144,16 +162,22 @@ export function FiatPaymentMethodComponent({
               >
                 {/* Icon - matching PanelOnramp style */}
                 <div className="flex h-12 w-12 items-center justify-center rounded-full bg-blue-600 text-2xl text-white">
-                  {method.id === FiatPaymentMethod.COINBASE_PAY ? "C" : "S"}
+                  {method.id === FiatPaymentMethod.COINBASE_PAY
+                    ? "C"
+                    : method.id === FiatPaymentMethod.STRIPE || method.id === FiatPaymentMethod.STRIPE_WEB2
+                      ? "S"
+                      : "?"}
                 </div>
 
                 {/* Content */}
                 <div className="flex flex-1 flex-col items-start text-left">
                   <div className="flex items-center gap-2">
                     <span className="text-as-primary text-base font-semibold">{method.name}</span>
-                    <span className={cn("rounded-full px-2 py-1 text-xs font-medium", method.badgeColor)}>
-                      {method.badge}
-                    </span>
+                    {method.badge && (
+                      <span className={cn("rounded-full px-2 py-1 text-xs font-medium", method.badgeColor)}>
+                        {method.badge}
+                      </span>
+                    )}
                   </div>
                   <span className="text-as-primary/60 text-sm">{method.description}</span>
                 </div>

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

@@ -8,7 +8,6 @@ import { formatAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { ChevronRight, Info, Wallet } from "lucide-react";
 import { useRef } from "react";
 
-import { useFeatureFlags } from "../../contexts/FeatureFlagsContext";
 import { FiatPaymentMethod } from "./FiatPaymentMethod";
 import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat";
 import { PointsBadge } from "./PointsBadge";
@@ -54,8 +53,6 @@ export function PanelOnramp({
   onShowFeeDetail?: () => void;
   customUsdInputValues?: string[];
 }) {
-  const featureFlags = useFeatureFlags();
-
   // Helper function to get fees from anyspend quote
   const getFeeFromApi = (paymentMethod: FiatPaymentMethod): number | null => {
     // Try to get fee from anyspend quote first (most accurate)
@@ -84,11 +81,16 @@ export function PanelOnramp({
   const getTotalAmount = (paymentMethod: FiatPaymentMethod): number => {
     const baseAmount = parseFloat(srcAmountOnRamp) || 5;
 
-    // Try to get from anyspend quote first (most accurate)
+    // For stripeweb2_fee, use the originalAmount
     if (anyspendQuote?.data?.fee?.type === "stripeweb2_fee") {
       return Number(anyspendQuote.data.fee.originalAmount) / 1e6; // Convert from wei to USD
     }
 
+    // Use currencyIn.amountUsd from quote when available (includes fees, most accurate for custom orders)
+    if (anyspendQuote?.data?.currencyIn?.amountUsd) {
+      return Number(anyspendQuote.data.currencyIn.amountUsd);
+    }
+
     const fee = getFeeFromApi(paymentMethod);
 
     // For Coinbase or when fee is available, calculate manually
@@ -279,15 +281,13 @@ export function PanelOnramp({
                   <Info className="h-4 w-4" />
                 </button>
               )}
-              {featureFlags.showPoints &&
-                anyspendQuote?.data?.pointsAmount &&
-                anyspendQuote?.data?.pointsAmount > 0 && (
-                  <PointsBadge
-                    pointsAmount={anyspendQuote.data.pointsAmount}
-                    pointsMultiplier={anyspendQuote.data.pointsMultiplier}
-                    onClick={() => onShowPointsDetail?.()}
-                  />
-                )}
+              {anyspendQuote?.data?.pointsAmount && anyspendQuote?.data?.pointsAmount > 0 && (
+                <PointsBadge
+                  pointsAmount={anyspendQuote.data.pointsAmount}
+                  pointsMultiplier={anyspendQuote.data.pointsMultiplier}
+                  onClick={() => onShowPointsDetail?.()}
+                />
+              )}
             </div>
             <div className="flex flex-col items-end gap-0.5">
               <span className="text-as-primary font-semibold">

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

@@ -65,6 +65,7 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
     geoData,
     coinbaseOnrampOptions,
     coinbaseAvailablePaymentMethods,
+    stripeOnrampSupport,
     stripeWeb2Support,
     isLoading: isLoadingGeoOnramp,
   } = useGeoOnrampOptions(srcAmountOnRamp);
@@ -201,16 +202,18 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
                 >
                   ${parseFloat(srcAmountOnRamp).toFixed(2)}
                 </p>
-                {anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && (
-                  <p className="text-b3-react-foreground/60 text-xs">
-                    incl. $
-                    {(
-                      (Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
-                      10000
-                    ).toFixed(2)}{" "}
-                    fee
-                  </p>
-                )}
+                {anyspendQuote?.data?.fee?.type === "standard_fee" &&
+                  anyspendQuote.data.currencyIn?.amountUsd &&
+                  anyspendQuote.data.fee.finalFeeBps > 0 && (
+                    <p className="text-b3-react-foreground/60 text-xs">
+                      incl. $
+                      {(
+                        (Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
+                        10000
+                      ).toFixed(2)}{" "}
+                      fee
+                    </p>
+                  )}
               </div>
             </div>
           </div>
@@ -311,7 +314,37 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
                 );
               })()}
 
-            {/* Stripe Option - Show if supported */}
+            {/* Stripe Redirect Option - Primary option */}
+            {stripeOnrampSupport && (
+              <button
+                onClick={() => handlePaymentMethodClick("stripe")}
+                className="bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md"
+              >
+                <div className="flex items-center gap-4">
+                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-purple-50">
+                    <img
+                      src="https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg"
+                      alt="Stripe"
+                      className="h-5"
+                    />
+                  </div>
+                  <div className="flex flex-col items-start text-left">
+                    <h4 className="text-b3-react-foreground text-lg font-semibold">Credit/Debit Card</h4>
+                    <p className="text-b3-react-foreground/60 text-sm">Pay via Stripe checkout</p>
+                    {stripeWeb2Support?.isSupport && stripeWeb2Support.formattedFeeUsd && (
+                      <div className="mt-1">
+                        <span className="text-xs text-gray-500">
+                          ${Number(stripeWeb2Support.formattedFeeUsd).toFixed(2)} fee
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <ChevronRight className="text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" />
+              </button>
+            )}
+
+            {/* Stripe Web2 Option - Embedded payment (secondary) */}
             {stripeWeb2Support.isSupport && (
               <button
                 onClick={() => handlePaymentMethodClick("stripe-web2")}
@@ -326,11 +359,15 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
                     />
                   </div>
                   <div className="flex flex-col items-start text-left">
-                    <h4 className="text-b3-react-foreground text-lg font-semibold">Stripe</h4>
-                    <p className="text-b3-react-foreground/60 text-sm">Credit or debit card payment</p>
-                    <div className="mt-1 flex items-center gap-1">
-                      <span className="text-xs font-medium text-orange-600">Fee Applied</span>
-                    </div>
+                    <h4 className="text-b3-react-foreground text-lg font-semibold">Quick Pay</h4>
+                    <p className="text-b3-react-foreground/60 text-sm">Credit or debit card</p>
+                    {stripeWeb2Support.formattedFeeUsd && (
+                      <div className="mt-1">
+                        <span className="text-xs text-gray-500">
+                          ${Number(stripeWeb2Support.formattedFeeUsd).toFixed(2)} fee
+                        </span>
+                      </div>
+                    )}
                   </div>
                 </div>
                 <ChevronRight className="text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" />

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

@@ -20,7 +20,7 @@ export function useGeoOnrampOptions(srcFiatAmount: string) {
   const { geoData, loading: isLoadingGeo, error: geoError } = useGetGeo();
   const { coinbaseOnrampOptions, isLoadingCoinbaseOnrampOptions, coinbaseOnrampOptionsError } =
     useCoinbaseOnrampOptions(geoData?.country, visitorData);
-  const { stripeWeb2Support, isLoadingStripeSupport, stripeSupportError } = useStripeSupport(
+  const { stripeOnrampSupport, stripeWeb2Support, isLoadingStripeSupport, stripeSupportError } = useStripeSupport(
     srcFiatAmount,
     visitorData,
   );
@@ -43,8 +43,10 @@ export function useGeoOnrampOptions(srcFiatAmount: string) {
       geoData,
       coinbaseOnrampOptions,
       coinbaseAvailablePaymentMethods,
+      stripeOnrampSupport,
       stripeWeb2Support,
-      isOnrampSupported: coinbaseAvailablePaymentMethods.length > 0 || stripeWeb2Support,
+      isOnrampSupported:
+        coinbaseAvailablePaymentMethods.length > 0 || stripeOnrampSupport || stripeWeb2Support.isSupport,
       isLoading: isLoadingGeo || isLoadingCoinbaseOnrampOptions || isLoadingStripeSupport || isLoadingVisitorData,
       isLoadingGeo,
       isLoadingCoinbaseOnrampOptions,
@@ -57,6 +59,7 @@ export function useGeoOnrampOptions(srcFiatAmount: string) {
       geoData,
       coinbaseOnrampOptions,
       coinbaseAvailablePaymentMethods,
+      stripeOnrampSupport,
       stripeWeb2Support,
       isLoadingGeo,
       isLoadingCoinbaseOnrampOptions,

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

@@ -12,6 +12,7 @@ export function useStripeSupport(usdAmount?: string, visitorData?: VisitorData,
 
   return useMemo(
     () => ({
+      stripeOnrampSupport: data?.stripeOnramp || false,
       stripeWeb2Support: data?.stripeWeb2 || { isSupport: false },
       isLoadingStripeSupport: isLoading,
       stripeSupportError: error,