Page Comparison

There are simple examples of all the major REST calls found here:

https://secure.ultracart.com/merchant/integrationcenter/checkoutapi_v3/demo1.html

Please notice that the script is running on secure.ultracart.com, so it doesn't suffer any cross-domain restrictions. As such, the urls are all relative (/rest/cart).

If you attempt to run a demo on your own machine, you'll need to install a proxy script, found here: https://github.com/UltraCart/responsive_checkout/blob/master/rest_proxy.php

After installing it, you need to adjust your url. Notice the difference below between line 3 and 4.

function createCart() {
  jQuery.ajax({
    // url: '/rest/cart',  // same domain
    url: '/rest_proxy.php?_url=/rest/cart',  // cross-domain
    headers: {'X-UC-Merchant-Id': 'DEMO',
      "cache-control": "no-cache"}, // could also pass merchant id as query parameter named '_mid' or cookie named 'UltraCartMerchantIdUltraCartMerchantID'
    dataType: 'json'
  }).done(function (cart) {
        jQuery('#createCartResults').html('<pre>' + JSON.stringify(cart, null, '  ') + '</pre>');
      });
}
 
jQuery(document).ready(function () {
  jQuery('#createCartButton').on('click', createCart);
});

Every call needs a merchant id (our merchant id is DEMO). We need to know who you are. There are three ways to provide the merchant id to the server:

1. Query Parameter: _mid=DEMO
2. HTTP Header: 'X-UC-Merchant-Id': 'DEMO'
3. Cookie named UltraCartMerchantIdUltraCartMerchantID

Most of the examples below use the http header since it's easy to use with jQuery. If you wished to do it for all your ajax calls, you could execute this javascript:

