Main block of code most apps will need to implement hosted fields, the new way to collect credit card numbers with UltraCart.

Adding UltraCart Hosted Fields to a Javascript Checkout

<!-- Changes -->
<!-- 10/1/2015 -->
<!-- Added a redundant check to make sure the hosted-fields js file actually loads first.  this check has a document.write -->
<!-- call in it, so make sure the code below is at the end of the body, not in the head section. -->

<!-- 7/29/2015 -->
<!-- Added a hash of options to the setup call to allow for -->
<!-- some of the issues encountered using backbone.js checkouts. -->
<!-- 
     options: { callback: somefunction, selectorContext: elementOrjQueryObj }

     callback: pass a function that will receive the card object to determine cardType
     selectorContext: useful when using backbone as the parent div/span might not be attached to the domtree yet,
     and if it's not, the jQuery selections for the cc fields will fail.  By passing this in, the fields can be
     found within the backbone container element even if the backbone render() hasn't finished yet and been attached
     to the document tree.   Here's the difference:
     without selectorContext:   jQuery('#myCreditCardField)
     with selectorContext: jQuery('#myCreditCardField, options.selectorContext)
     the above line is used quite often within backbone.render() methods like this:  jQuery('#someField', this.el);
     See this for more examples:  http://api.jquery.com/jquery/#jQuery1
-->     

<!-- LOOK FOR "TODO" FOR THINGS YOU MIGHT NEED TO CHANGE! -->
<!-- TODO: Is this where your js files are located? -->
<script type="text/javascript" src="scripts/json3.min.js"></script>
<script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>

<!-- WE TWEAK THE FOLLOWING JS FILE FREQUENTLY. -->
<!-- DO NOT SOURCE THIS LOCALLY.  SERIOUSLY.  DO NOT. LOAD IT FROM OUR SERVERS. -->
<script type="text/javascript" src="//secure.ultracart.com/checkout/checkout-hosted-fields-1.0.js"></script>
<!-- do a check to ensure this file has loaded before proceeding. -->
<script type="text/javascript">window.UltraCartHostedFields || document.write('<script src="//secure.ultracart.com/checkout/checkout-hosted-fields-1.0.js?r=' + new Date().getTime() + '"><\/script>')</script>

<!-- ===============================================================================    -->
<!-- BEGIN PCI 3.0 compliance code                                                      -->
<!-- What you might need to change:                                                     -->
<!--    the selector properties point to the two credit card fields.  If you change the -->
<!--    ids of the fields, you need to re-point those selectors at the fields properly. -->
<!-- See also:                                                                          -->
<!-- http://docs.ultracart.com/display/ucdoc/UltraCart+Hosted+Credit+Card+Fields        -->
<!-- ===============================================================================    -->
<style type="text/css">
  /* it is important to set the border of the credit card fields explicitly (especially for google chrome) so
     the PCI fields can mimic them correctly when overlaying them.  If you don't specify the border, chrome
     will create a thick black border around the overlay fields.  very ugly.  */
  /* TODO: Is this the style you wish to use? */
  select, input{
    border: 1px solid rgb(238, 238, 238);
  }
</style>

<script type="text/javascript">

  var hostedFields = null;

  /* setup should be called each time the UI updates. */
  function setupSecureCreditCardFields(options) {
  /* set this to true to see verbose debugging.  usually only UltraCart support will use this. */
    window.ultraCartHostedFieldsDebugMode = false;  
    hostedFields = UltraCartHostedFields.setup(jQuery, JSON3, {
      'sessionCredentials': {
        /* TODO: merchantId is a javascript variable? Does it exist in your page already?  Is it set? */
        /* TODO: app.data.cart is the cart (backbone model) variable for the responsive checkout. ok? */
        'merchantId': merchantId, 'shoppingCartId': app.data.cart.get('cartId')
        /* TODO: Do yourself a favor.  Check the CaSe on the fields above. The last 'd' on shoppingCartId is lowercase... */
      },
      /* TODO: Do you have any css files you wish the hosted fields iframes to reference?  */
      /* TODO: (cont.) If so, uncomment these lines and supply. */
/*          'cssUrls':[
              'https://www.mysite.com/styles.css'
          ],
*/          

/* TODO: Make sure the two html inputs referenced below (by the selectors) have type="text" */
/* TODO (cont.) and not type="number" */
      'hostedFields': {
        'creditCardNumber': {
          'selector': '#creditCardNumber' /* TODO: Is this the html id of your credit card number field? */
          ,'callback': (options && options.callback ? options.callback : null)
          ,'selectorContext': (options && options.selectorContext ? options.selectorContext : null)
        },
        'creditCardCvv2': {
          'selector': '#creditCardVerificationNumber' /* TODO: Is this the html id of your cvv field? */
          ,'selectorContext': (options && options.selectorContext ? options.selectorContext : null)
        }
      }
    });
  }


  /* teardown should be called each time a UI needs destroying. */
  function teardownSecureCreditCardFields() {
    if (hostedFields != null) {
      hostedFields.destroy();
      hostedFields = null;
    }
  }

</script>
<!-- =============================================================================== -->
<!--   // END PCI 3.0 compliance code                                                -->
<!--   // ========================================================================== -->