@seaverse/payment-sdk 0.1.0 → 0.2.0

package/dist/index.browser.js

@@ -4141,29 +4141,25 @@ class PaymentClient {
  */
 /**
  * 环境配置
+ * - development: 开发/测试环境
+ * - production: 生产环境
  */
 const ENV_CONFIG = {
-    develop: {
+    development: {
         apiHost: 'https://aiart-openresty.dev.seaart.dev',
-        iframeUrl: 'https://aiart-payment-page.dev.seaart.dev',
     },
-    release: {
+    production: {
         apiHost: 'https://www.seaart.ai',
-        iframeUrl: 'https://pay.seaart.ai',
     },
 };
 /**
- * SDK CDN 地址
+ * Web Component 加载超时时间（毫秒）
  */
-const SDK_CDN_URL = 'https://image.cdn2.seaart.me/seaart-payment-sdk/1.0.2/seaart-pay-sdk-umd.min.js';
+const COMPONENT_LOAD_TIMEOUT = 15000;
 /**
- * SDK 加载超时时间（毫秒）
+ * Web Component 自定义元素名称
  */
-const SDK_LOAD_TIMEOUT = 15000;
-/**
- * SDK 全局对象名称
- */
-const SDK_GLOBAL_NAME = 'SeaArtPay';
+const PAYMENT_ELEMENT_NAME = 'seaart-payment';
 /**
  * API 端点
  */
@@ -4175,10 +4171,10 @@ const API_ENDPOINTS = {
  * 默认配置
  */
 const DEFAULT_CHECKOUT_CONFIG = {
-    environment: 'develop',
+    environment: 'development',
     debug: false,
     language: 'en',
-    sdkTimeout: SDK_LOAD_TIMEOUT,
+    componentTimeout: COMPONENT_LOAD_TIMEOUT,
 };
 /**
  * HTTP 状态码
@@ -4202,22 +4198,25 @@ const BIZ_CODE = {
 };
 
 /**
- * SeaArtPay SDK 加载器
- * 负责从 CDN 动态加载 SeaArt 支付 SDK
+ * SeaArt Payment Web Component 加载器
+ * 负责动态加载 @seaart/payment-component
  */
 /**
- * SDK 加载器类
+ * Web Component 加载器类
+ *
+ * 负责：
+ * - 动态导入 @seaart/payment-component
+ * - 等待自定义元素注册完成
+ * - 管理加载状态
  */
 class SeaArtPayLoader {
     constructor(config = {}) {
         this.status = 'idle';
-        this.sdk = null;
         this.loadPromise = null;
         this.config = {
-            cdnUrl: config.cdnUrl ?? SDK_CDN_URL,
-            timeout: config.timeout ?? SDK_LOAD_TIMEOUT,
+            timeout: config.timeout ?? COMPONENT_LOAD_TIMEOUT,
             debug: config.debug ?? false,
-            environment: config.environment ?? 'develop',
+            environment: config.environment ?? 'development',
         };
     }
     /**
@@ -4227,38 +4226,49 @@ class SeaArtPayLoader {
         return this.status;
     }
     /**
-     * 检查 SDK 是否已加载
+     * 检查组件是否已加载
      */
     isLoaded() {
-        return this.status === 'loaded' && this.sdk !== null;
+        return this.status === 'loaded';
     }
     /**
-     * 获取 SDK 实例
+     * 检查自定义元素是否已注册
      */
-    getSDK() {
-        return this.sdk;
+    isElementDefined() {
+        if (typeof customElements === 'undefined') {
+            return false;
+        }
+        return customElements.get(PAYMENT_ELEMENT_NAME) !== undefined;
     }
     /**
-     * 加载 SDK
+     * 加载 Web Component
      */
     async load() {
         // 如果已加载，直接返回
-        if (this.sdk) {
-            return this.sdk;
+        if (this.status === 'loaded') {
+            return;
         }
         // 如果正在加载，返回现有的 Promise
         if (this.loadPromise) {
             return this.loadPromise;
         }
+        // 检查是否在浏览器环境
+        if (typeof window === 'undefined' || typeof document === 'undefined') {
+            throw new Error('非浏览器环境，无法加载 Web Component');
+        }
+        // 如果自定义元素已注册，直接标记为已加载
+        if (this.isElementDefined()) {
+            this.status = 'loaded';
+            this.log('Web Component 已注册，跳过加载');
+            return;
+        }
         this.status = 'loading';
-        this.log('开始加载 SeaArtPay SDK...');
-        this.loadPromise = this.loadSDKFromSources();
+        this.log('开始加载 SeaArt Payment Web Component...');
+        this.loadPromise = this.doLoad();
         try {
-            this.sdk = await this.loadPromise;
+            await this.loadPromise;
             this.status = 'loaded';
-            this.initializeSDK();
-            this.log('SDK 加载成功');
-            return this.sdk;
+            this.log('Web Component 加载成功');
         }
         catch (error) {
             this.status = 'error';
@@ -4267,117 +4277,67 @@ class SeaArtPayLoader {
         }
     }
     /**
-     * 从多个源尝试加载 SDK
-     */
-    async loadSDKFromSources() {
-        const sources = [
-            { name: 'CDN', url: this.config.cdnUrl },
-        ];
-        for (const source of sources) {
-            this.log(`尝试从 ${source.name} 加载: ${source.url}`);
-            try {
-                await this.loadScript(source.url);
-                const sdk = this.extractSDKInstance();
-                if (sdk) {
-                    this.log(`成功从 ${source.name} 加载 SDK`);
-                    return sdk;
-                }
-                this.log(`${source.name} 加载的脚本无效`);
-            }
-            catch (error) {
-                this.log(`从 ${source.name} 加载失败: ${error}`);
-            }
-        }
-        throw new Error('所有 SDK 源加载失败');
-    }
-    /**
-     * 动态加载脚本
+     * 执行加载逻辑
      */
-    loadScript(url) {
-        return new Promise((resolve, reject) => {
-            // 检查是否在浏览器环境
-            if (typeof document === 'undefined') {
-                reject(new Error('非浏览器环境，无法加载脚本'));
-                return;
-            }
-            // 检查是否已加载
-            const existingScript = document.querySelector(`script[src="${url}"]`);
-            if (existingScript) {
-                resolve();
-                return;
-            }
-            const script = document.createElement('script');
-            script.src = url;
-            script.async = true;
-            script.setAttribute('data-sdk', 'seaart-payment');
-            const timer = setTimeout(() => {
-                cleanup();
-                reject(new Error(`脚本加载超时: ${url}`));
+    async doLoad() {
+        let timeoutId = null;
+        // 创建超时 Promise
+        const timeoutPromise = new Promise((_, reject) => {
+            timeoutId = setTimeout(() => {
+                reject(new Error(`Web Component 加载超时（${this.config.timeout}ms）`));
             }, this.config.timeout);
-            const cleanup = () => {
-                clearTimeout(timer);
-                script.onload = null;
-                script.onerror = null;
-            };
-            script.onload = () => {
-                cleanup();
-                resolve();
-            };
-            script.onerror = () => {
-                cleanup();
-                document.head.removeChild(script);
-                reject(new Error(`脚本加载失败: ${url}`));
-            };
-            document.head.appendChild(script);
         });
+        // 创建加载 Promise
+        const loadPromise = this.loadComponent();
+        try {
+            // 竞争：加载完成 或 超时
+            await Promise.race([loadPromise, timeoutPromise]);
+        }
+        finally {
+            // 清理超时定时器
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        }
     }
     /**
-     * 提取 SDK 实例
-     * 处理 UMD 包装对象的情况
+     * 加载组件
      */
-    extractSDKInstance() {
-        if (typeof window === 'undefined') {
-            return null;
-        }
-        const globalObj = window.SeaArtPay;
-        if (!globalObj) {
-            return null;
-        }
-        // 检查是否是实际的 SDK 实例（有 show 方法）
-        if (this.isValidSDK(globalObj)) {
-            return globalObj;
+    async loadComponent() {
+        try {
+            // 动态导入 @seaart/payment-component
+            // 注意：消费方需要在项目中安装此依赖
+            await import('@seaart/payment-component');
+            this.log('模块导入成功');
+            // 等待自定义元素注册完成
+            await this.waitForElementDefined();
+            this.log('自定义元素注册完成');
         }
-        // 检查是否是 UMD 包装对象
-        const wrapped = globalObj;
-        if (wrapped.SeaArtPay && this.isValidSDK(wrapped.SeaArtPay)) {
-            // 修复全局引用
-            window.SeaArtPay = wrapped.SeaArtPay;
-            return wrapped.SeaArtPay;
+        catch (error) {
+            // 如果动态导入失败，可能是消费方没有安装依赖
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            throw new Error(`无法加载 @seaart/payment-component: ${errorMessage}\n` +
+                '请确保已安装依赖: npm install @seaart/payment-component');
         }
-        return null;
     }
     /**
-     * 验证 SDK 实例是否有效
+     * 等待自定义元素注册
      */
-    isValidSDK(sdk) {
-        return (typeof sdk === 'object' &&
-            sdk !== null &&
-            typeof sdk.show === 'function');
+    async waitForElementDefined() {
+        if (typeof customElements === 'undefined') {
+            throw new Error('浏览器不支持 Custom Elements');
+        }
+        // 使用 customElements.whenDefined 等待元素注册
+        await customElements.whenDefined(PAYMENT_ELEMENT_NAME);
     }
     /**
-     * 初始化 SDK
+     * 创建支付元素
      */
-    initializeSDK() {
-        if (!this.sdk)
-            return;
-        const envConfig = ENV_CONFIG[this.config.environment];
-        if (typeof this.sdk.init === 'function') {
-            this.sdk.init({
-                debug: this.config.debug,
-                iframeUrl: envConfig.iframeUrl,
-            });
-            this.log(`SDK 已初始化，环境: ${this.config.environment}`);
+    createElement() {
+        if (!this.isLoaded() && !this.isElementDefined()) {
+            throw new Error('Web Component 尚未加载，请先调用 load() 方法');
         }
+        return document.createElement(PAYMENT_ELEMENT_NAME);
     }
     /**
      * 日志输出
@@ -4392,7 +4352,6 @@ class SeaArtPayLoader {
      */
     reset() {
         this.status = 'idle';
-        this.sdk = null;
         this.loadPromise = null;
     }
 }
@@ -4576,12 +4535,14 @@ class CheckoutAPI {
 /**
  * PaymentCheckoutClient - 支付弹窗客户端
  * 提供支付弹窗的初始化、结账和订阅功能
+ *
+ * 使用 @seaart/payment-component Web Component 实现支付弹窗
  */
 /**
  * 支付弹窗客户端类
  *
  * 提供一次性购买和订阅购买功能，自动处理：
- * - SeaArtPay SDK 的动态加载
+ * - @seaart/payment-component Web Component 的动态加载
  * - 创建结账订单
  * - 显示支付弹窗
  * - 支付结果回调
@@ -4592,7 +4553,7 @@ class CheckoutAPI {
  * const checkoutClient = new PaymentCheckoutClient({
  *   apiHost: 'https://payment.sg.seaverse.dev',
  *   authToken: 'your-jwt-token',
- *   environment: 'develop',
+ *   environment: 'development',
  *   debug: true,
  * });
  *
@@ -4611,6 +4572,8 @@ class PaymentCheckoutClient {
     constructor(config) {
         this.status = 'idle';
         this.initPromise = null;
+        /** 当前显示的支付元素 */
+        this.currentPaymentElement = null;
         // 验证必须提供 authToken 或 getAuthToken 其中之一
         if (!config.authToken && !config.getAuthToken) {
             throw new Error('必须提供 authToken 或 getAuthToken 其中之一');
@@ -4620,10 +4583,9 @@ class PaymentCheckoutClient {
             environment: config.environment ?? DEFAULT_CHECKOUT_CONFIG.environment,
             debug: config.debug ?? DEFAULT_CHECKOUT_CONFIG.debug,
         };
-        // 创建 SDK 加载器
+        // 创建 Web Component 加载器
         this.loader = new SeaArtPayLoader({
-            cdnUrl: config.sdkCdnUrl,
-            timeout: config.sdkTimeout ?? DEFAULT_CHECKOUT_CONFIG.sdkTimeout,
+            timeout: config.componentTimeout ?? DEFAULT_CHECKOUT_CONFIG.componentTimeout,
             debug: this.config.debug,
             environment: this.config.environment,
         });
@@ -4652,7 +4614,7 @@ class PaymentCheckoutClient {
     }
     /**
      * 初始化客户端
-     * 加载 SeaArtPay SDK
+     * 加载 @seaart/payment-component Web Component
      */
     async init() {
         if (this.status === 'ready') {
@@ -4680,7 +4642,7 @@ class PaymentCheckoutClient {
             await this.loader.load();
         }
         catch (error) {
-            throw this.createError('SDK_LOAD_FAILED', 'SeaArt 支付 SDK 加载失败', error);
+            throw this.createError('COMPONENT_LOAD_FAILED', 'SeaArt Payment Web Component 加载失败', error);
         }
     }
     /**
@@ -4766,7 +4728,7 @@ class PaymentCheckoutClient {
      */
     showPayment(options) {
         if (!this.isReady()) {
-            throw this.createError('SDK_NOT_READY', '支付 SDK 未初始化');
+            throw this.createError('COMPONENT_NOT_READY', '支付组件未初始化');
         }
         this.showPaymentModal(options);
     }
@@ -4774,9 +4736,9 @@ class PaymentCheckoutClient {
      * 关闭支付弹窗
      */
     close() {
-        const sdk = this.getSDK();
-        if (sdk && typeof sdk.close === 'function') {
-            sdk.close();
+        if (this.currentPaymentElement) {
+            this.currentPaymentElement.remove();
+            this.currentPaymentElement = null;
             this.log('支付弹窗已关闭');
         }
     }
@@ -4800,45 +4762,77 @@ class PaymentCheckoutClient {
         }
         await this.init();
     }
-    /**
-     * 获取 SDK 实例
-     */
-    getSDK() {
-        return this.loader.getSDK();
-    }
     /**
      * 显示支付弹窗
+     * 使用 <seaart-payment> Web Component
      */
     showPaymentModal(options) {
-        const sdk = this.getSDK();
-        if (!sdk) {
-            throw this.createError('SDK_NOT_READY', '支付 SDK 未加载');
-        }
+        // 如果已有支付弹窗，先关闭
+        this.close();
         this.log('打开支付弹窗:', options.transactionId);
-        sdk.show({
-            transactionId: options.transactionId,
-            language: options.language ?? DEFAULT_CHECKOUT_CONFIG.language,
-            userName: options.userName,
-            productName: options.productName,
-            from: options.from,
-            onSuccess: (result) => {
-                this.log('支付成功:', result);
-                options.onSuccess?.({
-                    transactionId: options.transactionId,
-                    status: 'success',
-                    data: result,
-                });
-            },
-            onUnsuccess: (result) => {
-                this.log('支付未成功:', result);
-                const unsuccessResult = result;
-                options.onUnsuccess?.({
-                    reason: unsuccessResult.reason ?? 'error',
-                    message: unsuccessResult.message ?? '支付未完成',
-                    transactionId: options.transactionId,
-                });
-            },
+        // 创建 Web Component 元素
+        const payment = document.createElement(PAYMENT_ELEMENT_NAME);
+        // 设置必需属性
+        payment.setAttribute('transaction-id', options.transactionId);
+        payment.setAttribute('environment', this.config.environment);
+        payment.setAttribute('language', options.language ?? DEFAULT_CHECKOUT_CONFIG.language);
+        // 设置可选属性
+        if (options.userName) {
+            payment.setAttribute('user-name', options.userName);
+        }
+        if (options.productName) {
+            payment.setAttribute('product-name', options.productName);
+        }
+        if (options.from) {
+            payment.setAttribute('from', options.from);
+        }
+        // 监听成功事件
+        payment.addEventListener('success', ((event) => {
+            this.log('支付成功:', event.detail);
+            const result = {
+                transactionId: options.transactionId,
+                status: 'success',
+                data: event.detail,
+            };
+            options.onSuccess?.(result);
+            this.removePaymentElement(payment);
+        }));
+        // 监听未成功事件
+        payment.addEventListener('unsuccess', ((event) => {
+            this.log('支付未成功:', event.detail);
+            const unsuccessResult = {
+                reason: event.detail.reason ?? 'error',
+                message: event.detail.message ?? '支付未完成',
+                transactionId: options.transactionId,
+            };
+            options.onUnsuccess?.(unsuccessResult);
+            this.removePaymentElement(payment);
+        }));
+        // 监听关闭事件
+        payment.addEventListener('close', () => {
+            this.log('用户关闭支付弹窗');
+            // 触发取消回调
+            options.onUnsuccess?.({
+                reason: 'cancel',
+                message: '用户关闭支付',
+                transactionId: options.transactionId,
+            });
+            this.removePaymentElement(payment);
         });
+        // 添加到 DOM
+        document.body.appendChild(payment);
+        this.currentPaymentElement = payment;
+    }
+    /**
+     * 移除支付元素
+     */
+    removePaymentElement(element) {
+        if (element.parentNode) {
+            element.remove();
+        }
+        if (this.currentPaymentElement === element) {
+            this.currentPaymentElement = null;
+        }
     }
     /**
      * 创建支付错误
@@ -5025,6 +5019,7 @@ function getSDKLocale(locale) {
  *
  * ## 2. Payment Checkout (PaymentCheckoutClient)
  * Show payment modal for one-time purchases and subscriptions.
+ * Uses @seaart/payment-component Web Component internally.
  *
  * ```typescript
  * import { PaymentCheckoutClient } from '@seaverse/payment-sdk';
@@ -5032,7 +5027,7 @@ function getSDKLocale(locale) {
  * const checkoutClient = new PaymentCheckoutClient({
  *   apiHost: 'https://payment.sg.seaverse.dev',
  *   authToken: 'your-jwt-token',
- *   environment: 'develop',
+ *   environment: 'development', // or 'production'
  * });
  *
  * await checkoutClient.init();
@@ -5052,7 +5047,7 @@ function getSDKLocale(locale) {
 /**
  * SDK version
  */
-const VERSION = '0.1.0';
+const VERSION = '0.2.0';
 
-export { API_ENDPOINTS, BIZ_CODE, CheckoutAPI, DEFAULT_CHECKOUT_CONFIG, ENV_CONFIG, HTTP_STATUS, PaymentAPIError, PaymentCheckoutClient, PaymentClient, SDK_CDN_URL, SDK_GLOBAL_NAME, SDK_LOAD_TIMEOUT, SeaArtPayLoader, VERSION, centsToDollars, createCheckoutPaymentError, delay, dollarsToCents, formatPrice, generateOrderReference, getCurrentUrl, getGlobalLoader, getSDKLocale, isBrowser, isCheckoutPaymentError, resetGlobalLoader, safeJsonParse, withTimeout };
+export { API_ENDPOINTS, BIZ_CODE, COMPONENT_LOAD_TIMEOUT, CheckoutAPI, DEFAULT_CHECKOUT_CONFIG, ENV_CONFIG, HTTP_STATUS, PAYMENT_ELEMENT_NAME, PaymentAPIError, PaymentCheckoutClient, PaymentClient, SeaArtPayLoader, VERSION, centsToDollars, createCheckoutPaymentError, delay, dollarsToCents, formatPrice, generateOrderReference, getCurrentUrl, getGlobalLoader, getSDKLocale, isBrowser, isCheckoutPaymentError, resetGlobalLoader, safeJsonParse, withTimeout };
 //# sourceMappingURL=index.browser.js.map