@coin-voyage/paykit 2.4.5-beta.3 → 2.4.5-beta.4

package/dist/components/Pages/CardPayment/index.d.ts

@@ -1,6 +1,8 @@
+import type { StripeOnramp } from "@stripe/crypto/types";
+import { type ReactNode } from "react";
 export default function CardPayment(): import("react/jsx-runtime").JSX.Element;
-export declare const CryptoElements: ({ stripeOnramp, children }: {
-    stripeOnramp: any;
-    children: any;
+export declare const CryptoElements: ({ stripeOnramp, children, }: {
+    stripeOnramp: StripeOnramp | Promise<StripeOnramp | null>;
+    children: ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const useStripeOnramp: () => any;
+export declare const useStripeOnrampContext: () => StripeOnramp | null | undefined;

package/dist/components/Pages/CardPayment/index.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getFiatPaymentData } from "@coin-voyage/shared/payment";
 import { PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
+import { loadStripeOnramp } from "@stripe/crypto";
 import { useQuery } from "@tanstack/react-query";
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { AlertIcon } from "../../../assets/icons";
@@ -14,11 +15,7 @@ import { OrderHeader } from "../../ui/OrderHeader";
 import PoweredByFooter from "../../ui/PoweredByFooter";
 import { Spinner } from "../../ui/Spinner";
 export default function CardPayment() {
-    const { triggerResize } = usePayContext();
     const { data, isLoading, error, refetch } = useCardPaymentData();
-    useEffect(() => {
-        triggerResize();
-    }, [triggerResize, isLoading, data?.session_id, data?.client_secret, error]);
     return (_jsxs(PageContent, { children: [_jsx(OrderHeader, { minified: true }), _jsx(CardPaymentContent, { paymentData: data, isLoading: isLoading, error: error instanceof Error ? error : null, onRetry: () => {
                     void refetch();
                 } }), _jsx(PoweredByFooter, {})] }));
@@ -66,33 +63,13 @@ function StatusCard({ title, body, actionLabel, onAction, loading = false, warni
 }
 function StripeOnrampCheckout({ paymentData }) {
     const { mode, triggerResize } = usePayContext();
-    //const { data: stripeOnramp, isLoading, error, refetch } = useStripeOnramp(paymentData.stripe_publishable_key)
+    const { data: stripeOnramp, isLoading, error, refetch } = useLoadStripeOnramp(paymentData.stripe_publishable_key);
     const refreshDebounceRef = useRef(null);
     const appearance = useMemo(() => {
         return {
-            theme: mode === "dark" ? "night" : "stripe",
-            variables: {
-                colorBackground: "var(--ck-body-background-secondary)",
-            },
+            theme: mode === "dark" ? "dark" : "light",
         };
     }, [mode]);
-    // const handleSessionUpdate = useCallback(
-    //   (status: OnrampSessionStatus) => {
-    //     if (status === lastStatusRef.current) return
-    //     lastStatusRef.current = status
-    //     const shouldRefresh = status === "fulfillment_complete" || status === "rejected"
-    //     if (!shouldRefresh) {
-    //       return
-    //     }
-    //     if (refreshDebounceRef.current) {
-    //       window.clearTimeout(refreshDebounceRef.current)
-    //     }
-    //     refreshDebounceRef.current = window.setTimeout(() => {
-    //       void refreshOrderRef.current()
-    //     }, 500)
-    //   },
-    //   [refreshOrderRef]
-    // )
     useEffect(() => {
         return () => {
             if (refreshDebounceRef.current) {
@@ -100,23 +77,18 @@ function StripeOnrampCheckout({ paymentData }) {
             }
         };
     }, []);
-    // if (error) {
-    //   return (
-    //     <StatusCard
-    //       warning
-    //       title="Stripe unavailable"
-    //       body={error.message}
-    //       actionLabel="Try again"
-    //       onAction={() => {
-    //         void refetch()
-    //       }}
-    //     />
-    //   )
-    // }
-    return (_jsx(OnrampShell, { children: paymentData.client_secret ? (_jsx(OnrampElement, { id: "onramp-element", clientSecret: paymentData.client_secret, appearance: appearance, onReady: triggerResize })) : (_jsx(OnrampOverlay, { children: _jsx(Spinner, {}) })) }));
+    useEffect(() => {
+        triggerResize();
+    }, [error, isLoading, stripeOnramp, triggerResize]);
+    if (error) {
+        return (_jsx(StatusCard, { warning: true, title: "Stripe unavailable", body: error.message, actionLabel: "Try again", onAction: () => {
+                void refetch();
+            } }));
+    }
+    return (_jsxs(OnrampShell, { children: [isLoading ? (_jsx(OnrampOverlay, { children: _jsx(Spinner, {}) })) : null, paymentData.client_secret && stripeOnramp ? (_jsx(CryptoElements, { stripeOnramp: stripeOnramp, children: _jsx(OnrampElement, { id: "onramp-element", clientSecret: paymentData.client_secret, appearance: appearance, onReady: triggerResize }) })) : (_jsx(OnrampOverlay, { children: _jsx(Spinner, {}) }))] }));
 }
 function OnrampElement({ clientSecret, appearance, onReady, onChange, ...props }) {
-    const stripeOnramp = useStripeOnramp();
+    const stripeOnramp = useStripeOnrampContext();
     const onrampElementRef = useRef(null);
     const [session, setSession] = useState();
     const appearanceJSON = JSON.stringify(appearance);
@@ -138,7 +110,7 @@ function OnrampElement({ clientSecret, appearance, onReady, onChange, ...props }
     }, [appearanceJSON, clientSecret, stripeOnramp]);
     useOnrampSessionListener("onramp_ui_loaded", session, onReady);
     useOnrampSessionListener("onramp_session_updated", session, onChange);
-    return _jsx("div", { ...props, ref: onrampElementRef });
+    return _jsx(OnrampMount, { ...props, ref: onrampElementRef });
 }
 function useCardPaymentData() {
     const { paymentState } = usePayContext();
@@ -169,10 +141,39 @@ function useCardPaymentData() {
         data: paymentData ?? query.data,
     };
 }
+const stripeOnrampPromises = new Map();
+function getStripeOnramp(publishableKey) {
+    const existingPromise = stripeOnrampPromises.get(publishableKey);
+    if (existingPromise) {
+        return existingPromise;
+    }
+    const stripeOnrampPromise = loadStripeOnramp(publishableKey).catch((error) => {
+        stripeOnrampPromises.delete(publishableKey);
+        throw error;
+    });
+    stripeOnrampPromises.set(publishableKey, stripeOnrampPromise);
+    return stripeOnrampPromise;
+}
+function useLoadStripeOnramp(publishableKey) {
+    return useQuery({
+        queryKey: ["stripe-onramp", publishableKey],
+        enabled: Boolean(publishableKey),
+        staleTime: Infinity,
+        retry: 1,
+        refetchOnWindowFocus: false,
+        queryFn: async () => {
+            const stripeOnramp = await getStripeOnramp(publishableKey);
+            if (!stripeOnramp) {
+                throw new Error("Stripe checkout can only be loaded in a browser.");
+            }
+            return stripeOnramp;
+        },
+    });
+}
 // ReactContext to simplify access of StripeOnramp object
 const CryptoElementsContext = createContext(null);
 CryptoElementsContext.displayName = "CryptoElementsContext";
-export const CryptoElements = ({ stripeOnramp, children }) => {
+export const CryptoElements = ({ stripeOnramp, children, }) => {
     const [ctx, setContext] = useState(() => ({
         onramp: null,
     }));
@@ -180,7 +181,7 @@ export const CryptoElements = ({ stripeOnramp, children }) => {
         let isMounted = true;
         Promise.resolve(stripeOnramp).then((onramp) => {
             if (onramp && isMounted) {
-                setContext((ctx) => (ctx.onramp ? ctx : { onramp }));
+                setContext((ctx) => (ctx.onramp === onramp ? ctx : { onramp }));
             }
         });
         return () => {
@@ -190,7 +191,7 @@ export const CryptoElements = ({ stripeOnramp, children }) => {
     return _jsx(CryptoElementsContext.Provider, { value: ctx, children: children });
 };
 // React hook to get StripeOnramp from context
-export const useStripeOnramp = () => {
+export const useStripeOnrampContext = () => {
     const context = useContext(CryptoElementsContext);
     return context?.onramp;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coin-voyage/paykit",
   "description": "Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.",
-  "version": "2.4.5-beta.3",
+  "version": "2.4.5-beta.4",
   "private": false,
   "sideEffects": false,
   "author": "Lars <lars@coinvoyage.io>",