Rails Braintree -重写braintree-dropin.css

Question

我使用braintree作为支付网关在我的红宝石rails应用程序。但是我无法自定义braintree提交表单样式(Css)，用于braintree js创建的dropin表单提交。如何自定义/重写css (样式)？

Answer 1

虽然Braintree插入的UI JS v2 SDK不提供对CSS样式的支持，但JS v3 SDK。

引用外部链接：

跳入中的大多数元素都有一个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'
        }
      }
    }
  }
});

但需要注意的是，插入的UI 与两个SDK之间的有很大不同。