I am trying to attach SagePayments card elements to paymentDiv, I used their sample project to mimic. When I run the program with my custom Sandbox merchantID and merchantKey I am getting non of the elements to populate. Debugging on Chrome shows no error. This is just primarily testing of the integration. This is my first time working with SagePayments and MEF MVC.
Here is the csHtml code that handles the attaching.
@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>
The token generation and basic data fetches from the Shared C# script works fine, but none of the elements gets attached.
I am not sure what I did, but this pice of updated code works properly.
<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>