@b3dotfun/sdk 0.0.10-alpha.3 → 0.0.10-alpha.5

package/dist/cjs/anyspend/react/components/common/PaymentStripeWeb2.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = PaymentStripeWeb2;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../../anyspend");
-const react_1 = require("../../../../anyspend/react");
 const constants_1 = require("../../../../anyspend/constants");
+const react_1 = require("../../../../anyspend/react");
 const react_2 = require("../../../../global-account/react");
 const payment_utils_1 = require("../../../../shared/utils/payment.utils");
 const react_stripe_js_1 = require("@stripe/react-stripe-js");
@@ -40,11 +40,13 @@ function StripeErrorState({ error }) {
 function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
     const stripe = (0, react_stripe_js_1.useStripe)();
     const elements = (0, react_stripe_js_1.useElements)();
+    const setB3ModalOpen = (0, react_2.useModalStore)(state => state.setB3ModalOpen);
     const [loading, setLoading] = (0, react_3.useState)(false);
     const [message, setMessage] = (0, react_3.useState)(null);
     const [amount, setAmount] = (0, react_3.useState)(null);
     const [stripeReady, setStripeReady] = (0, react_3.useState)(false);
     const [showHowItWorks, setShowHowItWorks] = (0, react_3.useState)(false);
+    const [showAddressElement, setShowAddressElement] = (0, react_3.useState)(false);
     (0, react_3.useEffect)(() => {
         if (stripe && elements) {
             setStripeReady(true);
@@ -68,6 +70,12 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
         };
         fetchPaymentIntent();
     }, [clientSecret, stripe]);
+    // Handle payment element changes
+    const handlePaymentElementChange = (event) => {
+        // 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");
+    };
     const handleSubmit = async (e) => {
         e.preventDefault();
         if (!stripe || !elements) {
@@ -78,25 +86,29 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
         setMessage(null);
         try {
             console.log("@@stripe-web2-payment:confirming-payment:", JSON.stringify({ orderId: order.id }, null, 2));
-            const { error, paymentIntent } = await stripe.confirmPayment({
+            const result = (await stripe.confirmPayment({
                 elements,
-                redirect: "if_required",
-            });
-            if (error) {
-                console.error("@@stripe-web2-payment:error:", JSON.stringify(error, null, 2));
-                setMessage(error.message || "An unexpected error occurred.");
-            }
-            else if (paymentIntent && paymentIntent.status === "succeeded") {
-                console.log("@@stripe-web2-payment:success:", JSON.stringify({ orderId: order.id, paymentIntentId: paymentIntent.id }, null, 2));
-                // Payment succeeded without redirect - handle success in the modal
-                setMessage(null);
-                // Add waitingForDeposit=true to query params
-                const currentUrl = new URL(window.location.href);
-                currentUrl.searchParams.set("waitingForDeposit", "true");
-                window.history.replaceState(null, "", currentUrl.toString());
-                // Call the success callback if provided
-                onPaymentSuccess?.(paymentIntent);
+                confirmParams: {
+                    return_url: `${window.location.origin}/?orderId=${order.id}&waitingForDeposit=true&fromStripe=true`,
+                },
+            }));
+            if (result.error) {
+                // This point will only be reached if there is an immediate error.
+                // Otherwise, the customer will be redirected to the `return_url`.
+                console.error("@@stripe-web2-payment:error:", JSON.stringify(result.error, null, 2));
+                setMessage(result.error.message || "An unexpected error occurred.");
+                return;
             }
+            // At this point TypeScript knows result.paymentIntent exists and error is undefined
+            console.log("@@stripe-web2-payment:success:", JSON.stringify({ orderId: order.id, paymentIntentId: result.paymentIntent.id }, null, 2));
+            // Payment succeeded without redirect - handle success in the modal
+            setMessage(null);
+            // Add waitingForDeposit=true to query params
+            const currentUrl = new URL(window.location.href);
+            currentUrl.searchParams.set("waitingForDeposit", "true");
+            window.history.replaceState(null, "", currentUrl.toString());
+            // Call the success callback if provided
+            onPaymentSuccess?.(result.paymentIntent);
         }
         catch (error) {
             console.error("@@stripe-web2-payment:confirmation-error:", JSON.stringify(error, null, 2));
@@ -106,17 +118,27 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
             setLoading(false);
         }
     };
+    // Handle 3DS redirect
+    (0, react_3.useEffect)(() => {
+        // Check if we're returning from Stripe
+        const url = new URL(window.location.href);
+        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);
+            // Clean up URL params
+            url.searchParams.delete("fromStripe");
+            window.history.replaceState({}, "", url.toString());
+        }
+    }, [setB3ModalOpen]);
     if (!stripeReady) {
         return (0, jsx_runtime_1.jsx)(StripeLoadingState, {});
     }
     const stripeElementOptions = {
         layout: "tabs",
-        defaultValues: {
-            billingDetails: {
-                name: "",
-                email: "",
-            },
-        },
         fields: {
             billingDetails: "auto",
         },
@@ -144,7 +166,22 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
                                         const finalAmount = Number(amount);
                                         const calculatedFee = finalAmount - originalAmount;
                                         return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60", children: "Amount" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary", children: ["$", originalAmount.toFixed(2)] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60", children: "Processing fee" }), (0, jsx_runtime_1.jsx)(Tooltip, { content: `Credit card companies charge a processing fee of 5.4% + $0.30 for all transactions.\n\nThis fee covers secure payment processing and fraud protection.`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "text-as-primary/40 hover:text-as-primary/60 h-3 w-3 transition-colors" }) })] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary", children: ["$", calculatedFee.toFixed(2)] })] }), (0, jsx_runtime_1.jsx)("div", { className: "border-as-stroke border-t pt-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: "Total Amount" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary text-2xl font-bold", children: ["$", finalAmount.toFixed(2), " USD"] })] }) })] }));
