SagePay clés de session marchand - AJAX

Question

Nous essayons d'intégrer avec l'API SagePay en utilisant un appel AJAX dans un code JQuery. Cette API particulière donne une réponse JSON comme un exemple ci-dessous:

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

En utilisant le code ci-dessous, nous pouvons authentifier avec succès contre l'API, mais se jeter avec un message sur Access-Control-Allow-Origin.

XMLHttpRequest ne peut pas charger https://pi-test.sagepay.com/api/v1/merchant-session-keys. La réponse à la demande de contrôle en amont ne passe pas la vérification du contrôle d'accès: aucun en-tête Access-Control-Allow-Origin n'est présent sur la ressource demandée. L'origine null n'est donc pas autorisée à accéder.

Quelqu'un a-t-il déjà rencontré ce problème?

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

Vous ne devriez pas utiliser jquery ajax directement pour faire une requête POST à ​​SagePay. Au lieu de cela, vous devez faire une requête ajax à votre serveur qui à son tour envoie les données à SagePay. Vous pouvez obtenir l'exemple php ici: SagePay drop-in Checkout

Veuillez vérifier le code C# ci-dessous que j'avais l'habitude de faire.

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