堆棧內存溢出
  簡體   English   中英

Authorize.net內嵌iFrame accept.js響應交易

[英]Authorize.net embedded iFrame accept.js response transaction

 原文  2020-10-10 16:34:35  7   1    javascript/ node.js/ angular/ authorize.net/ accept.js

問題描述

我在我的應用程序中集成了嵌入 iFrame 的 authorize.net accept.js。 無法在我的 lambda function 中設置事務響應以獲得響應。 我在堆棧溢出上看到過類似的問題，但還沒有解決我的問題。

我的后端使用 Nodejs，前端使用 angular7。

我成功地從我的 lambda function 獲得了令牌，所以我的 iframe 出現在 ui 上。 我已設置\"showReceipt\": false提供 url 以取消並繼續，因為文檔說我必須設置顯示收據參數“false”才能與 ui 中的 IFrameCommunicator.html 通信。 但是當我點擊“支付”時，它停留在“處理中..”很長一段時間。

以下是分別來自 .network 選項卡的請求和響應標頭：

* 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

{"resultCode":"Ok","messageCode":"Ok","transactionData":{"accountType":"Discover","accountNumber":"XXXX0012","transId":"40055282319","responseCode":"4","authorization":"TYIUU7","merchantName":"iMart Inc.","totalAmount":"1999.9","dateTime":"10/09/2020 4:20:27 PM"}}

我確定交易正在發生，但不確定為什么它沒有與通信器連接。

我已經閱讀了文檔中的步驟並遵循了 GitHub 示例代碼-https://github.com/AuthorizeNet/accept-sample-app，這讓我更加困惑，因為他們在某些地方說的不同。 以下是我到目前為止完成的步驟：

  1. 創建了一個 lambda 托管付款 function，其中包含所有設置（遵循正確的順序）以取回令牌。
  2. 創建托管付款表單以顯示 iframe。
  3. 能夠付款 --> 獲取收據頁面 --> 路由到成功屏幕。

我想要完成的事情：

  1. 付款后，最初的想法是根據 authorize.net 的響應觸發不同的 lambda function 而無需與 IFrameCommunicator.html 通信，但由於我無法做到這一點，我希望在后端。

  2. 此外，我們不會在我們的服務器中存儲任何用戶詳細信息，並且對創建客戶資料不感興趣，除非這是獲得交易響應的必要步驟。 請建議步驟集成，如果我可以在同一個 lambda function 中完成我創建的令牌，或者我必須為此創建一個不同的令牌，該步驟何時實施？

  3. 我知道 Webhooks，但不確定在這個時候我只是想實現一個簡單的事務時它是否是絕對必要的。

我是新手，我找不到很多與之相關的例子來解決我的問題/困惑。 如果我對此處的步驟以及我哪里出錯了有清楚的解釋，將不勝感激。

以下是代碼 -

接受-hosted.js Lambda function：

    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>

Angular 顯示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 個解決方案

解決方案1
 0  2020-10-15 03:47:06

這是您所有問題的答案，我希望它有效：

1）如果您使用的是 iFrame，則必須使用 iFrameCommunicator

2）success url 只能在你設置“showReceipt”為真時使用，這里你不能自動導航到你的成功頁面，這是允許“showReceipt”時出現的“繼續”按鈕的鏈接

3）如果你想觸發任何 function 或者想在響應后導航然后在你的 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Authorize.net Accept.js集成 在接受托管方法 (Authorize.net) 中將 showReceipt 設置為 false 時沒有事務響應 如何在 Ionic / JavaScript 中解析 Authorize.net 支付響應？ 在augular js視圖文件中放置authorize.net商戶印章 如何使用 Accept.js 獲得兩個單獨的隨機數？ Authorize.net付款網關問題 最佳做法：提交表格至authorize.net（javascript？） Authorize.Net CIM，將細節保存為托管彈出窗口后，需要調用我的自定義JavaScript函數 如何為iPhone和Android自定義Authorize.net托管表單彈出窗口？ 嘗試$ ajax發布具有XML數據的authorize.net API時出錯
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM