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.hostedFields.create({
  // ...
  fields: {
    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?

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

JavaScript
Copy
Copied
// ...

braintree.hostedFields.create({
  // ...
  fields: {
    // ...
    expirationMonth: {
      selector: '#my-expiration-month-selector',
      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: {
      selector: '#my-expiration-year-selector',
      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

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

Hosted Fields requires valid CSS2 selectors for each field declaration.

JavaScript
Copy
Copied
// ...
braintree.hostedFields.create({
  // ...
  fields: {
    number: { selector: '#my-number-selector' },
    expirationDate: { selector: '#my-date-selector' }
  }
}, /* ... */);

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.

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: Examples →

Still have questions?

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