Authorize.Net Directpost is Overly Complex

One of the necessary evils that every ecommerce website that wants to accept credit card transactions must deal with is some sort of payment processing company. It just so happens that Authorize.net is one of the largest payment processors around, and they allow you to choose from a few different ways to integrate their payment processing functionality into your website. One of their ways is via DirectPost, which allows an eCommerce website to process a credit card transaction without the credit card information ever being sent through the website’s servers.

While the ability to ensure that no credit card information passes through your website is useful for PCI compliance and the ability to lower the potential losses in the event of a hack like the ones that have affected Sony, Home Depot, and Target among others. The implementation of this payment method is less than ideal, especially if you are utilizing Magento as your eCommerce platform. With Magento, the credit card information is entered into a form that is contained in an iFrame that originates on Authorize.net’s servers. Once the order is ready to be submitted, JavaScript triggers the form submission to a completely separate domain with a target on the form of a reloaded iFrame.

When the response from Authorize.net returns, an error may be displayed for credit card verification issues as well as many other reasons. Unfortunately, due to the nature of this iFrame’s content originating in another domain, any attempt via JavaScript to try to inspect what the content is or modify it is blocked by the browser as a part of the browser’s cross site scripting, or XSS, protections. As a result, the only way that you know that something is loaded in the iFrame is that you are able to successfully listen for the onLoad event for the iFrame and respond to it accordingly.

Many times the response that is rendered in the iFrame contains a redirection URL that redirects the browser to the checkout success page. Other responses will display a standard error message. However, this all relies upon Authorize.Net to be able to successfully validate and authorize the credit card payment information. If there is an error which would typically throw an HTTP 50X error and that message is returned to the user’s browser, there is no way of knowing what was returned to the iFrame since the JavaScript in the browser is unable to access it.

Although the DirectPost functionality provided by Authorize.Net holds great promise, there have been reports on Stack Exchange and elsewhere that users regularly have issues with DirectPost, and many developers that have attempted to implement it on their sites have tried and failed, instead turning back to much simpler Credit Card Processing processes.

Related Posts

Apr 14, 2014
One minute

Varnish and Magento Performance Mystery

One of the things that you think you will solve when you implement a Varnish caching server in front of a Magento website is performance problems. However, this is not necessarily the case.

When I set Varnish up to cache content in front of my Magento website, I get what seems to be much improved performance. If I run a few tests in the developer tools of Chrome, it seems that the waterfall chart makes sense and the data is loaded appropriately and in a timely manner with the main HTML being downloaded in about 300ms.

Jul 3, 2014
2 minutes

== and === in JavaScript and HTML Input Elements

If you read any current information about best practices in JavaScript, you will typically find the following advice somewhere in the list of things to do.

Always use === and !== while avoiding == and !=

While I will never argue against this advice, there are a few things that a developer shoule realize when using === and !== instead of == and !=.

  1. === and !== first do a check of the data type of the two objects you are comparing. JavaScript never forces you to explicitly define the datatype for an object you are creating as it will automatically assign one based on the contents of the object and how it was created.
  2. The output of all of the Math functions produce integers or floats as the datatypes for the resultant numbers. For example, Math.floor(10.39438) will produce 10.
  3. When retrieving the value of any select or input or textarea is always return as a string. This means that even though the value of the string may be a perfectly good number, it will never match a number data type. For example "10" is not equal to 10 when using the ===.

You should always use === and !== instead of == and !=, but you should make sure you understand the datatypes you are dealing with so that your comparison works as expected without any surprises at runtime.

Mar 28, 2014
2 minutes

Launching a Redesign of a Website

Over the last few months, I have been working on a major redesign of an existing Magento website. One of the major goals of the redesign was to take a legacy desktop-only website and upgrade it to take full advantage of Responsive Web Design so that customers could equally utilize mobile and desktop devices to browse and purchase products.

For a site that had seen only minor updates over the last 5 years, this redesign represented a major change visually and navigationally from the previous site. Based on the history of the site, the development team was optimistic that the redesign would be well-received, but were suprised by a few things that came up in the feedback we saw.