Troubleshooting and FAQ

JavaScript v2

• Current Braintree SDKs
• Android v5
• iOS v6
• JavaScript v3
• Previous Versions
• Android v4
• iOS v5
• JavaScript v2

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:

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?

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.iddoes not reference a valid DOM element

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

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.

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.

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