Checkout UIs/
Hosted Fields/
Troubleshooting and FAQ

Troubleshooting and FAQ

This page answers common questions and troubleshoots issues you might run into while integrating Hosted Fields with the JavaScript SDK v4.

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

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

  1. Async/Await
// ...
await braintree.hostedFields.create({
  // ...
  fields: {
    cvv: { container: '#cvv' }
  }
});

Upon tokenization, Hosted Fields produces the nonce_from_the_client as it normally does, though the nonce data includes 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?AnchorIcon

Media queries are injected as-is into the hosted fields. This means that any media queries use the iframe viewport as their reference instead of the parent page.

Can I use a dropdown (<select>) for a field?AnchorIcon

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

  1. Async/Await
// ...

await 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
    }
  }
});

This produces a <select> element for the expiration month and expiration year fields instead of a text input.

Why do I need to use<div>elements in my form?AnchorIcon

Hosted Fields provides synthetic input elements inside of iframes on your page. Hosted Fields injects those iframes into <div> elements instead of <input> elements to limit side effects on your page.

Why does my field not look like a normal<input>?AnchorIcon

Your Hosted Fields inherit any styles you apply to a <div> on your page. Try adding a height or border value to your CSS to make each <div> look more like an <input>. For additional styling ideas, see the Hosted Fields examples.

On iOS, why does clicking a label not focus the field?AnchorIcon

Clicking on a <label> still focuses the input as usual on all browsers, except for iOS, where Hosted Fields disables its buggy behavior.

Frequent errorsAnchorIcon

You might see the following errors while integrating or testing Hosted Fields.

Container does not reference a valid DOM nodeAnchorIcon

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

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

With a valid selector or DOM node for each field, Hosted Fields initializes without throwing this error.

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

These sites are known to use aggressive sandboxing for their iframes, which can restrict many functions of Hosted Fields.

We recommend testing your integration outside of these JS sandbox sites to see if the unwanted behavior persists.