VueJS3集成Authorize.net（Accept.js）报错，求版本适配及解决方案

问题概述 #

在Vue3前端集成Authorize.net的Accept.js库时触发报错，按官方文档操作后问题仍未解决，需确认库的更新状态并获取可行的集成方案。

报错详情 #

AcceptUI.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')
at p (AcceptUI.js:1:1342)
at t (AcceptUI.js:1:234)
at document.readyState.document.onreadystatechange (AcceptUI.js:1:5791)

版本说明 #

Accept.js由Authorize.net官方维护，无独立版本号，官方通过CDN提供实时更新的稳定版本。直接使用官方CDN链接即可获取最新版，避免使用本地缓存的旧文件。

解决方案 #

报错核心原因是Accept.js在DOM未完全就绪时尝试操作元素，Vue3单页应用需严格控制脚本加载和初始化时机，以下是完整集成步骤：

1. 动态加载Accept.js脚本 #

避免在组件初始化阶段直接引入脚本，改为在DOM挂载后动态加载，确保脚本加载完成后再执行初始化逻辑。

2. 组件内安全初始化AcceptUI #

使用Vue3的onMounted钩子确保DOM已挂载，onUnmounted钩子清理资源防止内存泄漏。

完整组件示例 #

<template>
  <div>
    <button id="authorizePaymentBtn">发起支付</button>
    <div id="authorizePaymentContainer"></div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';

let acceptScript = null;
const paymentBtnId = 'authorizePaymentBtn';

onMounted(() => {
  // 创建并加载Accept.js脚本
  acceptScript = document.createElement('script');
  acceptScript.src = 'https://js.authorize.net/v3/AcceptUI.js';
  acceptScript.async = true;
  
  acceptScript.onload = () => {
    // 脚本加载完成后绑定支付按钮点击事件
    const paymentBtn = document.getElementById(paymentBtnId);
    if (paymentBtn) {
      paymentBtn.addEventListener('click', openPaymentModal);
    }
  };

  document.body.appendChild(acceptScript);
});

onUnmounted(() => {
  // 组件销毁时清理脚本和事件监听
  if (acceptScript) {
    document.body.removeChild(acceptScript);
  }
  
  const paymentBtn = document.getElementById(paymentBtnId);
  if (paymentBtn) {
    paymentBtn.removeEventListener('click', openPaymentModal);
  }
});

function openPaymentModal() {
  AcceptUI.open({
    apiLoginID: '你的API登录ID', // 替换为你的Authorize.net API登录ID
    clientKey: '你的客户端密钥', // 替换为你的Authorize.net客户端密钥
    paymentOptions: {
      amount: '15.99', // 支付金额
      currency: 'USD' // 货币类型
    },
    displayOptions: {
      container: 'authorizePaymentContainer', // 支付模态框挂载的DOM容器ID
      paymentButtonText: '确认支付'
    },
    onPaymentComplete: (response) => {
      // 支付成功回调，处理响应数据
      console.log('支付完成:', response);
      // 可在此处向后端提交支付结果
    },
    onError: (error) => {
      // 支付错误回调，处理错误
      console.error('支付失败:', error);
    }
  });
}
</script>

关键注意事项 #

• 确保apiLoginID和clientKey为Authorize.net后台获取的有效凭证
• 支付容器元素（authorizePaymentContainer）必须存在于DOM中，且在调用AcceptUI.open时已挂载
• 避免在服务器端渲染（SSR）环境中直接使用Accept.js，需仅在客户端执行

内容的提问来源于stack exchange，提问作者VueJS User