javascript - 为什么我在提交 authorize.net 的 AcceptUI 表单时收到“未捕获的 TypeError:window[i] is not a function”?
问题描述
我正在尝试在 Vue.js 组件中使用 authorize.net AcceptUI 托管表单。https://developer.authorize.net/api/reference/features/acceptjs.html#Integrating_the_Hosted_Payment_Information_Form
启动表单的按钮和表单正确显示。输入一些测试付款信息并点击提交后,表单会重新加载,但不会消失。在控制台中,我收到错误 AcceptUI.js:1 Uncaught TypeError: window[i] is not a function。
AcceptUI 脚本的相关部分是这样的:
A = function(t) {
"function" == typeof i ? i.call(null, t) : window[i](t)
};
我定义了一个 responseHandler 函数。我不确定为什么它不起作用。我将代码精简为与 authorize.net 提供的示例几乎相同,但我假设 Vue.js 或 Typescript 的某些东西会干扰。
请忽略与代码无关的任何问题。我只关心让 responseHandler 工作,然后我将构建其余的功能。
<template>
<div>
<form id="paymentForm" method="POST">
<button type="button"
class="AcceptUI"
data-billingAddressOptions='{"show":true, "required":false}'
data-apiLoginID="<redacted>"
data-clientKey="<redacted>"
data-acceptUIFormBtnTxt="Submit"
data-acceptUIFormHeaderTxt="Card Information"
data-responseHandler="responseHandler">Pay
</button>
</form>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
@Component
export default class SubscriptionManager extends Vue {
protected responseHandler(response: any) {
console.log(response);
}
protected paymentFormUpdate(opaqueData: any) {
const dataDescriptor: any = document.getElementById("dataDescriptor");
dataDescriptor.value = opaqueData.dataDescriptor;
const dataValue: any = document.getElementById("dataValue")
dataValue.value = opaqueData.dataValue;
// If using your own form to collect the sensitive data from the customer,
// blank out the fields before submitting them to your server.
const cardNumber: any = document.getElementById("cardNumber");
cardNumber.value = "";
const expMonth: any = document.getElementById("expMonth")
expMonth.value = "";
const expYear: any = document.getElementById("expYear")
expYear.value = "";
const cardCode: any = document.getElementById("cardCode")
cardCode.value = "";
const paymentForm: any = document.getElementById("paymentForm")
paymentForm.submit();
}
}
</script>
解决方案
我今天刚遇到同样的问题。我的问题是在执行响应回调时找不到 data-responseHandler 中命名的函数。我已经定义了data-responseHandler="authnetResponseHandler"但在测试之前忘记定义函数 authnetResponseHandler(response) 。
https://developer.authorize.net/api/reference/features/acceptjs.html#Handling_the_Response
推荐阅读
- pine-script - 绘制一条长度有限的水平线
- pandas - 是否有一个 pandas 函数可以按多列从最小到最大对数据进行分组?
- r - Sorting over a list inside a dataframe in R
- aws-lambda - AWS Lambda 函数获取 504 - 端点请求间歇性超时 - 如何更好地跟踪超时原因?
- algorithm - 将数组 [A1, B1, A2, B2, A3, B3,......An, Bn] 置换为 [A1, A2, A3,......,An,B1, B2, B3,。 ...,Bn] 不使用任何额外空间且在线性时间内
- java - 有谁能够帮我?即使没有错误,我的应用程序也不会运行。每次我运行我的应用程序时它都会崩溃
- java - 我的 android studio 项目没有给我构建 apk 的选项。我该如何解决?
- powershell - Powershell - 查找、复制、列出丢失的文件
- python-3.x - Django 2.1 中的“方法不允许”
- dotnetnuke - 2sxc razor template - display data from DNN user profile fields