Setting up the API on your page

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>