@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>