-                                    })()] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 w-full rounded-2xl p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary mb-4 text-lg font-semibold", children: "Payment Details" }), (0, jsx_runtime_1.jsx)(react_stripe_js_1.PaymentElement, { options: stripeElementOptions })] }), message && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm font-medium", children: message })] })), (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { type: "submit", accentColor: "hsl(var(--as-brand))", disabled: !stripe || !elements || loading, className: "relative w-full py-4 text-lg font-semibold", children: loading ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-current border-t-transparent" }), (0, jsx_runtime_1.jsx)("span", { className: "text-white", children: "Processing Payment..." })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-white", children: "Complete Payment" }), amount && (0, jsx_runtime_1.jsxs)("span", { className: "text-white/90", children: ["$", Number(amount).toFixed(2)] })] })) })] }), showHowItWorks && ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 relative max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-2xl p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-6 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-semibold", children: "How it works" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowHowItWorks(false), className: "text-as-primary/60 hover:text-as-primary transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-6 w-6" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsx)(PaymentMethodIcons_1.default, {}), (0, jsx_runtime_1.jsx)(HowItWorks_1.default, { steps: howItWorksSteps })] })] }) }))] }));
+                                    })()] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 w-full rounded-2xl p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary mb-4 text-lg font-semibold", children: "Payment Details" }), (0, jsx_runtime_1.jsx)(react_stripe_js_1.PaymentElement, { onChange: handlePaymentElementChange, options: stripeElementOptions }), showAddressElement && ((0, jsx_runtime_1.jsx)(react_stripe_js_1.AddressElement, { options: {
+                                    mode: "billing",
+                                    fields: {
+                                        phone: "always",
+                                    },
+                                    // More granular control
+                                    display: {
+                                        name: "split", // or 'split' for first/last name separately
+                                    },
+                                    // Validation
+                                    validation: {
+                                        phone: {
+                                            required: "auto", // or 'always', 'never'
+                                        },
+                                    },
+                                } }))] }), message && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm font-medium", children: message })] })), (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { type: "submit", accentColor: "hsl(var(--as-brand))", disabled: !stripe || !elements || loading, className: "relative w-full py-4 text-lg font-semibold", children: loading ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-current border-t-transparent" }), (0, jsx_runtime_1.jsx)("span", { className: "text-white", children: "Processing Payment..." })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-white", children: "Complete Payment" }), amount && (0, jsx_runtime_1.jsxs)("span", { className: "text-white/90", children: ["$", Number(amount).toFixed(2)] })] })) })] }), showHowItWorks && ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 relative max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-2xl p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-6 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-semibold", children: "How it works" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowHowItWorks(false), className: "text-as-primary/60 hover:text-as-primary transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-6 w-6" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsx)(PaymentMethodIcons_1.default, {}), (0, jsx_runtime_1.jsx)(HowItWorks_1.default, { steps: howItWorksSteps })] })] }) }))] }));
 }
 // Add tooltip component
 function Tooltip({ children, content }) {

package/dist/cjs/anyspend/react/components/webview/WebviewOnrampPayment.js

@@ -22,6 +22,7 @@ function StripePaymentForm({ order, onPaymentSuccess, }) {
     const elements = (0, react_stripe_js_1.useElements)();
     const [isProcessing, setIsProcessing] = (0, react_2.useState)(false);
     const [error, setError] = (0, react_2.useState)(null);
+    const [showAddressElement, setShowAddressElement] = (0, react_2.useState)(false);
     const handleSubmit = async (e) => {
         e.preventDefault();
         if (!stripe || !elements) {
@@ -51,16 +52,38 @@ function StripePaymentForm({ order, onPaymentSuccess, }) {
             setIsProcessing(false);
         }
     };
+    // Handle payment element changes
+    const handlePaymentElementChange = (event) => {
+        // 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");
+    };
     const stripeElementOptions = {
         layout: "tabs",
-        defaultValues: {
-            billingDetails: {
-                name: "",
-                email: "",
-            },
+        fields: {
+            billingDetails: "auto",
+        },
+        wallets: {
+            applePay: "auto",
+            googlePay: "auto",
         },
     };
-    return ((0, jsx_runtime_1.jsx)("form", { onSubmit: handleSubmit, className: "w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "overflow-hidden rounded-xl bg-white", children: (0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "mb-4 text-lg font-semibold", children: "Payment Details" }), (0, jsx_runtime_1.jsx)(react_stripe_js_1.PaymentElement, { options: stripeElementOptions }), error && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600", children: error })), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: !stripe || isProcessing, className: "mt-6 w-full rounded-xl bg-blue-600 px-4 py-3 font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50", children: isProcessing ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Processing..." })] })) : ((0, jsx_runtime_1.jsx)("span", { children: "Complete Payment" })) })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)("form", { onSubmit: handleSubmit, className: "w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "overflow-hidden rounded-xl bg-white", children: (0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "mb-4 text-lg font-semibold", children: "Payment Details" }), (0, jsx_runtime_1.jsx)(react_stripe_js_1.PaymentElement, { options: stripeElementOptions, onChange: handlePaymentElementChange }), showAddressElement && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.AddressElement, { options: {
+                                mode: "billing",
+                                fields: {
+                                    phone: "always",
+                                },
+                                // More granular control
+                                display: {
+                                    name: "split", // or 'split' for first/last name separately
+                                },
+                                // Validation
+                                validation: {
+                                    phone: {
+                                        required: "auto", // or 'always', 'never'
+                                    },
+                                },
+                            } }) })), error && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600", children: error })), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: !stripe || isProcessing, className: "mt-6 w-full rounded-xl bg-blue-600 px-4 py-3 font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50", children: isProcessing ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Processing..." })] })) : ((0, jsx_runtime_1.jsx)("span", { children: "Complete Payment" })) })] }) }) }));
 }
 function WebviewOnrampPayment({ srcAmountOnRamp, recipientAddress, destinationToken, anyspendQuote, onPaymentSuccess, userId, partnerId, }) {
     const [stableAmountForGeo, setStableAmountForGeo] = (0, react_2.useState)(srcAmountOnRamp);

package/dist/cjs/anyspend/react/providers/AnyspendProvider.d.ts

@@ -11,6 +11,7 @@ interface AnyspendProviderProps {
  * - Optimized for performance with React.memo
  * - Safe to use at the application root
  * - Configures sensible defaults for query caching
+ * - Handles Stripe payment redirects and modal state
  *
  * @example
  * ```tsx

package/dist/cjs/anyspend/react/providers/AnyspendProvider.js

@@ -6,6 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../global-account/react");
 const react_query_1 = require("@tanstack/react-query");
 const react_2 = require("react");
+const StripeRedirectHandler_1 = require("./StripeRedirectHandler");
 const defaultQueryClientConfig = {
     defaultOptions: {
         queries: {
@@ -24,6 +25,7 @@ const defaultQueryClientConfig = {
  * - Optimized for performance with React.memo
  * - Safe to use at the application root
  * - Configures sensible defaults for query caching
+ * - Handles Stripe payment redirects and modal state
  *
  * @example
  * ```tsx
@@ -38,6 +40,6 @@ const defaultQueryClientConfig = {
  */
 const AnyspendProvider = function AnyspendProvider({ children }) {
     const [queryClient] = (0, react_2.useState)(() => new react_query_1.QueryClient(defaultQueryClientConfig));
-    return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(react_1.TooltipProvider, { children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsxs)(react_1.TooltipProvider, { children: [(0, jsx_runtime_1.jsx)(StripeRedirectHandler_1.StripeRedirectHandler, {}), children] }) }));
 };
 exports.AnyspendProvider = AnyspendProvider;

package/dist/cjs/anyspend/react/providers/StripeRedirectHandler.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Handles Stripe payment redirects by showing the order details modal
+ * when returning from Stripe's payment flow.
+ *
+ * This component should be mounted inside AnyspendProvider to ensure
+ * proper modal state management.
+ */
+export declare function StripeRedirectHandler(): null;

package/dist/cjs/anyspend/react/providers/StripeRedirectHandler.js

@@ -0,0 +1,41 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StripeRedirectHandler = StripeRedirectHandler;
+const react_1 = require("../../../global-account/react");
+const react_2 = require("react");
+/**
+ * Handles Stripe payment redirects by showing the order details modal
+ * when returning from Stripe's payment flow.
+ *
+ * This component should be mounted inside AnyspendProvider to ensure
+ * proper modal state management.
+ */
+function StripeRedirectHandler() {
+    const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
+    const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
+    (0, react_2.useEffect)(() => {
+        const url = new URL(window.location.href);
+        const fromStripe = url.searchParams.get("fromStripe");
+        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);
+            setB3ModalContentType({
+                type: "anyspendOrderDetails",
+                orderId,
+            });
+            // Clean up URL params
+            url.searchParams.delete("fromStripe");
+            url.searchParams.delete("payment_intent");
+            url.searchParams.delete("payment_intent_client_secret");
+            url.searchParams.delete("redirect_status");
+            window.history.replaceState({}, "", url.toString());
+        }
+    }, [setB3ModalOpen, setB3ModalContentType]);
+    return null;
+}