jQuery.ajaxSetup({ cache: false, headers: {'X-UC-Merchant-Id': 'DEMO', "cache-control": "no-cache"});

However, that makes each call less atomic (and jQuery doesn't recommend it). Still, it's an option and may work well with your site.

If you receive an error "Missing Merchant ID", you've forgotten to do one of the above.

Now, in case you're wondering why the three methods use different names...

1. We made the query parameter as short as possible to keep the urls as short as possible. We used an underscore to denote "meta data" to the call.
2. We follow common practices for naming custom http headers. While the X- prefix is officially out of vogue, we still think it looks cool.
3. The cookie 'UltraCartMerchantIdUltraCartMerchantID' is used in hundred of existing UltraCart checkout pages. So it made sense to stick with that cookie name.

function createCart() {
  jQuery.ajax({
    url: '/rest/cart',
    headers: {'X-UC-Merchant-Id': 'DEMO',
      "cache-control": "no-cache"}, // could also pass merchant id as query parameter named '_mid' or cookie named 'UltraCartMerchantIdUltraCartMerchantID'
    dataType: 'json'
  }).done(function (cart) {
        jQuery('#createCartResults').html('<pre>' + JSON.stringify(cart, null, '  ') + '</pre>');
      });
}
 
jQuery(document).ready(function () {
  jQuery('#createCartButton').on('click', createCart);
});

// since this demonstration has both a set and a clear, I'll need some state.
// so I'm going to use a global variable to store a cart reference.  Don't hate me.
var finalizeCart = null;
 
function finalizeAfter() {
 
  if (!finalizeCart) {
    jQuery.ajax({
      url: '/rest/cart',
      headers: {'X-UC-Merchant-Id': 'DEMO',
        "cache-control": "no-cache"}, // could also pass merchant id as query parameter named '_mid' or cookie named 'UltraCartMerchantIdUltraCartMerchantID'
      dataType: 'json',
      async: false // for the demonstration, I'm keeping it simple with an synchronous call...
    }).done(function (cart) {
          finalizeCart = cart;
        });
  }
 
  jQuery.ajax({
    url: '/rest/cart/setFinalizeAfter?minutes=20', //minutes is optional.  default is 30
    type: 'POST', // Notice
    headers : { "cache-control": "no-cache" },
    contentType: 'application/json; charset=UTF-8',
    data: JSON.stringify(finalizeCart),
    dataType: 'json'
  }).done(function (data, textStatus, jqXHR) {
 
        var txt = jqXHR.status == 204
            ? "Server returned 204 'No Content', so the setFinalizeAfter was successful"
            : "Error. setFinalizeAfter failed with this: " + textStatus;
        var pre = jQuery('<pre>');
        pre.text(txt);
        jQuery('#finalizeResults').html('').append(pre);
 
 
      });
}
 
 
function clearFinalizeAfter() {
  if (!finalizeCart) {
    alert('Please click the finalizeAfter button before attempting to clear it.');
    return;
  }
 
  jQuery.ajax({
    url: '/rest/cart/clearFinalizeAfter',
    type: 'POST', // Notice
    headers : { "cache-control": "no-cache" },
    contentType: 'application/json; charset=UTF-8',
    data: JSON.stringify(finalizeCart),
    dataType: 'json'
  }).done(function (data, textStatus, jqXHR) {
 
        var txt = jqXHR.status == 204
            ? "Server returned 204 'No Content', so the clearFinalizeAfter was successful"
            : "Error. clearFinalizeAfter failed with this: " + textStatus;
        var pre = jQuery('<pre>');
        pre.text(txt);
        jQuery('#finalizeResults').html('').append(pre);
 
      });
}
 
 
jQuery(document).ready(function () {
  jQuery('#finalizeAfterButton').on('click', finalizeAfter);
  jQuery('#finalizeClearButton').on('click', clearFinalizeAfter);
});

var customerCart = null; // another global variable.  I need to keep state for this demonstration
 
function register() {
 
  // any cart passed to register must have a valid merchant id AND cart id, so I'm creating a cart here.
  if (!customerCart) {
    jQuery.ajax({
      url: '/rest/cart',
      headers: {'X-UC-Merchant-Id': 'DEMO',
        "cache-control": "no-cache"}, // could also pass merchant id as query parameter named '_mid' or cookie named 'UltraCartMerchantIdUltraCartMerchantID'
      dataType: 'json',
      async: false // for the demonstration, I'm keeping it simple with an synchronous call...
    }).done(function (cart) {
          customerCart = cart;
        });
  }
 
  customerCart.email = jQuery.trim(jQuery('.customer-section input[name=email]').val());
  customerCart.password = jQuery.trim(jQuery('.customer-section input[name=password]').val());
 
  jQuery.ajax({
    url: '/rest/cart/register',
    type: 'POST', // Notice
    headers : { "cache-control": "no-cache" },
    contentType: 'application/json; charset=UTF-8',
    data: JSON.stringify(customerCart),
    dataType: 'json'
  }).done(function (loggedInCart) {
        customerCart = loggedInCart;
 
        var txt = JSON.stringify(customerCart, null, '  ');
        var pre = jQuery('<pre>');
        pre.text(txt);
        jQuery('#customerResults').html('').append(pre);
 
      });
}
 
function logout() {
  if (!customerCart || !customerCart.loggedIn) {
    alert('Please login first.');
    return;
  }
 
  jQuery.ajax({
    url: '/rest/cart/logout',
    type: 'POST', // Notice
    headers : { "cache-control": "no-cache" },
    contentType: 'application/json; charset=UTF-8',
    data: JSON.stringify(customerCart),
    dataType: 'json'
  }).done(function (loggedOutCart) {
        customerCart = loggedOutCart;
 
        var txt = JSON.stringify(customerCart, null, '  ');
        var pre = jQuery('<pre>');
        pre.text(txt);
        jQuery('#customerResults').html('').append(pre);
 
      });
}
 
 
function login() {
 
  // any cart passed to register must have a valid merchant id AND cart id, so I'm creating a cart here.
  if (!customerCart) {
    alert('Please register first to create a cart');
    return;
  }
 
  customerCart.email = jQuery.trim(jQuery('.customer-section input[name=email2]').val());
  customerCart.password = jQuery.trim(jQuery('.customer-section input[name=password2]').val());
 
  jQuery.ajax({
    url: '/rest/cart/login',
    type: 'POST', // Notice
    headers : { "cache-control": "no-cache" },
    contentType: 'application/json; charset=UTF-8',
    data: JSON.stringify(customerCart),
    dataType: 'json'
  }).done(function (loggedInCart) {
        customerCart = loggedInCart;
 
        var txt = JSON.stringify(customerCart, null, '  ');
        var pre = jQuery('<pre>');
        pre.text(txt);
        jQuery('#customerResults').html('').append(pre);
 
      });
}
 
 
function resetPassword() {
 
  // any cart passed to register must have a valid merchant id AND cart id, so I'm creating a cart here.
  if (!customerCart) {
    alert('Please register first to create a cart');
    return;
  }
 
  customerCart.email = jQuery.trim(jQuery('.customer-section input[name=email3]').val());
 
  jQuery.ajax({
    url: '/rest/cart/resetPassword',
    type: 'POST', // Notice
    headers : { "cache-control": "no-cache" },
    contentType: 'application/json; charset=UTF-8',
    data: JSON.stringify(customerCart),
    dataType: 'text' // Notice - plain text response.  no json
  }).done(function (response) {
 
        var pre = jQuery('<pre>');
        pre.text(response);
        jQuery('#customerResults').html('').append(pre);
 
      });
}
 
 
jQuery(document).ready(function () {
  jQuery('#registerButton').on('click', register);
  jQuery('#logoutButton').on('click', logout);
  jQuery('#loginButton').on('click', login);
  jQuery('#resetPasswordButton').on('click', resetPassword);
});