jquery - SagePay 商户 session key - AJAX

Question

我们正在尝试在某些 JQuery 代码中使用 AJAX 调用与 SagePay API 集成。此特定 API 提供 JSON 响应，如下所示:

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

使用下面的代码，我们可以成功地针对 API 进行身份验证，但随后会被抛出有关 Access-Control-Allow-Origin 的消息。

XMLHttpRequest 无法加载 https://pi-test.sagepay.com/api/v1/merchant-session-keys 。对预检请求的响应未通过访问控制检查:请求的资源上不存在 Access-Control-Allow-Origin header 。因此不允许访问 Origin null。

以前有人遇到过这个问题吗？

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');
        }
      });

Answer 1

您不应直接使用 jquery ajax 向 SagePay 发出 POST 请求。相反，您必须向服务器发出 ajax 请求，然后服务器将数据发布到 SagePay。您可以在此处获取 php 示例:SagePay drop-in Checkout

请检查下面我用来执行此操作的 C# 代码。

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; }
    }
}