尝试将 $UI 元素附加到 <div> 标记时，JQuery 无法正常工作且没有错误输出

Question

我正在尝试将 SagePayments 卡元素附加到 paymentDiv，我使用他们的示例项目来模仿。当我 运行 使用我的自定义沙盒 merchantID 和 merchantKey 的程序时，我没有得到要填充的元素。在 Chrome 上调试显示没有错误。这只是对集成的主要测试。这是我第一次使用 SagePayments 和 MEF MVC。

这是处理附加的 csHtml 代码。

@using SageProcessModuleMEF.Scripts;
@using Newtonsoft.Json;
@{
    Nonces Nonces = Shared.GetNonces();

    var request = new
    {
        merchantId = Shared.MerchantID,
        merchantKey = Shared.MerchantKEY, // don't include the Merchant Key in the JavaScript initialization!
        requestType = "payment",
        orderNumber = "Invoice" + (new Random()).Next(100).ToString(),
        amount = Shared.Amount,
        salt = Nonces.Salt,
        postbackUrl = Shared.PostbackUrl,
        preAuth = Shared.PreAuth
    };

    string jsonReq = JsonConvert.SerializeObject(request);
    string AuthKey = Shared.GetAuthKey(jsonReq, Shared.DeveloperKEY, Nonces.IV, Nonces.Salt);
}
<h2>
    <style>
        #paymentDiv {
            width: 60%;
            margin-left: auto;
            margin-right: auto;
            padding: 30px;
            border-width: thin;
            border-style: dotted;
            border-color: #3c424f;
        }
    </style>
    <div class="wrapper text-center">
        <h1>Inline</h1>
        <div>
            <div id="paymentDiv"></div>
            <br /><br />
            <h5>Results:</h5>
            <p style="width:100%"><pre><code id="paymentResponse">The response will appear here as JSON, and in your browser console as a JavaScript object.</code></pre></p>
        </div>
    </div>

    <script src="https://sagepayments.net/pay/1.0.0/js/pay.js">
        // full api reference is available at https://github.com/SagePayments/PaymentsJS

        // the entire library is accessed through the PayJS() function:

        PayJS(['PayJS/UI', 'jquery'], // name the modules you want to use...
        function($UI, $) { // ... and then assign them to variables.

            // we'll start by initializing the UI:
            $UI.Initialize({
                // developer:
                clientId: "WzMlU4KE2amf8DwUMczDZYEwC8BLUSJlD",
                postbackUrl: "@request.postbackUrl", // you get a copy of the response here

                // merchant:
                merchantId: "@request.merchantId",

                // security:
                authKey: "@AuthKey",
                salt: "@request.salt",

                // request:
                requestType: "@request.requestType",
                orderNumber: "@request.orderNumber",
                amount: "@request.amount",

                // ui:
                elementId: "paymentDiv", // the DOM that $UI should attach itself to,

                // dev QoL:
                // debug: true, // verbose logging
                // show: true, // show the modal immediately, instead of waiting for a click
                addFakeData: true // pre-fill the form with test values
            });

            // and then we'll set a callback function to execute after the user
            // has submitted their card data and received a respnonse back
            $UI.setCallback(function($RESP) { // the callback function receives an instance of the RESPONSE module
                console.log("Ajax Response:");
                console.log($RESP.getAjaxResponse());
                console.log("API Response:");
                console.log($RESP.getApiResponse());
                console.log("Gateway Response:");
                console.log($RESP.getGatewayResponse());
                console.log("API Response + Hash:");
                console.log($RESP.getResponseHash())
                $("#paymentResponse").text(
                    $RESP.getApiResponse()
                );
                // the response includes the gateway response, plus a SHA512 HMAC of the gateway response
                // the HMAC uses your developer key to sign the response payload
                // it's always a good idea to verify the hash, server-side, to ensure that the response is legitimate
                // this is especially important if you're changing an account balance, shipping a product, etc.
            });
        });
    </script>

</h2>

令牌生成和从共享 C# 脚本中获取的基本数据工作正常，但附加了 none 个元素。

Answer 1

我不确定我做了什么，但是这段更新后的代码可以正常工作。

<script async="true" src="https://sagepayments.net/pay/1.0.0/js/pay.js"></script>
<script type="text/javascript">
    // full api reference is available at https://github.com/SagePayments/PaymentsJS

    // the entire library is accessed through the PayJS() function:

    PayJS(['PayJS/UI', 'jquery'], // name the modules you want to use...
    function($UI, $) { // ... and then assign them to variables.

        // we'll start by initializing the UI:
        $UI.Initialize({
            // developer:
            clientId: "@Shared.DeveloperID",
            postbackUrl: "@request.postbackUrl", // you get a copy of the response here

            // merchant:
            merchantId: "@request.merchantId",

            // security:
            authKey: "@AuthKey",
            salt: "@request.salt",

            // request:
            requestType: "@request.requestType",
            orderNumber: "@request.orderNumber",
            amount: "@request.amount",

            // ui:
            elementId: "paymentDiv", // the DOM that $UI should attach itself to,

            // dev QoL:
            // debug: true, // verbose logging
            // show: true, // show the modal immediately, instead of waiting for a click
            addFakeData: true // pre-fill the form with test values
        });

        // and then we'll set a callback function to execute after the user
        // has submitted their card data and received a respnonse back
        $UI.setCallback(function($RESP) { // the callback function receives an instance of the RESPONSE module
            console.log("Ajax Response:");
            console.log($RESP.getAjaxResponse());
            console.log("API Response:");
            console.log($RESP.getApiResponse());
            console.log("Gateway Response:");
            console.log($RESP.getGatewayResponse());
            console.log("API Response + Hash:");
            console.log($RESP.getResponseHash())
            $("#paymentResponse").text(
                $RESP.getApiResponse()
            );
            // the response includes the gateway response, plus a SHA512 HMAC of the gateway response
            // the HMAC uses your developer key to sign the response payload
            // it's always a good idea to verify the hash, server-side, to ensure that the response is legitimate
            // this is especially important if you're changing an account balance, shipping a product, etc.
        });
    });
</script>