@voyage_ai/v402-web-ts 0.3.0 → 1.0.0

package/dist/react/index.d.mts

@@ -222,6 +222,43 @@ interface UsePaymentInfoReturn {
  */
 declare function usePaymentInfo(merchantId: string, endpoint?: string, additionalParams?: Record<string, any>): UsePaymentInfoReturn;
 
+type ToastType = 'success' | 'error' | 'info';
+interface ToastProps {
+    message: string;
+    type: ToastType;
+    onClose: () => void;
+}
+/**
+ * Toast 通知组件
+ * 使用 Portal 渲染到 document.body
+ */
+declare const Toast: React.FC<ToastProps>;
+
+/**
+ * Toast 管理 Hook
+ * 提供显示 toast 通知的能力
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { showToast, ToastContainer } = useToast();
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => showToast('Success!', 'success')}>
+ *         Show Toast
+ *       </button>
+ *       <ToastContainer />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare const useToast: () => {
+    showToast: (message: string, type: ToastType) => void;
+    ToastContainer: () => React.JSX.Element;
+};
+
 /**
  * WalletConnect Component
  *
@@ -270,11 +307,37 @@ interface WalletSelectModalProps {
 }
 declare function WalletSelectModal({ isOpen, networkType, onSelect, onClose, }: WalletSelectModalProps): React.JSX.Element | null;
 
-interface HeaderInfo {
+interface HeaderInfo$1 {
     title?: string;
     subtitle?: string;
     tooltipText?: string;
 }
+interface V402CheckoutProps$1 {
+    checkoutId: string;
+    headerInfo?: HeaderInfo$1;
+    isModal?: boolean;
+    onPaymentComplete?: (response: any) => void;
+    additionalParams?: Record<string, any>;
+    expectedNetwork?: NetworkType;
+}
+declare function V402Checkout({ checkoutId, headerInfo, isModal, onPaymentComplete, additionalParams, expectedNetwork, }: V402CheckoutProps$1): React.JSX.Element;
+
+/**
+ * Checkout 组件通用类型定义
+ */
+interface HeaderInfo {
+    /** 商品/服务标题，显示在屏幕顶部 */
+    title?: string;
+    /** 品牌名称，传空字符串则不显示品牌区域 */
+    brandName?: string;
+    /** 发票标题，默认为 "V402 PAYMENT" */
+    receiptTitle?: string;
+    /** 悬浮在三个小点上显示的提示文本 */
+    tooltipText?: string;
+}
+/**
+ * V402Checkout 组件 Props (V1)
+ */
 interface V402CheckoutProps {
     checkoutId: string;
     headerInfo?: HeaderInfo;
@@ -283,6 +346,42 @@ interface V402CheckoutProps {
     additionalParams?: Record<string, any>;
     expectedNetwork?: NetworkType;
 }
-declare function V402Checkout({ checkoutId, headerInfo, isModal, onPaymentComplete, additionalParams, expectedNetwork, }: V402CheckoutProps): React.JSX.Element;
+/**
+ * V402CheckoutV2 组件 Props
+ * 简化版本，更直观的配置
+ */
+interface V402CheckoutV2Props {
+    /** Checkout ID */
+    checkoutId: string;
+    /** 头部信息配置 */
+    headerInfo?: HeaderInfo;
+    /** 主题颜色，默认为绿色 #84cc16 */
+    primaryColor?: string;
+    /** 是否作为 Modal 使用 */
+    isModal?: boolean;
+    /** 支付完成回调 */
+    onPaymentComplete?: (response: any) => void;
+    /** 额外参数，会透传给 checkout 配置的回调 */
+    additionalParams?: Record<string, any>;
+    /** 期望的网络类型 */
+    expectedNetwork?: NetworkType;
+}
+
+/**
+ * V402 Checkout V2 组件
+ * 全新设计的支付终端风格界面
+ */
+declare function V402CheckoutV2({ checkoutId, headerInfo, primaryColor, isModal, onPaymentComplete, additionalParams, expectedNetwork, }: V402CheckoutV2Props): React.JSX.Element;
+
+/**
+ * CSS 动画定义
+ * 用于 checkout 组件的各种动画效果
+ */
+declare const checkoutAnimations = "\n    @keyframes spin {\n        from { transform: rotate(0deg); }\n        to { transform: rotate(360deg); }\n    }\n    \n    @keyframes receiptShake {\n        0%, 100% { transform: rotate(-0.3deg); }\n        50% { transform: rotate(0.3deg); }\n    }\n    \n    @keyframes slideInRight {\n        from {\n            opacity: 0;\n            transform: translateX(100px);\n        }\n        to {\n            opacity: 1;\n            transform: translateX(0);\n        }\n    }\n    \n    @keyframes pulse {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0.4; }\n    }\n";
+/**
+ * 动画样式组件
+ * 用于注入 CSS 动画到页面
+ */
+declare const AnimationStyles: () => React.JSX.Element;
 
-export { type UsePageNetworkOptions, type UsePaymentInfoReturn, type UsePaymentReturn, type UseWalletReturn, V402Checkout, type V402CheckoutProps, WalletConnect, type WalletConnectProps, WalletSelectModal, type WalletSelectModalProps, usePageNetwork, usePayment, usePaymentInfo, useWallet };
+export { AnimationStyles, Toast, type ToastProps, type ToastType, type UsePageNetworkOptions, type UsePaymentInfoReturn, type UsePaymentReturn, type UseWalletReturn, V402Checkout, type V402CheckoutProps, V402CheckoutV2, type V402CheckoutV2Props, WalletConnect, type WalletConnectProps, WalletSelectModal, type WalletSelectModalProps, checkoutAnimations, usePageNetwork, usePayment, usePaymentInfo, useToast, useWallet };

package/dist/react/index.d.ts

@@ -222,6 +222,43 @@ interface UsePaymentInfoReturn {
  */
 declare function usePaymentInfo(merchantId: string, endpoint?: string, additionalParams?: Record<string, any>): UsePaymentInfoReturn;
 
+type ToastType = 'success' | 'error' | 'info';
+interface ToastProps {
+    message: string;
+    type: ToastType;
+    onClose: () => void;
+}
+/**
+ * Toast 通知组件
+ * 使用 Portal 渲染到 document.body
+ */
+declare const Toast: React.FC<ToastProps>;
+
+/**
+ * Toast 管理 Hook
+ * 提供显示 toast 通知的能力
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { showToast, ToastContainer } = useToast();
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => showToast('Success!', 'success')}>
+ *         Show Toast
+ *       </button>
+ *       <ToastContainer />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare const useToast: () => {
+    showToast: (message: string, type: ToastType) => void;
+    ToastContainer: () => React.JSX.Element;
+};
+
 /**
  * WalletConnect Component
  *
@@ -270,11 +307,37 @@ interface WalletSelectModalProps {
 }
 declare function WalletSelectModal({ isOpen, networkType, onSelect, onClose, }: WalletSelectModalProps): React.JSX.Element | null;
 
-interface HeaderInfo {
+interface HeaderInfo$1 {
     title?: string;
     subtitle?: string;
     tooltipText?: string;
 }
+interface V402CheckoutProps$1 {
+    checkoutId: string;
+    headerInfo?: HeaderInfo$1;
+    isModal?: boolean;
+    onPaymentComplete?: (response: any) => void;
+    additionalParams?: Record<string, any>;
+    expectedNetwork?: NetworkType;
+}
+declare function V402Checkout({ checkoutId, headerInfo, isModal, onPaymentComplete, additionalParams, expectedNetwork, }: V402CheckoutProps$1): React.JSX.Element;
+
+/**
+ * Checkout 组件通用类型定义
+ */
+interface HeaderInfo {
+    /** 商品/服务标题，显示在屏幕顶部 */
+    title?: string;
+    /** 品牌名称，传空字符串则不显示品牌区域 */
+    brandName?: string;
+    /** 发票标题，默认为 "V402 PAYMENT" */
+    receiptTitle?: string;
+    /** 悬浮在三个小点上显示的提示文本 */
+    tooltipText?: string;
+}
+/**
+ * V402Checkout 组件 Props (V1)
+ */
 interface V402CheckoutProps {
     checkoutId: string;
     headerInfo?: HeaderInfo;
@@ -283,6 +346,42 @@ interface V402CheckoutProps {
     additionalParams?: Record<string, any>;
     expectedNetwork?: NetworkType;
 }
-declare function V402Checkout({ checkoutId, headerInfo, isModal, onPaymentComplete, additionalParams, expectedNetwork, }: V402CheckoutProps): React.JSX.Element;
+/**
+ * V402CheckoutV2 组件 Props
+ * 简化版本，更直观的配置
+ */
+interface V402CheckoutV2Props {
+    /** Checkout ID */
+    checkoutId: string;
+    /** 头部信息配置 */
+    headerInfo?: HeaderInfo;
+    /** 主题颜色，默认为绿色 #84cc16 */
+    primaryColor?: string;
+    /** 是否作为 Modal 使用 */
+    isModal?: boolean;
+    /** 支付完成回调 */
+    onPaymentComplete?: (response: any) => void;
+    /** 额外参数，会透传给 checkout 配置的回调 */
+    additionalParams?: Record<string, any>;
+    /** 期望的网络类型 */
+    expectedNetwork?: NetworkType;
+}
+
+/**
+ * V402 Checkout V2 组件
+ * 全新设计的支付终端风格界面
+ */
+declare function V402CheckoutV2({ checkoutId, headerInfo, primaryColor, isModal, onPaymentComplete, additionalParams, expectedNetwork, }: V402CheckoutV2Props): React.JSX.Element;
+
+/**
+ * CSS 动画定义
+ * 用于 checkout 组件的各种动画效果
+ */
+declare const checkoutAnimations = "\n    @keyframes spin {\n        from { transform: rotate(0deg); }\n        to { transform: rotate(360deg); }\n    }\n    \n    @keyframes receiptShake {\n        0%, 100% { transform: rotate(-0.3deg); }\n        50% { transform: rotate(0.3deg); }\n    }\n    \n    @keyframes slideInRight {\n        from {\n            opacity: 0;\n            transform: translateX(100px);\n        }\n        to {\n            opacity: 1;\n            transform: translateX(0);\n        }\n    }\n    \n    @keyframes pulse {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0.4; }\n    }\n";
+/**
+ * 动画样式组件
+ * 用于注入 CSS 动画到页面
+ */
+declare const AnimationStyles: () => React.JSX.Element;
 
-export { type UsePageNetworkOptions, type UsePaymentInfoReturn, type UsePaymentReturn, type UseWalletReturn, V402Checkout, type V402CheckoutProps, WalletConnect, type WalletConnectProps, WalletSelectModal, type WalletSelectModalProps, usePageNetwork, usePayment, usePaymentInfo, useWallet };
+export { AnimationStyles, Toast, type ToastProps, type ToastType, type UsePageNetworkOptions, type UsePaymentInfoReturn, type UsePaymentReturn, type UseWalletReturn, V402Checkout, type V402CheckoutProps, V402CheckoutV2, type V402CheckoutV2Props, WalletConnect, type WalletConnectProps, WalletSelectModal, type WalletSelectModalProps, checkoutAnimations, usePageNetwork, usePayment, usePaymentInfo, useToast, useWallet };