Troubleshooting and FAQ

JavaScript v3

• 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.hostedFields.create({
  // ...
  fields: {
    cvv: { container: '#cvv' }
  }
}, /* ... */);

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?

You can use dropdowns for expiration month and expiration year fields.

// ...

braintree.hostedFields.create({
  // ...
  fields: {
    // ...
    expirationMonth: {
      container: '#expiration-month',
      placeholder: 'Expiration month',
      select: {
        options: [
          '01 - January',
          '02 - February',
          '03 - March',
          '04 - April',
          '05 - May',
          '06 - June',
          '07 - July',
          '08 - August',
          '09 - September',
          '10 - October',
          '11 - November',
          '12 - December'
        ]
      }
    },
    expirationYear: {
      container: '#expiration-year',
      placeholder: 'Expiration year',
      select: true
    }
  }
}, /* ... */);

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

Selector does not reference a valid DOM node

Hosted Fields requires valid CSS2 selectors or DOM nodes for each field declaration.

// ...
braintree.hostedFields.create({
  // ...
  fields: {
    number: { container: '#number' },
    expirationDate: { container: '#expiration-date' }
  }
}, /* ... */);

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.