Почему я получаю сообщение «Uncaught TypeError: window [i] не является функцией» при отправке формы авторизированного.net AcceptUI? - PullRequest
Новая
       48

Почему я получаю сообщение «Uncaught TypeError: window [i] не является функцией» при отправке формы авторизированного.net AcceptUI?

0 голосов
/ 05 ноября 2019

Я пытаюсь использовать размещенную форму authorize.net AcceptUI в компоненте Vue.js. 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>
...