如何在 vue.js 中获取 Forte Hosted Form callback

2026-10-24支付阿杰

结论

Forte Hosted Form 的 callback attribute 通常需要填写全局函数名。Vue methods 中的 oncallback 只存在于当前组件实例上，不会自动挂载到 window，因此 Forte 脚本无法直接找到它。

在 Hosted Form 初始化前，将 Vue 方法注册为全局回调即可：

window.oncallback = this.oncallback;

按钮的 callback 应直接填写函数名字符串，不要使用 Vue 的属性绑定语法。

Vue 2 示例

<button
  type="button"
  callback="oncallback"
  class="forte-checkout-button"
>
  Make Payment
</button>

export default {
  mounted() {
    window.oncallback = this.oncallback;
  },

  beforeDestroy() {
    if (window.oncallback === this.oncallback) {
      delete window.oncallback;
    }
  },

  methods: {
    oncallback(payload) {
      console.log("Forte payment response:", payload);

      // 具体字段取决于 Forte 实际返回的数据结构
      if (payload && payload.response !== undefined) {
        alert("Hello " + payload.response);
      }
    }
  }
};

这里应使用：

callback="oncallback"

不要写成：

:callback="oncallback"

后者是 Vue 属性绑定，可能会把函数转换成不符合 Forte 要求的 attribute 值。

更稳妥地处理响应

根据版本或配置不同，第三方支付脚本传给回调的内容可能是对象，也可能是 JSON 字符串。可以先对数据进行统一解析：

export default {
  mounted() {
    window.fortePaymentCallback = this.oncallback;
  },

  beforeDestroy() {
    delete window.fortePaymentCallback;
  },

  methods: {
    oncallback(rawPayload) {
      let payload = rawPayload;

      if (typeof rawPayload === "string") {
        try {
          payload = JSON.parse(rawPayload);
        } catch (error) {
          console.warn("Forte callback returned a non-JSON string:", rawPayload);
        }
      }

      console.log("Forte callback payload:", payload);

      const response =
        payload && typeof payload === "object"
          ? payload.response
          : payload;

      alert("Hello " + String(response ?? ""));

      // 在这里更新 Vue 状态
      // this.paymentResponse = payload;
    }
  }
};

按钮应与全局回调名保持一致：

<button
  type="button"
  callback="fortePaymentCallback"
  class="forte-checkout-button"
>
  Make Payment
</button>

Vue 3 Composition API 示例

<script setup>
import { onBeforeUnmount, onMounted } from "vue";

function oncallback(payload) {
  console.log("Forte payment response:", payload);

  if (payload?.response !== undefined) {
    alert(`Hello ${payload.response}`);
  }
}

onMounted(() => {
  window.fortePaymentCallback = oncallback;
});

onBeforeUnmount(() => {
  delete window.fortePaymentCallback;
});
</script>

<template>
  <button
    type="button"
    callback="fortePaymentCallback"
    class="forte-checkout-button"
  >
    Make Payment
  </button>
</template>

注意事项

必须在 Forte 脚本读取按钮或打开 Hosted Form 前注册全局回调。
callback 中的名称必须与 window 上的属性名完全一致，包括大小写。
不要默认响应数据位于 payload.response。先用 console.log(payload) 检查实际数据结构，再读取交易状态、授权码等字段。
页面上有多个支付组件时，应分别使用不同的全局回调名，以免相互覆盖。
前端回调可以用来更新页面状态，但不能作为确认支付成功的唯一依据。订单入账应由服务端根据 Forte 的服务端通知或交易查询结果进行验证。
如果回调一直没有执行，还需检查 Forte SDK 是否成功加载、按钮所需的 class 和其他 attributes 是否完整，以及浏览器控制台是否报告了脚本错误。