Skip to content

Instantly share code, notes, and snippets.

  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Main block of code most apps will need to implement hosted fields, the new way to collect credit card numbers with UltraCart.
<!-- 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:
<!-- 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>
<script type="text/javascript" src="//"></script>
<!-- do a check to ensure this file has loaded before proceeding. -->
<script type="text/javascript">window.UltraCartHostedFields || document.write('<script src="//' + 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: -->
<!-- -->
<!-- =============================================================================== -->
<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);
<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: is the cart (backbone model) variable for the responsive checkout. ok? */
'merchantId': merchantId, 'shoppingCartId':'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':[
/* 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 = null;
<!-- =============================================================================== -->
<!-- // END PCI 3.0 compliance code -->
<!-- // ========================================================================== -->
Copy link

Hey Perry,

We have a lot of inline validation in our custom version of the api cart. Is there some way for me to know if the customer-entered/currently-showing cc and cvv numbers are valid when using this new method? Like, is there a flag in the hostedFields object maybe? Or will submitting the order (and having invalid numbers return cart errors) be the only way of doing things from now on? (In which case I'll probably just remove the inline validation from the cc and cvv number fields in our custom cart and call it good.)

Copy link

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?

Copy link

psupena commented Jun 5, 2015

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: .

However, when I get the reply back from Ultracart, the credit card field values are missing, giving me my error. See here: .

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?

Copy link

perrytew commented Jun 9, 2015

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.

Copy link

perrytew commented Jun 9, 2015


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:

Copy link

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.

Copy link

Psupena, did you ever figure out the issue?

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment