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

Upon tokenization, 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

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

  1. Callback
  2. Promise
// ...

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

Selector does not reference a valid DOM nodeanchor

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

  1. Callback
  2. Promise
// ...
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 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 →