SagePay merchant session keys - AJAX

We're trying to integrate with the SagePay API's using an AJAX call within some JQuery code. This Particular API gives a JSON response as an example below:

{
"expiry": "2017-09-06T11:20:25.820+01:00",
"merchantSessionKey": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}

Using the below code, we can successfully authenticate against the API, but then get thrown out with a message about Access-Control-Allow-Origin.

XMLHttpRequest cannot load https://pi-test.sagepay.com/api/v1/merchant-session-keys. Response to preflight request doesn't pass access control check: No Access-Control-Allow-Origin header is present on the requested resource. Origin null is therefore not allowed access.

Has anyone come across this issue before?

var myAPI = "https://pi-test.sagepay.com/api/v1/merchant-session-keys";
    var myKey = "xxx";
    var myPassword = "xxx";
    var myTokenId = "xxx";

    $.ajax({
        url: myAPI,
        headers: {
            'content-Type': 'application/json',
            'username': myKey,
            'password': myPassword,
            'authorization': 'Basic ' + myTokenId
        },
        method: 'POST',
        dataType: 'json',
        data: {
            'vendorName':'xxx'
        },
        success: function(data){
            console.log(data.merchantSessionKey);
            console.log(data.expiry);
        },
        error: function () {
            console.log('MSK unsuccessful');
        }
      });

You should not use jquery ajax directly to make a POST request to SagePay. Instead, you have to make an ajax request to your server which in turn posts the data to SagePay. You can get the php example here: SagePay drop-in Checkout

Please check the c# code below that I used to do this.

html:

<div id="sagePayDetails"></div>
<form id="paymentForm"><input type="submit" value="Submit"></input></form>

jquery:

$.ajax({
url: "@Url.Content("~/YourServerMethod")",
type: "GET",
success: function (data) {
    if (data.Status == "SUCCESS") {
        sagepayCheckout(
        { 
            merchantSessionKey: data.SessionKey,
            containerSelector: "#sagePayDetails" 
        }).form({ formSelector: "#paymentForm" });
    } else {
        showError("Some error occurred, please try again later.");
    }
},
error: function (xhr, status, error) {
    showError("Some error occurred, please try again later.");
}});

c#:

public JsonResult YourServerMethod(){
ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls |
        SecurityProtocolType.Tls11 |
        SecurityProtocolType.Tls12;

var invokeUrl = "https://pi-test.sagepay.com/api/v1/merchant-session-keys";
var integrationKey = "*****"
var integrationPassword = "*****";
var paymentVendor = "YourVendorName";
var apiKey = Base64Encode(
    integrationKey + ":" + integrationPassword); //Your method to encode string to Base64

var request = new SagePayEntity.MerchantSessionKeyRequest {
    vendorName = paymentVendor };
var requestData = new StringContent(
 JsonConvert.SerializeObject(request), Encoding.UTF8, "application/json");

var handler = new WebRequestHandler();
handler.ClientCertificates.Add(new X509Certificate2(
    Server.MapPath("~/Certificate.crt"))); //Your SSL certificate for the domain
handler.CachePolicy = new HttpRequestCachePolicy(
    HttpRequestCacheLevel.NoCacheNoStore);

var client = new HttpClient(handler);
client.DefaultRequestHeaders.Authorization = 
    new AuthenticationHeaderValue("Basic", apiKey);
client.DefaultRequestHeaders
    .Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
var response = client.PostAsync(invokeUrl, requestData).Result;
var result = response.Content.ReadAsStringAsync().Result;

if (response.StatusCode == HttpStatusCode.Created)
{
    var sageResponse = JsonConvert
        .DeserializeObject<SagePayEntity.MerchantSessionKeyResponse>(result,
        new JsonSerializerSettings
        {
            MetadataPropertyHandling = MetadataPropertyHandling.Ignore,
            DateParseHandling = DateParseHandling.None
        });
    return Json(new { SessionKey = sageResponse.MerchantSessionKey,
        Status = "SUCCESS" },
        JsonRequestBehavior.AllowGet);
}
else
{
    return Json(new { Status = "FAILURE" });
}}

SagePayEntity:

namespace SagePayEntity
{
    public class MerchantSessionKeyRequest
    {
        public string VendorName { get; set; }
    }

    public class MerchantSessionKeyResponse
    {
        public string MerchantSessionKey { get; set; }
        public string Expiry { get; set; }
    }

    public class Currency
    {
        public static string GBP { get { return "GBP"; } }
    };

    public class TransactionType
    {
        public static string Payment { get { return "Payment"; } }

        public static string Deferred { get { return "Deferred"; } }

        public static string Repeat { get { return "Repeat"; } }

        public static string Refund { get { return "Refund"; } }
    };

    public class SaveCard
    {
        public static string Save { get { return "true"; } }

        public static string DoNotSave { get { return "false"; } }
    }

    public class Card
    {
        public string MerchantSessionKey { get; set; }
        public string CardIdentifier { get; set; }
        public string Save { get; set; }
        public string CardType { get; set; }
        public string LastFourDigits { get; set; }
        public string ExpiryDate { get; set; }
    }

    public class PaymentMethod
    {
        public Card Card { get; set; }
    }

    public class PaymentRequest
    {
        public string TransactionType { get; set; }
        public PaymentMethod PaymentMethod { get; set; }
        public string VendorTxCode { get; set; }
        public int Amount { get; set; }
        public string Currency { get; set; }
        public string Description { get; set; }
        public string Apply3DSecure { get; set; }
        public string CustomerFirstName { get; set; }
        public string CustomerLastName { get; set; }
    }

    public class _3DSecure
    {
        public string StatusCode { get; set; }
        public string StatusDetail { get; set; }
        public string TransactionId { get; set; }
        public string AcsUrl { get; set; }
        public string PaReq { get; set; }
        public string Status { get; set; }
    }

    public class PaymentResponse
    {
        public string TransactionId { get; set; }
        public string TransactionType { get; set; }
        public string Status { get; set; }
        public string StatusCode { get; set; }
        public string StatusDetail { get; set; }
        public int RetrievalReference { get; set; }
        public string BankResponseCode { get; set; }
        public string BankAuthorisationCode { get; set; }
        public PaymentMethod PaymentMethod { get; set; }
        public _3DSecure _3DSecure { get; set; }
    }
}