Rails Braintree - To override braintree-dropin.css

Question

I am using braintree as payment gateway in one of my ruby on rails app. But I am unable to customize the braintree submit form styles(css) for dropin form submit created by braintree js. How could I customize / override the css (style)?

Answer 1

_{Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.}

Braintree's Drop-In form is externally hosted and loaded into your page using an iFrame. Because the form is hosted elsewhere, the only way you'd be able to change the appearance is if Braintree created javascript hooks into the CSS, as they do for their Hosted Fields form styling. There are no analogous hooks that let you edit the CSS for the Drop-In form, so no changes can be made to the Drop-In's appearance.

The inability to edit the Drop-In form is a design choice made with the goal of keeping the Drop-In as simple as possible. If you're starting to run up against the limitations of the Drop-In form, consider using the Hosted Fields solution instead.

Answer 2

While the Braintree Drop-In UI JS v2 SDK does not offer support for CSS styling, the JS v3 SDK does.

To quote the external link:

Most elements in Drop-in have a data-braintree-id attribute that can be used for applying specific styles.

The example cited is:

[data-braintree-id="toggle"] {
  display: none;
}

It goes on to state that you can alternatively use a overrides object to override styles.

The overrides object can also be used to alter the styling of card fields with a styles object. You can override styles for all fields of a specific element type...

With an example like:

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  container: '#dropin-container',
  card: {
    overrides: {
      styles: {
        input: {
          color: 'blue',
          'font-size': '18px'
        },
        '.number': {
          'font-family': 'monospace'
        },
        '.invalid': {
          color: 'red'
        }
      }
    }
  }
});

The caveat is that the drop-in UI differs significantly between the two SDKs.