我正在尝试在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]不是一个函数。
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>