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                                                -->
<!--   // ========================================================================== -->

Hey Perry,

I have a javascript/REST API checkout page, and I've added these hosted credit card fields to it, however now I can't pass a valid credit card number through in my javascript code. How can I use these hosted fields in conjunction with the javascript REST API?

Hey Perry.

This is an edit to the earlier post I did. To explain again, I was able to deploy hosted fields.
Also, I was able to see that the hosted fields scripts did place back the masked values into our original fields.
So this should help with validation etc.

However, I have an issue. My javascript checkout does send the masked values from the hosted fields. See here: http://screencast.com/t/TDsd0iImAHih .

However, when I get the reply back from Ultracart, the credit card field values are missing, giving me my error. See here: http://screencast.com/t/599DXcohSFj .

I checked, and they do have the same cartID from the initialization of hosted fields, and the CVV returns XXX so that was posted correctly. Anything I am still missing with the CC number?

Hey, sorry guys. I'm not getting ANY notification that commets are being posted to this gist. I'm not sure why. I'm going to look at my settings. For now, please post issues to the main github projects (whichever one your code is based on). I'll see what's up with my personal account settings that I need to adjust.

DO NOT REQUEST HELP HERE

There doesn't appear to be any way to receive notifications on gists.
If you post here, I will NOT receive an email notification.

Please use a github repos to post issues if you need help.
Pick the one that your source originates from:

• https://github.com/UltraCart/responsive_checkout/issues
• https://github.com/UltraCart/rest_api/issues
• https://github.com/UltraCart/two_page_trial/issues

I'd added some options to the setup method to help with backbone.js apps. We've noticed that sometimes the credit card fields are part of a rendered div that isn't yet attached to the domtree when the setup call is made. This makes it so the jQuery selector returns back nothing and the field isn't setup. It shouldn't happen, but it does. So we're taking steps to ensure it doesn't.

Psupena, did you ever figure out the issue?

Or anyone have ideas? I can't find a resolution anywhere.