package/dist/cjs/global-account/react/components/ui/dialog.js

@@ -53,7 +53,7 @@ exports.DialogOverlay = DialogOverlay;
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef(({ className, children, hideCloseButton = false, closeBtnClassName, ...props }, ref) => {
     const container = typeof window !== "undefined" ? document.getElementById("b3-root") : null;
-    return ((0, jsx_runtime_1.jsxs)(DialogPortal, { container: container, children: [(0, jsx_runtime_1.jsx)(DialogOverlay, {}), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("bg-b3-react-background fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg !outline-none", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-500", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", "data-[state=closed]:[transform:rotateX(10deg)] data-[state=open]:[transform:rotateX(0deg)]", "[perspective:1200px] [transform-style:preserve-3d] sm:rounded-xl", "transition-all ease-out", className), ...props, children: [children, !hideCloseButton && ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Close, { className: (0, utils_1.cn)("data-[state=open]:bg-b3-react-background data-[state=open]:text-b3-react-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400", closeBtnClassName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(DialogPortal, { container: container, children: [(0, jsx_runtime_1.jsx)(DialogOverlay, {}), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("bg-b3-react-background fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg !outline-none", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-500", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", "[perspective:1200px] [transform-style:preserve-3d] sm:rounded-xl", "transition-all ease-out", className), ...props, children: [children, !hideCloseButton && ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Close, { className: (0, utils_1.cn)("data-[state=open]:bg-b3-react-background data-[state=open]:text-b3-react-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400", closeBtnClassName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] }))] })] }));
 });
 exports.DialogContent = DialogContent;
 DialogContent.displayName = DialogPrimitive.Content.displayName;

package/dist/esm/anyspend/react/components/common/PaymentStripeWeb2.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { USDC_BASE } from "../../../../anyspend/index.js";
-import { useStripeClientSecret } from "../../../../anyspend/react/index.js";
 import { STRIPE_CONFIG } from "../../../../anyspend/constants/index.js";
-import { ShinyButton, useB3 } from "../../../../global-account/react/index.js";
+import { useStripeClientSecret } from "../../../../anyspend/react/index.js";
+import { ShinyButton, useB3, useModalStore } from "../../../../global-account/react/index.js";
 import { formatStripeAmount } from "../../../../shared/utils/payment.utils.js";
-import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 import { HelpCircle, Info, X } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -34,11 +34,13 @@ function StripeErrorState({ error }) {
 function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
     const stripe = useStripe();
     const elements = useElements();
+    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
     const [loading, setLoading] = useState(false);
     const [message, setMessage] = useState(null);
     const [amount, setAmount] = useState(null);
     const [stripeReady, setStripeReady] = useState(false);
     const [showHowItWorks, setShowHowItWorks] = useState(false);
+    const [showAddressElement, setShowAddressElement] = useState(false);
     useEffect(() => {
         if (stripe && elements) {
             setStripeReady(true);
@@ -62,6 +64,12 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
         };
         fetchPaymentIntent();
     }, [clientSecret, stripe]);
+    // Handle payment element changes
+    const handlePaymentElementChange = (event) => {
+        // 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");
+    };
     const handleSubmit = async (e) => {
         e.preventDefault();
         if (!stripe || !elements) {
@@ -72,25 +80,29 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
         setMessage(null);
         try {
             console.log("@@stripe-web2-payment:confirming-payment:", JSON.stringify({ orderId: order.id }, null, 2));
-            const { error, paymentIntent } = await stripe.confirmPayment({
+            const result = (await stripe.confirmPayment({
                 elements,
-                redirect: "if_required",
-            });
-            if (error) {
-                console.error("@@stripe-web2-payment:error:", JSON.stringify(error, null, 2));
-                setMessage(error.message || "An unexpected error occurred.");
-            }
-            else if (paymentIntent && paymentIntent.status === "succeeded") {
-                console.log("@@stripe-web2-payment:success:", JSON.stringify({ orderId: order.id, paymentIntentId: paymentIntent.id }, null, 2));
-                // Payment succeeded without redirect - handle success in the modal
-                setMessage(null);
-                // Add waitingForDeposit=true to query params
-                const currentUrl = new URL(window.location.href);
-                currentUrl.searchParams.set("waitingForDeposit", "true");
-                window.history.replaceState(null, "", currentUrl.toString());
-                // Call the success callback if provided
-                onPaymentSuccess?.(paymentIntent);
+                confirmParams: {
+                    return_url: `${window.location.origin}/?orderId=${order.id}&waitingForDeposit=true&fromStripe=true`,
+                },
+            }));
+            if (result.error) {
+                // This point will only be reached if there is an immediate error.
+                // Otherwise, the customer will be redirected to the `return_url`.
+                console.error("@@stripe-web2-payment:error:", JSON.stringify(result.error, null, 2));
+                setMessage(result.error.message || "An unexpected error occurred.");
+                return;
             }
+            // At this point TypeScript knows result.paymentIntent exists and error is undefined
+            console.log("@@stripe-web2-payment:success:", JSON.stringify({ orderId: order.id, paymentIntentId: result.paymentIntent.id }, null, 2));
+            // Payment succeeded without redirect - handle success in the modal
+            setMessage(null);
+            // Add waitingForDeposit=true to query params
+            const currentUrl = new URL(window.location.href);
+            currentUrl.searchParams.set("waitingForDeposit", "true");
+            window.history.replaceState(null, "", currentUrl.toString());
+            // Call the success callback if provided
+            onPaymentSuccess?.(result.paymentIntent);
         }
         catch (error) {
             console.error("@@stripe-web2-payment:confirmation-error:", JSON.stringify(error, null, 2));
@@ -100,17 +112,27 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
             setLoading(false);
         }
     };
+    // Handle 3DS redirect
+    useEffect(() => {
+        // Check if we're returning from Stripe
+        const url = new URL(window.location.href);
+        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);
+            // Clean up URL params
+            url.searchParams.delete("fromStripe");
+            window.history.replaceState({}, "", url.toString());
+        }
+    }, [setB3ModalOpen]);
     if (!stripeReady) {
         return _jsx(StripeLoadingState, {});
     }
     const stripeElementOptions = {
         layout: "tabs",
-        defaultValues: {
-            billingDetails: {
-                name: "",
-                email: "",
-            },
-        },
         fields: {
             billingDetails: "auto",
         },
@@ -138,7 +160,22 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
                                         const finalAmount = Number(amount);
                                         const calculatedFee = finalAmount - originalAmount;
                                         return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsx("span", { className: "text-as-primary/60", children: "Amount" }), _jsxs("span", { className: "text-as-primary", children: ["$", originalAmount.toFixed(2)] })] }), _jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-as-primary/60", children: "Processing fee" }), _jsx(Tooltip, { content: `Credit card companies charge a processing fee of 5.4% + $0.30 for all transactions.\n\nThis fee covers secure payment processing and fraud protection.`, children: _jsx(Info, { className: "text-as-primary/40 hover:text-as-primary/60 h-3 w-3 transition-colors" }) })] }), _jsxs("span", { className: "text-as-primary", children: ["$", calculatedFee.toFixed(2)] })] }), _jsx("div", { className: "border-as-stroke border-t pt-2", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-primary font-semibold", children: "Total Amount" }), _jsxs("span", { className: "text-as-primary text-2xl font-bold", children: ["$", finalAmount.toFixed(2), " USD"] })] }) })] }));
