Bluesnap api implementation using webapi2 and jquery

Question

I am always getting authentication required window. when I call blue snap sandbox URL. I have googled and read some article which says because of CORS the Authentication required message box is appearing. I tried adding the basic authentication in the header itself but no luck.

JS Code

$(document).ready(function() {
    $('#paymentsubmit').click(function(e) {
        xmlstring =
            "<?xml version='1.0'?>" +
            "<card-transaction xmlns='http://ws.plimus.com'>" +
            "<card-transaction-type>AUTH_ONLY</card-transaction-type>" +
            "<recurring-transaction>ECOMMERCE</recurring-transaction>" +
            "<soft-descriptor>DescTest</soft-descriptor>" +
            "<amount>11.00</amount>" +
            "<currency>USD</currency>" +
            "<card-holder-info>" +
            "<first-name>test first name</first-name>" +
            "<last-name>test last name</last-name>" +
            "</card-holder-info>" +
            "<credit-card>" +
            "<card-number>4263982640269299</card-number>" +
            "<security-code>837</security-code>" +
            "<expiration-month>02</expiration-month>" +
            "<expiration-year>2018</expiration-year>" +
            "</credit-card>" +
            "</card-transaction>";

        $.ajax({
            data: xmlstring,
            Authorization: "Basic " + btoa("API_14655582321891175640599" + ":" + "password"),
            dataType: 'jsonp',
            xhrFields: {
                withCredentials: true
            },
            contentType: 'application/xml',
            bluesnapversion: '2.0',
            type: 'POST',
            // beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', 'Basic ' + btoa('API_14655582321891175640599' + ':' + 'Aut0mat!c')); },
            url: 'https://sandbox.bluesnap.com/services/2/transactions'

        }).done(function(data) {
            alert('Registered Successfully');
        }).error(function(jqXHR, textStatus, errorThrown) {
            alert(jqXHR.responseText || textStatus);
        })
    });
});

score 0 · Answer 1 · answered Jun 27 '16 at 08:29

After the few days of research we have found that this bluesnap implementation is not working from the client side directly(Getting some CORS issues even after adding all the necessary headers and other stuff). so we tried alternate method of calling the BlueSnap API from server side controller.

Controller

 [EnableCors(origins: "http://localhost:49369", headers: "*", methods: "*", exposedHeaders: "X-Custom-Header")]

    public class BlueSnapController : ApiController
    {
        [ActionName("PostBlueSnapData")]
        [HttpPost]
        public IHttpActionResult PostBlueSnapData(UtilityModels bluesnapmodels)
        {
            string responseFromServer = string.Empty;
            try
            {
                // Create a request using a URL that can receive a post. 
                HttpWebRequest request = (HttpWebRequest)WebRequest.Create("https://sandbox.bluesnap.com/services/2/transactions");
                // Set the Method property of the request to POST.
                request.Method = "POST";
                request.Headers["Authorization"] = "Basic QVBJ&zE0NjU1NTgyNzIxODkxMTc1NjQwNTk5OkF1dDBtYXQhYw==";
                request.UserAgent = ".NET Framework Test Client";
                string postData = bluesnapmodels.XMLData;
                byte[] byteArray = Encoding.UTF8.GetBytes(postData);
                request.ContentType = "application/xml";
                request.ContentLength = byteArray.Length;
                Stream dataStream = request.GetRequestStream();
                dataStream.Write(byteArray, 0, byteArray.Length);
                dataStream.Close();

                // Get the response.

                HttpWebResponse myHttpWebResponse = (HttpWebResponse)request.GetResponse();
                Console.WriteLine((myHttpWebResponse.StatusDescription));
                dataStream = myHttpWebResponse.GetResponseStream();
                StreamReader reader = new StreamReader(dataStream);
                 responseFromServer = reader.ReadToEnd();
                Console.WriteLine(responseFromServer);
                reader.Close();
                dataStream.Close();
                myHttpWebResponse.Close();
            }
            catch (WebException wex)
            {
                var pageContent = new StreamReader(wex.Response.GetResponseStream())
                                      .ReadToEnd();

                Console.WriteLine(wex.Message);
            }


            return Ok(responseFromServer);

        }


    }

Ajax call

 <script>
$(document).ready(function () {

    $('#paymentsubmit').click(function (e) {

        var xmlstring =
         "<?xml version='1.0'?>" +
                     "<card-transaction xmlns='http://ws.plimus.com'>" +
                     "<card-transaction-type>AUTH_ONLY</card-transaction-type>" +
                     "<recurring-transaction>ECOMMERCE</recurring-transaction>" +
                     "<soft-descriptor>DescTest</soft-descriptor>" +
                     "<amount>11.00</amount>" +
                     "<currency>USD</currency>" +
                     "<card-holder-info>" +
                        "<first-name>test1 first name</first-name>" +
                        "<last-name>test1 last name</last-name>" +
                        "</card-holder-info>" +
                        "<credit-card>" +
                         "<card-number>4263982640269299</card-number>" +
           "<security-code>837</security-code>" +
           "<expiration-month>02</expiration-month>" +
           "<expiration-year>2018</expiration-year>" +
        "</credit-card>" +
                     "</card-transaction>";

        var blueSnapData = {
            XMLData: xmlstring

            }

        $.ajax({
            withCredentials: true,
            type: 'POST',
            url: 'http://localhost:4233/api/BlueSnap/PostBlueSnapData',
            data: blueSnapData
        }).done(function (data) {
            alert('Registered Successfully' + '/n'+data);
        }).error(function (jqXHR, textStatus, errorThrown) {
            alert(jqXHR.responseText || textStatus);
        })


    });

})


</script>

This method is working fine. I am curious to see if we have any other options to implement.

Thanks Dev

Bluesnap api implementation using webapi2 and jquery

1 Answers1