Rails Braintree - переопределить braintree-dropin.css

Question

Я использую Braintree в качестве платежного шлюза в одном из моих приложений ruby ​​on rails. Но я не могу настроить стили формы отправки (css) для braintree, созданной braintree js. Как я могу настроить / переопределить CSS (стиль)?

Answer 1

_{Полное раскрытие: я работаю в Braintree. Если у вас есть какие-либо дополнительные вопросы, не стесняйтесь обращаться в службу поддержки.}

Drop-In-форма Braintree размещается снаружи и загружается на вашу страницу с помощью iFrame. Поскольку форма размещена в другом месте, вы можете изменить внешний вид только в том случае, если Braintree создаст в CSS хуки javascript, как они делают для стилизации своих размещенных полей. Не существует аналогичных хуков, позволяющих редактировать CSS для формы Drop-In, поэтому нельзя вносить изменения в внешний вид Drop-In.

Невозможность редактировать форму ввода - это выбор дизайна, сделанный с целью сделать максимально простой ввод информации. Если вы начинаете сталкиваться с ограничениями формы Drop-In, рассмотрите возможность использования решения Hosted Fields.

Answer 2

В то время как в Braintree Drop-In UI JS v2 SDK не поддерживается поддержка стилей CSS, в JS v3 SDK есть поддержка.

Чтобы процитировать внешнюю ссылку:

Большинство элементов в Drop-in имеют data-braintree-id атрибут, который можно использовать для применения определенных стилей.

Приведенный пример:

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

Далее утверждается, что вы можете альтернативно использовать overrides объект для переопределения стилей.

overrides Объект также может быть использован для изменения стиля полей карты с помощью объекта стилей. Вы можете переопределить стили для всех полей определенного типа элемента...

С примером, как:

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

Предостережение заключается в том, что выпадающий интерфейс значительно отличается между двумя SDK.