Javascript Authorize.net嵌入式iFrame accept.js响应事务

我已将authorize.net accept.js嵌入到我的应用程序中。在我的lambda函数中设置事务响应以获取响应时遇到问题。我在堆栈溢出方面也遇到过类似的问题，但还没有任何结果

后端使用Nodejs，前端使用angular7

我成功地从lambda函数中获取令牌，因此我的iframe显示在ui上。我已经设置了“showReceipt\”：false为取消和继续提供url，因为文档说我必须设置showReceipt参数“false”，以便与ui中的iframeComunicator.html通信。但当我点击“支付”时，它在“处理…”上停留了很长时间

以下是分别来自“网络”选项卡的请求和响应标头：

* Cookie: __cfruid=deb63d2f12d9690aeea838cf7f31ada6da92bc1c-1602260930
* Host: test.authorize.net
* Origin: https://test.authorize.net
* Referer: https://test.authorize.net/payment/payment
* Sec-Fetch-Dest: empty
* Sec-Fetch-Mode: cors
* 
Sec-Fetch-Site: same-origin

我确信事务是在查看响应时发生的，但不确定它为什么没有与通信器连接

我已经阅读了文档中的步骤，并遵循了GitHub示例代码-https://github.com/AuthorizeNet/accept-sample-app，这让我更加困惑，因为他们在某些地方说了不同的话。以下是我迄今为止完成的步骤：

创建了一个lambda托管的支付函数，其中包含所有设置（按照正确的顺序）以获取令牌

创建托管付款表单以显示iframe

能够付款-->获取收据页-->发送至成功屏幕

我正在努力实现的目标：

在我付款后，最初的想法是基于authorize.net的响应触发一个不同的lambda函数，而不与IFrameCommunicator.html通信，但由于我无法做到这一点，我希望得到一个响应，以便在后端启动下一个进程

此外，我们不会在服务器中存储任何用户详细信息，也不会对创建客户配置文件感兴趣，除非这是获取事务响应的必要步骤。请建议步骤集成，如果我可以使用我创建的相同lambda函数来获取令牌，或者我必须为此创建不同的lambda函数，那么该步骤将在何时实施

我知道Webhooks，但不确定在我尝试实现一个简单事务的时候它是否绝对必要

我是一个新手，我找不到很多与之相关的例子来解决我的问题/困惑。如果我能清楚地解释一下这里的步骤以及我的错误所在，我将不胜感激

下面是代码-

