Hosted Fields

Troubleshooting and FAQanchor

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

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

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

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.

To transact with a CVV-only nonce, see the Transaction.Sale() examples.

Why are media queries not being applied inside the frames?anchor

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?anchor

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?anchor

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>?anchor

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?anchor

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

Frequent errorsanchor

options.id does not reference a valid DOM elementanchor

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

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

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

Hosted Fields requires valid CSS2 selectors for each field declaration.

  1. JavaScript
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 8anchor

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.

  1. JavaScript
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,
    //...
  }
});

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

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 →