In the latest Braintree drop-in JS sdk (v3), you can override styles and some field options, such as placeholder via

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  container: '#dropin-container',
  card: {
    overrides: {
      fields: {
        number: {
          placeholder: 'Card Number',
          formatInput: false // Turn off automatic formatting
        }
      }
    }
  }
}, /* ... */);

Instead of styles or placeholders, I need to change a field's maxlength.


For some reason, their drop-in displays expiration field as MM/YY:

enter image description here

Yet their max length is up to 9 characters, which would be beyond even MM/YYYY:

enter image description here

I've tried to change the maxlength to 5 a few ways with no luck:

1) override via their SDK

(note, overriding placeholder works, but maxlength does not):

overrides: {
    fields: {
        expirationDate: {
            maxlength: 5
        }
    }
}

2) Override on the element itself

let expDateField = $(`[data-braintree-name='expirationDate']`);
expDateField.attr('maxlength', 5);

3) Then I realized it might be because it's coming through an iFrame. So I tried to target via iFrame and:

let iFrame = document.getElementById('braintree-hosted-field-expirationDate');
let content = i.contentWindow.document;

Results in error:

Uncaught DOMException: Blocked a frame with origin "http://localhost:1337" from accessing a cross-origin frame. at :1:25

This error probably makes sense as they want secure https: origins only to be manipulating iFrame data. But even still, this seems like a lot of work to change maxlength.

How can I change maxlength on a field?

0 Answers