XHR Issues and the Relay Script

Cross Domain Restrictions

Cross Domain javascript requests aren't allowed. Because of hackers, I cannot make an ajax call from www.mystore.com to api.ultracart.com and use the result to modify my web page in any way. Yes, there are hacks and creative solutions to work around this, but they are numerous limitations to them and we highly doubt you wish to build your ecommerce solution on such unreliable means of remote communication.

The solution is to place a script on your site that talks server-to-server to the ultracart server. By doing this, and directing all remote calls to your relay script, there are no security restrictions. This solution works very well.

Recent Changes

 


This API is in maintenance mode.  It is no longer actively developed or supported.   Please use the REST API instead.

Requirements

  • jQuery 1.4+

Installing

As a general rule, make sure that you're referencing all scripts (jQuery, MooTools, checkoutapi.js, etc.) using HTTPS URLS all from the same domain in your HTML file.

Make sure your web server has an SSL certificate. Asking customers to enter their credit card on a non-SSL site would dramatically lower conversion and pose a security risk.

If you're going to create a custom checkout on your own web server then you need to follow of important steps.

Version 2.0

Testing the connection

By default, the latest versions of the checkout api will test the connection upon page load. This is very helpful when getting started. Once you are certain of your remote api url and connectivity, you may disable it by adding the following parameter to your config:

doNotTestRemoteConnection:false

For example:

var merchantCartConfig = { 
merchantId: "DEMO", 
secureHostName:'www.mystore.com', 
remoteApiUrl:"https://www.mystore.com/proxy.php", 
debugMode:true, 
verboseAjax:true, 
doNotTestRemoteConnection:true 
} 

Legacy Versions

Version 1.0

  • Download the required files, mootools and checkout API javascript, to your server.
  • Download the PHP proxy script from the integration center and place it on your web server. The PHP script requires that your server have the Curl module with SSL enabled. This is a very common module to have available in most LAMP hosting environments. An ASP version of the relay script will be available in the future for Microsoft hosting environments. The direct download link for the PHP proxy script is: https://github.com/UltraCart/legacy_javascript/blob/master/example/proxy.php
  • Call the initializeCheckoutAPI method with your merchant ID, your custom SSL host name if you have one or null for the second parameter, and then the HTTPS URL to the relay script that you have installed on your server.

    Let's pretend that I have a site called avkits and the domain is www.avkits.com. I've already installed an SSL certificate with my hosting company so that I can access the site via https://www.avkits.com or http://www.avkits.com. I've also downloaded the three files mentioned below to the root directory of my hosting account. Below is an example of my initialization code for my HTML page:

    <script type="text/javascript" src="/mootools-1.2-core-yc.js"></script>
    <script type="text/javascript" src="/checkoutapi.js"></script>
    <script type="text/javascript">
       var relayUrl = "https://www.avkits.com/proxy.php"; 
       initializeCheckoutAPI('AVKIT', null, relayUrl);
    </script>
    


    Notice that the URL to proxy script is the complete HTTPS url.

Version 1.1

Version 1.2

  • Download the required files, jQuery and checkout API javascript, to your server.
  • Download the PHP proxy script from the integration center and place it on your web server. The PHP script requires that your server have the Curl module with SSL enabled. This is a very common module to have available in most LAMP hosting environments. The direct download link for the PHP proxy script is: https://github.com/UltraCart/legacy_javascript/blob/master/example/proxy.php
  • Call the initializeCheckoutAPI method with your merchant ID, your custom SSL host name if you have one or null for the second parameter, and then the HTTPS URL to the relay script that you have installed on your server.

    <script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
      <script type='text/javascript' src='js/jquery.json-2.2.min.js'></script>
      <script type='text/javascript' src='js/checkoutapi-1.1.js'></script>
    
      <script type='text/javascript'>
        window.onload = function(){
          var relayUrl = "https://www.avkits.com/proxy.php"; 
          initializeCheckoutAPI({merchantId: "DEMO", secureHostName:'secure.ultracart.com', callbackUrl:relayUrl, debugMode:true, verboseAjax:true});
          getCartInstance();
        };
       </script>