accept-hosted.js Lambda函数：

    merchantAuthenticationType.setName('*****');
    merchantAuthenticationType.setTransactionKey('******');

    var transactionRequestType = new ApiContracts.TransactionRequestType();
    transactionRequestType.setTransactionType(ApiContracts.TransactionTypeEnum.AUTHCAPTURETRANSACTION);
    transactionRequestType.setAmount(Total);

    var setting1 = new ApiContracts.SettingType();
    var setting2 = new ApiContracts.SettingType();
    var setting4 = new ApiContracts.SettingType();
    var setting5 = new ApiContracts.SettingType();
    var setting6 = new ApiContracts.SettingType();
    var setting7 = new ApiContracts.SettingType();
    var setting8 = new ApiContracts.SettingType();
    var setting9 = new ApiContracts.SettingType();
    var setting10 = new ApiContracts.SettingType();
    var setting11 = new ApiContracts.SettingType();

    setting2.setSettingName("hostedPaymentButtonOptions");
    setting2.setSettingValue("{\"text\": \"Pay\"}");

    setting1.setSettingName("hostedPaymentReturnOptions");
    setting1.setSettingValue(
        "{\"showReceipt\": false, \"url\": \"https://iMart.com/success.html\", \"urlText\": \"Continue\", \"cancelUrl\": \"https://iMart.com/error.html\", \"cancelUrlText\": \"Cancel\"}");


    setting10.setSettingName("hostedPaymentOrderOptions");
    setting10.setSettingValue("{\"show\": false, \"merchantName\": \"iMart Inc.\"}");

    setting5.setSettingName("hostedPaymentPaymentOptions");
    setting5.setSettingValue("{\"cardCodeRequired\": true, \"showCreditCard\": true, \"showBankAccount\": false}");

    setting7.setSettingName("hostedPaymentShippingAddressOptions");
    setting7.setSettingValue("{\"show\": false, \"required\": false}");

    setting8.setSettingName("hostedPaymentBillingAddressOptions");
    setting8.setSettingValue("{\"show\": false, \"required\": false}");

    setting6.setSettingName("hostedPaymentSecurityOptions");
    setting6.setSettingValue("{\"captcha\": true}");

    setting4.setSettingName("hostedPaymentStyleOptions");
    setting4.setSettingValue("{\"bgColor\": \"blue\"}");

    setting9.setSettingName("hostedPaymentCustomerOptions");
    setting9.setSettingValue("{\"showEmail\": false, \"requiredEmail\": false, \"addPaymentProfile\": true }");

    setting11.setSettingName("hostedPaymentIFrameCommunicatorUrl");
    setting11.setSettingValue("{\"url\": \"https://iMart.com/IFrameCommunicator.html\"}");
    
    var settingList = [];

    settingList.push(setting2);
    settingList.push(setting10);
    settingList.push(setting5);
    settingList.push(setting7);
    settingList.push(setting8);
    settingList.push(setting6);
    settingList.push(setting4);
    settingList.push(setting9);
    settingList.push(setting11);
    settingList.push(setting1);


    var alist = new ApiContracts.ArrayOfSetting();
    alist.setSetting(settingList);
    var firstname = new ApiContracts.UserField();
    firstname.setName('First Name');
    firstname.setValue(firstName);

    var lastname = new ApiContracts.UserField();
    lastname.setName('Last Name');
    lastname.setValue(lastName);

    var userFieldList = [];
    userFieldList.push(firstname);
    userFieldList.push(lastname);

    var userFields = new ApiContracts.TransactionRequestType.UserFields();
    userFields.setUserField(userFieldList);

    var transactionSetting1 = new ApiContracts.SettingType();
    transactionSetting1.setSettingName('duplicateWindow');
    transactionSetting1.setSettingValue('120');

    var transactionSetting2 = new ApiContracts.SettingType();
    transactionSetting2.setSettingName('recurringBilling');
    transactionSetting2.setSettingValue('false');

    var transactionSetting3 = new ApiContracts.SettingType();
    transactionSetting3.setSettingName('emailCustomer');
    transactionSetting3.setSettingValue('true');

    var transactionSetting4 = new ApiContracts.SettingType();
    transactionSetting4.setSettingName('headerEmailReceipt');
    transactionSetting3.setSettingValue('You are all set!');

    var transactionSetting5 = new ApiContracts.SettingType();
    transactionSetting5.setSettingName('footerEmailReceipt');
    transactionSetting5.setSettingValue('This is the footer');

    var getRequest = new ApiContracts.GetHostedPaymentPageRequest();
    getRequest.setMerchantAuthentication(merchantAuthenticationType);
    getRequest.setTransactionRequest(transactionRequestType);
    getRequest.setHostedPaymentSettings(alist);
    
    var ctrl = new ApiControllers.GetHostedPaymentPageController(getRequest.getJSON());

    const basicAuth = encode.encode("*****", 'base64');
    await axios({
      method: 'post',
      url: 'https://apitest.authorize.net/xml/v1/request.api',
      headers: {
        'Authorization': 'Basic '+basicAuth,
        'Content-Type': 'application/json'
        
      },
      data:JSON.stringify(ctrl._request)
        }).then(async (data : any)=>{
          if(data.data.token) {
            callback(null, data.data) ; 
          } else callErr(data);   
        });
      async function callErr(data: any){
        callback(null, res) ;
      }
    
}

IFrameCommunicator.html：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Iframe Communicator</title>
        <script type="text/javascript">
            //<![CDATA[
                function callParentFunction(str) {
                    if (str && str.length > 0 
                        && window.parent 
                        && window.parent.parent
                        && window.parent.parent.AuthorizeNetPopup 
                        && window.parent.parent.AuthorizeNetPopup.onReceiveCommunication)
                        {
// Errors indicate a mismatch in domain between the page containing the iframe and this page.
                            window.parent.parent.AuthorizeNetPopup.onReceiveCommunication(str);
                        }
                    }

                function receiveMessage(event) {
                    if (event && event.data) {
                        callParentFunction(event.data);
                        }
                    }

                if (window.addEventListener) {
                        console.log('addEventListener');
                        console.log(receiveMessage);
                    window.addEventListener("message", receiveMessage, false);
                    } else if (window.attachEvent) {
                        window.attachEvent("onmessage", receiveMessage);
                    }

                if (window.location.hash && window.location.hash.length > 1) {                  callParentFunction(window.location.hash.substring(1));
                    }
            //]]/>
        </script>
    </head>
    <body>
    </body>