-                                    })()] }))] }), _jsxs("div", { className: "bg-as-on-surface-1 w-full rounded-2xl p-6", children: [_jsx("div", { className: "text-as-primary mb-4 text-lg font-semibold", children: "Payment Details" }), _jsx(PaymentElement, { options: stripeElementOptions })] }), message && (_jsxs("div", { className: "bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4", children: [_jsx("div", { className: "bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: _jsx("svg", { className: "h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx("div", { className: "text-as-red text-sm font-medium", children: message })] })), _jsx(ShinyButton, { type: "submit", accentColor: "hsl(var(--as-brand))", disabled: !stripe || !elements || loading, className: "relative w-full py-4 text-lg font-semibold", children: loading ? (_jsxs("div", { className: "flex items-center justify-center gap-3", children: [_jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-current border-t-transparent" }), _jsx("span", { className: "text-white", children: "Processing Payment..." })] })) : (_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx("span", { className: "text-white", children: "Complete Payment" }), amount && _jsxs("span", { className: "text-white/90", children: ["$", Number(amount).toFixed(2)] })] })) })] }), showHowItWorks && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: _jsxs("div", { className: "bg-as-on-surface-1 relative max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-2xl p-6", children: [_jsxs("div", { className: "mb-6 flex items-center justify-between", children: [_jsx("h2", { className: "text-as-primary text-xl font-semibold", children: "How it works" }), _jsx("button", { onClick: () => setShowHowItWorks(false), className: "text-as-primary/60 hover:text-as-primary transition-colors", children: _jsx(X, { className: "h-6 w-6" }) })] }), _jsxs("div", { className: "space-y-6", children: [_jsx(PaymentMethodIcons, {}), _jsx(HowItWorks, { steps: howItWorksSteps })] })] }) }))] }));
+                                    })()] }))] }), _jsxs("div", { className: "bg-as-on-surface-1 w-full rounded-2xl p-6", children: [_jsx("div", { className: "text-as-primary mb-4 text-lg font-semibold", children: "Payment Details" }), _jsx(PaymentElement, { onChange: handlePaymentElementChange, options: stripeElementOptions }), showAddressElement && (_jsx(AddressElement, { options: {
+                                    mode: "billing",
+                                    fields: {
+                                        phone: "always",
+                                    },
+                                    // More granular control
+                                    display: {
+                                        name: "split", // or 'split' for first/last name separately
+                                    },
+                                    // Validation
+                                    validation: {
+                                        phone: {
+                                            required: "auto", // or 'always', 'never'
+                                        },
+                                    },
+                                } }))] }), message && (_jsxs("div", { className: "bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4", children: [_jsx("div", { className: "bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: _jsx("svg", { className: "h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx("div", { className: "text-as-red text-sm font-medium", children: message })] })), _jsx(ShinyButton, { type: "submit", accentColor: "hsl(var(--as-brand))", disabled: !stripe || !elements || loading, className: "relative w-full py-4 text-lg font-semibold", children: loading ? (_jsxs("div", { className: "flex items-center justify-center gap-3", children: [_jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-current border-t-transparent" }), _jsx("span", { className: "text-white", children: "Processing Payment..." })] })) : (_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx("span", { className: "text-white", children: "Complete Payment" }), amount && _jsxs("span", { className: "text-white/90", children: ["$", Number(amount).toFixed(2)] })] })) })] }), showHowItWorks && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: _jsxs("div", { className: "bg-as-on-surface-1 relative max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-2xl p-6", children: [_jsxs("div", { className: "mb-6 flex items-center justify-between", children: [_jsx("h2", { className: "text-as-primary text-xl font-semibold", children: "How it works" }), _jsx("button", { onClick: () => setShowHowItWorks(false), className: "text-as-primary/60 hover:text-as-primary transition-colors", children: _jsx(X, { className: "h-6 w-6" }) })] }), _jsxs("div", { className: "space-y-6", children: [_jsx(PaymentMethodIcons, {}), _jsx(HowItWorks, { steps: howItWorksSteps })] })] }) }))] }));
 }
 // Add tooltip component
 function Tooltip({ children, content }) {

package/dist/esm/anyspend/react/components/webview/WebviewOnrampPayment.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getChainName, STRIPE_CONFIG } from "../../../../anyspend/index.js";
 import { useAnyspendCreateOnrampOrder, useGeoOnrampOptions, useStripeClientSecret } from "../../../../anyspend/react/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
-import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 import { motion } from "framer-motion";
 import { Loader2 } from "lucide-react";
@@ -16,6 +16,7 @@ function StripePaymentForm({ order, onPaymentSuccess, }) {
     const elements = useElements();
     const [isProcessing, setIsProcessing] = useState(false);
     const [error, setError] = useState(null);
+    const [showAddressElement, setShowAddressElement] = useState(false);
     const handleSubmit = async (e) => {
         e.preventDefault();
         if (!stripe || !elements) {
@@ -45,16 +46,38 @@ function StripePaymentForm({ order, onPaymentSuccess, }) {
             setIsProcessing(false);
         }
     };
+    // Handle payment element changes
+    const handlePaymentElementChange = (event) => {
+        // 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");
+    };
     const stripeElementOptions = {
         layout: "tabs",
-        defaultValues: {
-            billingDetails: {
-                name: "",
-                email: "",
-            },
+        fields: {
+            billingDetails: "auto",
+        },
+        wallets: {
+            applePay: "auto",
+            googlePay: "auto",
         },
     };
-    return (_jsx("form", { onSubmit: handleSubmit, className: "w-full", children: _jsx("div", { className: "overflow-hidden rounded-xl bg-white", children: _jsxs("div", { className: "px-6 py-4", children: [_jsx("h2", { className: "mb-4 text-lg font-semibold", children: "Payment Details" }), _jsx(PaymentElement, { options: stripeElementOptions }), error && (_jsx("div", { className: "mt-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600", children: error })), _jsx("button", { type: "submit", disabled: !stripe || isProcessing, className: "mt-6 w-full rounded-xl bg-blue-600 px-4 py-3 font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50", children: isProcessing ? (_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx(Loader2, { className: "h-5 w-5 animate-spin" }), _jsx("span", { children: "Processing..." })] })) : (_jsx("span", { children: "Complete Payment" })) })] }) }) }));
+    return (_jsx("form", { onSubmit: handleSubmit, className: "w-full", children: _jsx("div", { className: "overflow-hidden rounded-xl bg-white", children: _jsxs("div", { className: "px-6 py-4", children: [_jsx("h2", { className: "mb-4 text-lg font-semibold", children: "Payment Details" }), _jsx(PaymentElement, { options: stripeElementOptions, onChange: handlePaymentElementChange }), showAddressElement && (_jsx("div", { className: "mt-4", children: _jsx(AddressElement, { options: {
+                                mode: "billing",
+                                fields: {
+                                    phone: "always",
+                                },
+                                // More granular control
+                                display: {
+                                    name: "split", // or 'split' for first/last name separately
+                                },
+                                // Validation
+                                validation: {
+                                    phone: {
+                                        required: "auto", // or 'always', 'never'
+                                    },
+                                },
+                            } }) })), error && (_jsx("div", { className: "mt-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600", children: error })), _jsx("button", { type: "submit", disabled: !stripe || isProcessing, className: "mt-6 w-full rounded-xl bg-blue-600 px-4 py-3 font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50", children: isProcessing ? (_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx(Loader2, { className: "h-5 w-5 animate-spin" }), _jsx("span", { children: "Processing..." })] })) : (_jsx("span", { children: "Complete Payment" })) })] }) }) }));
 }
 export function WebviewOnrampPayment({ srcAmountOnRamp, recipientAddress, destinationToken, anyspendQuote, onPaymentSuccess, userId, partnerId, }) {
     const [stableAmountForGeo, setStableAmountForGeo] = useState(srcAmountOnRamp);

package/dist/esm/anyspend/react/providers/AnyspendProvider.d.ts

@@ -11,6 +11,7 @@ interface AnyspendProviderProps {
  * - Optimized for performance with React.memo
  * - Safe to use at the application root
  * - Configures sensible defaults for query caching
+ * - Handles Stripe payment redirects and modal state
  *
  * @example
  * ```tsx

package/dist/esm/anyspend/react/providers/AnyspendProvider.js

@@ -1,8 +1,9 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TooltipProvider } from "../../../global-account/react/index.js";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useState } from "react";
+import { StripeRedirectHandler } from "./StripeRedirectHandler.js";
 const defaultQueryClientConfig = {
     defaultOptions: {
         queries: {
@@ -21,6 +22,7 @@ const defaultQueryClientConfig = {
  * - Optimized for performance with React.memo
  * - Safe to use at the application root
  * - Configures sensible defaults for query caching
+ * - Handles Stripe payment redirects and modal state
  *
  * @example
  * ```tsx
@@ -35,5 +37,5 @@ const defaultQueryClientConfig = {
  */
 export const AnyspendProvider = function AnyspendProvider({ children }) {
     const [queryClient] = useState(() => new QueryClient(defaultQueryClientConfig));
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(TooltipProvider, { children: children }) }));
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(TooltipProvider, { children: [_jsx(StripeRedirectHandler, {}), children] }) }));
 };

