Can I verify the CVV when a customer uses or updates a vaulted card?

Set up Hosted Fields as you normally would, but this time, only specify cvv in the top-level options:

JavaScript
Copy
Copied
braintree.setup('YOUR_CLIENT_TOKEN', 'custom', {
  id: 'my-sample-form',
  hostedFields: {
    cvv: {
      selector: '#cvv'
    }
  }
});

Why are media queries not being applied inside the frames?

Media queries are injected as-is into the hosted fields. This means that any media queries will use the iframe viewport as their reference instead of the parent page.

Can I use a dropdown (<select>) for a field?

We do not support dropdown <select> elements in this version of the JavaScript SDK. Upgrade to version 3 of the SDK to get this feature.

Why do I need to use <div> elements in my form?

Hosted Fields provides synthetic input elements inside of iframes on your page. Using a <div> as opposed to an <input> allows us to inject iframes with limited side-effects.

Why does my field not look like a normal <input>?

Any styles applied to a <div> on your page will also be applied to your Hosted Fields. You might want to try adding a height or border value to your CSS to make each <div> look more like an <input>. For additional styling ideas, check out our Hosted Fields examples.

On iOS, why does clicking a label not focus the field?

Clicking on a <label> will still focus the input as usual on all browsers, except for iOS where we disable its buggy behavior.

Frequent errors

options.id does not reference a valid DOM element

Hosted Fields requires a valid <form> element to be specified as options.id.

JavaScript
Copy
Copied
braintree.setup('TOKEN', 'custom', {
  id: 'my-form-id',
  hostedFields: { /* ... */ }
});

Unable to find element with selector <selector> for Hosted Fields

Hosted Fields requires valid CSS2 selectors for each field declaration.

JavaScript
Copy
Copied
braintree.setup('TOKEN', 'custom', {
  id: 'my-form-id',
  hostedFields: {
    number: { selector: '#my-number-selector' },
    expirationDate: { selector: '#my-date-selector' }
  }
});

My input text is not vertically aligned in IE 8

Specify a line-height for your inputs that is equal to the height of the container. This should only be necessary for IE8, so you can conditionally apply it.

JavaScript
Copy
Copied
var myStyles = {
  'input': {
    'color': 'cornflowerblue'
  }
};

if (document.all && document.documentMode && document.documentMode === 8) {
  myStyles.input['line-height'] = '30px';
}

braintree.setup('TOKEN', 'custom', {
  hostedFields: {
    styles: myStyles,
    //...
  }
});

Upon submission, Hosted Fields will produce the nonce_from_the_client as it normally does, though the nonce data will include only a CVV value. Use this nonce_from_the_client in conjunction with the_payment_method_token representing your customer's card to validate it.

Hosted Fields may exhibit unexpected behavior when testing in sites such as CodePen, JS Bin, JSFiddle and others

These sites are known to use aggressive sandboxing for their iframes (not a bad thing), which can potentially restrict many functions of Hosted Fields.

We recommend testing your integration outside of these JS sandbox sites to see if the unwanted behavior persists.

Next Page: Examples →

Still have questions?

If you can’t find an answer, contact our Support team