Utilize a cybersource silent order post integration using AJAX technology

I'm currently utilizing Cybersource Silent Order Post within Magento's one-page checkout. I am attempting to make an AJAX post to "". However, I am encountering the following error: "XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access. The response had HTTP status code 403"

I am seeking a specific answer related to Cybersource. Please advise if there are any alternative options aside from using AJAX.

Below is the code snippet for reference:


var url = jQuery("#post_url").val();
var access_key=jQuery("#access_key").val();
var profile_id=jQuery("#profile_id").val();
// more code...
// additional fields being assigned values
// more code...

var params ='access_key='+access_key+ '&profile_id='+profile_id+ '&'; // full params list omitted for brevity

var http= new XMLHttpRequest();
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.send(params);

http.onreadystatechange = function() {
    if(http.readyState == 4) {
        alert(http.responseText);
        console.log("I am back");
    }
}

Answer №1

It appears that the CyberSource endpoints do not support AJAX calls, which is why CORS is not configured for these endpoints. As a result, errors may occur when attempting to make AJAX calls.

According to the Silent Order POST documentation, the form should be submitted and the user will be redirected. Once the payment is processed, CyberSource will then redirect the user to the appropriate page. This process is similar to CyberSource Secure Acceptance Web/Mobile, but differs from the methods used by Adyen, Braintree, or Stripe, as they do utilize AJAX calls with responses being processed by the server.

Answer №2

CyberSource Secure Acceptance Silent Order Post operates as an HTTP FORM POST, akin to submitting a form and POSTing it to a specific endpoint. It does not have the capability to post data through AJAX.

If you are looking to make AJAX calls, the suitable API to utilize is the CyberSource Flex API, which functions in a similar manner to Stripe. The documentation for this API can be accessed on the Visa Developer Portal, as Visa is the owner of CyberSource.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating choices within a div in real-time by changing the select box dynamically

I need to swap out the select box that is nested inside this div <div class="models"> <select disabled="disable"> <option>Model Name</option> </select> </div> I am attempting to target the div and manipul ...

Ways to customize the appearance of an html upload button while keeping text alongside it

Currently working on a photo uploading website and looking to customize the appearance of the 'select file' button on the upload page. I've attempted adding a class to the <input type="file" name="uploadedfile"><br> line in order ...

The line break is being disregarded by jQuery's insertBefore function

In my simple HTML, I have a div with a limited width. Inside are several span tags styled with nowrap. Here is the CSS: .content { width: 50%; margin: 10px; padding: 10px; border: 1px solid black; } .adder { color: blue; cursor: po ...

The PHP code encountered a syntax error due to an unexpected $EOF on the final empty line

I've been tasked with maintaining an old website that went offline due to script errors. I managed to resolve most of the issues in the script, but there's one error that's giving me trouble. The site is showing a syntax error that says "une ...

Retrieve value from array input

Is there a way to extract input text values from an array using JavaScript? Here is the code snippet: Item : <input id="t_item" name="t_item[]" type="text" class="teks3"> Cost : <input id="t_cost" name="t_cost[]" type="text" class="teks3"> &l ...

When I tried running a basic AJAX JQuery code snippet, it unexpectedly threw a 500 internal

Hey there! I'm currently working on a Spring MVC project and encountering an error when I click the button in my form. 500 (Internal Server Error) jquery.min.js:6 x.ajaxTransport.x.support.cors.e.crossDomain.send j ...

Using the toggle method or IF statements in JavaScript to implement show and hide functionality upon clicking

I’ve been struggling with this issue for days now. It seems like I may have overcomplicated a simple piece of code. I'm trying to show some divs when a button is clicked, but I’m having trouble getting it to work properly. Initially, I used VAR.st ...

Nested Op.or operations within Sequelize for multiple conditions

Is it feasible to execute multiple operations using Op.or? For instance, when attempting: [Op.and]: { [Op.or]: [{x: 1}, {x: 1}], [Op.or]: [{y}, {y}] } The second Op.or seems to replace the first one. Is there a method to perform a ...

Verify if the image is present before reloading the webpage using JavaScript

How can I create a function in JavaScript that constantly checks for the presence of a specific image on a webpage and refreshes the page if the image is shown? I attempted writing this code but it did not function properly timer = setInterval(function() ...

When you click on the input field, a file manager window will open. You can then select a file and the URL of the selected file will be automatically added to the

I need assistance with customizing the code to open the flmngr window and add the URL of the selected file to the input field when onclick. window.onFlmngrAndImgPenLoaded = function() { var elBtn = document.getElementById("btn"); // Style bu ...

Is it feasible to utilize the Next.js (App Router) Context API to access this context in every fetch request?

To perform database queries, I require some context information. The context functions are not accessible on the client side, so I have been passing this context as args whenever I call a server component. However, I am exploring more efficient ways to h ...

"Within Angular 2+, the attribute referenced is not recognized as a valid property, even though it is explicitly defined within the @Input

The main goal here is to increase the vertical pixel count. <spacer [height]="200"></spacer> Initially facing an issue where an error message states that height is not a recognized attribute of spacer. To address this problem, I set up the fo ...

Learn the steps to implementing AJAX into a shopping cart using CodeIgniter

I'm encountering difficulties trying to implement Ajax functionality in a shopping cart created with CodeIgniter. The problem arises when a user clicks on an item add button in a dropdown menu, causing the item to be added to a div named #cart through ...

What is the best way to prevent an HTML table from having columns that adjust their width dynamically based on the content in the <td>?

Is there a way to create a table with equal column sizes that do not change based on the length of the data within the table? https://i.sstatic.net/Gyt4P.png In the image provided, the data under the heading "Title" seems to shift the second column to th ...

Not getting expected response from Angular 5 HTTP request

My HTTP calls are not firing as expected. I have set up the call in the subscribe method of route params. Strangely, the call only triggers on full page reload or when I first click a button to change the route. After that initial trigger, the call doesn&a ...

Protractor performs the afterEach function prior to the expectations being met

I am completely baffled by the behavior of this code. Everything seems to be executing correctly up until the 'expect' statement, at which point it abruptly navigates to a new page and runs the afterEach function. I've tried various solution ...

Preserve the data from a JavaScript object in Markup format

Is there a way to store markup in a JavaScript object for later retrieval? What is the purpose of this? I am facing an issue where if a description is too lengthy, I would like to divide it into smaller chunks, possibly using different HTML tags, rather ...

"Encountered an error due to an uninitialized variable while attempting to update it using the

I am encountering an issue where I want to update a variable upon onChange of an input type. The variable is needed for the name of the city in the API. However, whenever onChange is triggered, I keep getting an error message saying "Uncaught TypeError: Ca ...

Incorporating native JavaScript classes within an Angular application

I have created a custom JavaScript class: var ExampleClass = new function(elements) { this.elements = elements; this.someFunction() { // logic involving this.elements }; }; How can I incorporate it into an A ...

Implementing a universal font-size adjustment feature according to user preferences

Is it possible to allow users to choose the font size for the entire application, offering three options: Big, Medium, Small? If a user selects "Big", all fonts in the application will be resized globally. I have spent time researching this issue but ha ...