package/dist/esm/anyspend/react/providers/StripeRedirectHandler.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Handles Stripe payment redirects by showing the order details modal
+ * when returning from Stripe's payment flow.
+ *
+ * This component should be mounted inside AnyspendProvider to ensure
+ * proper modal state management.
+ */
+export declare function StripeRedirectHandler(): null;

package/dist/esm/anyspend/react/providers/StripeRedirectHandler.js

@@ -0,0 +1,38 @@
+"use client";
+import { useModalStore } from "../../../global-account/react/index.js";
+import { useEffect } from "react";
+/**
+ * Handles Stripe payment redirects by showing the order details modal
+ * when returning from Stripe's payment flow.
+ *
+ * This component should be mounted inside AnyspendProvider to ensure
+ * proper modal state management.
+ */
+export function StripeRedirectHandler() {
+    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+    const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+    useEffect(() => {
+        const url = new URL(window.location.href);
+        const fromStripe = url.searchParams.get("fromStripe");
+        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);
+            setB3ModalContentType({
+                type: "anyspendOrderDetails",
+                orderId,
+            });
+            // Clean up URL params
+            url.searchParams.delete("fromStripe");
+            url.searchParams.delete("payment_intent");
+            url.searchParams.delete("payment_intent_client_secret");
+            url.searchParams.delete("redirect_status");
+            window.history.replaceState({}, "", url.toString());
+        }
+    }, [setB3ModalOpen, setB3ModalContentType]);
+    return null;
+}