Skip to content

Instantly share code, notes, and snippets.

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

perrytew commented Jul 29, 2015

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

rflournoy commented Dec 18, 2015

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