</html>

Iframe通信器
// 0 
&&window.parent
&&window.parent.parent
&&window.parent.parent.AuthorizeNetPopup
&&window.parent.parent.AuthorizeNetPopup.onReceiveCommunication）
{
//错误表示包含iframe的页面与此页面在域中不匹配。
window.parent.parent.AuthorizeNetPopup.onReceiveCommunication（str）；
}
}
函数接收消息（事件）{
if（事件和事件数据）{
callParentFunction（event.data）；
}
}
if（window.addEventListener）{
log（'addEventListener'）；
控制台日志（接收消息）；
window.addEventListener（“消息”，receiveMessage，false）；
}else if（窗口附件）{
attachEvent（“onmessage”，receiveMessage）；
}
如果（window.location.hash&&window.location.hash.length>1）{callParentFunction（window.location.hash.substring（1））；
}
//]]/>

用于显示iFrame的角度代码：

   <iframe id="add_payment" class="embed-responsive-item panel" name="add_payment" width="100%" frameborder="0" scrolling="yes">
   </iframe>
 </div>
 <form id="send_token" action="" method="post" target="add_payment" >
   <input id="token" type="hidden" name="token" />
 </form>

---

很多天以来，我一直在为时间紧迫而挣扎。如果有人能给我一个很好的见解，我会很有帮助的。如果需要其他信息，请告诉我。提前谢谢你

以下是您所有问题的答案，我希望它能奏效：

1） 如果您使用的是iFrame，则必须使用iFrame通信器

2） 成功url只能在您将“showReceipt”设置为true时使用，此处您无法自动导航到您的成功页面，这是允许“showReceipt”时出现的“Continue”按钮的链接

3） 如果要触发任何函数或在响应后导航，请在html文件中添加以下代码

  <script type="text/javascript">

    $(document).ready(function () {

        window.CommunicationHandler = {};

        function parseQueryString(str) {
            var vars = [];
            var arr = str.split('&');
            var pair;
            for (var i = 0; i < arr.length; i++) {
                pair = arr[i].split('=');
                vars[pair[0]] = unescape(pair[1]);
            }
            return vars;
        }

        window.CommunicationHandler.onReceiveCommunication = function (argument) {

            console.log('communication handler enter', argument);

            var params = parseQueryString(argument.qstr)

            switch (params['action']) {
                case "resizeWindow":

                    console.log('resize'); break;

                case "successfulSave":

                    console.log('save'); break;

                case "cancel":

                    console.log('cancel'); break;

                case "transactResponse":

                    sessionStorage.removeItem("HPTokenTime");

                    console.log('transaction complete');

                    var transResponse = JSON.parse(params['response']);

                    console.log('transaction complete1', transResponse);
                // window.location.href = '/checkout/complete';

            }
        }

        //send the token
        $('#send_hptoken').submit();


    });
</script>

$（文档）.ready（函数（）{
window.CommunicationHandler={}；
函数parseQueryString（str）{
var-vars=[]；
var arr=str.split（'&'）；
var对；
对于（变量i=0；i  <script type="text/javascript">

    $(document).ready(function () {

        window.CommunicationHandler = {};

        function parseQueryString(str) {
            var vars = [];
            var arr = str.split('&');
            var pair;
            for (var i = 0; i < arr.length; i++) {
                pair = arr[i].split('=');
                vars[pair[0]] = unescape(pair[1]);
            }
            return vars;
        }

        window.CommunicationHandler.onReceiveCommunication = function (argument) {

            console.log('communication handler enter', argument);

            var params = parseQueryString(argument.qstr)

            switch (params['action']) {
                case "resizeWindow":

                    console.log('resize'); break;

                case "successfulSave":

                    console.log('save'); break;

                case "cancel":

                    console.log('cancel'); break;

                case "transactResponse":

                    sessionStorage.removeItem("HPTokenTime");

                    console.log('transaction complete');

                    var transResponse = JSON.parse(params['response']);

                    console.log('transaction complete1', transResponse);
                // window.location.href = '/checkout/complete';

            }
        }

        //send the token
        $('#send_hptoken').submit();


    });
</script>