Collecting Credit Card Numbers with Rest API

DEAD CODE. Do not use this code. It has been replaced by Hosted Fields.

Introduction

UltraCart created a new method for collecting credit card numbers using javascript checkouts. The credit card number is sent to UltraCart one time and then represented by a masked number.

Here are the reasons:

The transmittal of the card number goes directly to UltraCart via jsonp. This eliminates card numbers from passing through any proxy scripts running on merchant's web servers. By not passing the actual card number through a merchant's site, they exclude themselves from PCI requirements.
Transmitting the card number only once further discourages session hijacking from gaining access to the card number. UltraCart has never had a session hijacked to our knowledge, but if it ever happens, we (and you) are prepared to handle it in the best manner possible.

Steps to Implement

Add the following code to your site, adapting it as needed.
Review your validation code and ensure that any credit card number validation expects and validates against a masked card instead of a full card.
Test and place a few orders for thoroughness.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
 
// NOTE! This is an Example!  In your code, your cart object will usually be a global variable, and might not be named 'cart'. 
// So please take care to remove the local variable 'cart' that immediately follows this comment and replace all instances of
// 'cart' with the name of your cart object variable.
// Also, older versions of the checkout may use 'shoppingCartId' instead of just 'cartId'.  Examine your cart object and adjust the code as needed.
  var cart = {
        merchantId: 'DEMO',
        cartId: '12345',
        cardNumber: ''
  };
 
  function storeCard() {    
  
    // Extract the card number from the field
    var cardNumber = jQuery("#cardNumberId").val();
 
    // If they haven't specified 15 digits yet then don't store it.
    if (cardNumber.replace(/[^0-9]/g,"").length < 15) {
      // TODO - Verify your cart object is named 'cart'! This is an example only.  We see ALOT of merchants use this code with some github sources that use 'myCart' as their variable.  TEST THIS.  GET IT RIGHT!
      cart.creditCardNumber = cardNumber;
      return;
    }
 
    // Create a masked version of the card number and update the client field
    var maskedCardNumber = cardNumber;
    for (var i = 0; i < 12; i++) {
      maskedCardNumber = maskedCardNumber.replace(/[0-9]/, 'X');
    }
    
    // Store the masked one on the cart object to make sure a full card number doesn't go up.
    cart.cardNumber = maskedCardNumber;
    // Update the form as well
    jQuery("#cardNumberId").val(maskedCardNumber);
 
    // Perform the JSONP request to store it (asynchronous by nature)
    jQuery.getJSON('https://token.ultracart.com/cgi-bin/UCCheckoutAPICardStore?callback=?', 
      {
        merchantId: cart.merchantId,
        shoppingCartId: cart.cartId,
        cardNumber: cardNumber
      }
    ).done(function(data) { 
      if (data.success) {
        cart.creditCardNumber = data.maskedCardNumber;
        cart.creditCardType = data.cardType;
        jQuery("#cardNumberId").val(cart.creditCardNumber);
      }
    });
  }
 
</script>
 
Card Number <input type="text" name="cardNumber" onblur="storeCard()" id="cardNumberId"/> <br/>
Other Field <input type="text" name"other"/>

The rest_api github project has this code implemented for reference:

https://github.com/UltraCart/rest_api/tree/master/cart_example

You'll see a reference to it within copyAllElementValuesToCart (cart_X.X.js), and the actual function is found within ultracart_common_functions_X.X.js