Rails Braintree - 覆盖braintree-dropin.css

Question

我在我的ruby on rails应用程序中使用braintree作为支付网关。但我无法为braintree js创建的dropin表单提交自定义braintree提交表单样式（css）。我怎么能自定义/覆盖css（样式）？

Answer 1

完全披露：我在Braintree工作。如果您有任何其他问题，请随时联系support。

Braintree的Drop-In表单是外部托管的，并使用iFrame加载到您的页面中。因为表单是在其他地方托管的，所以你能够改变外观的唯一方法就是Braintree在CSS中创建了javascript钩子，就像他们为Hosted Fields form styling做的那样。没有类似的钩子允许您编辑Drop-In表单的CSS，因此不能对Drop-In的外观进行任何更改。

无法编辑Drop-In表单是一种设计选择，目的是尽可能简化Drop-In。如果您开始遇到Drop-In表单的限制，请考虑使用Hosted Fields solution。

Answer 2

虽然Braintree Drop-In UI JS v2 SDK不支持CSS样式，但JS v3 SDK does。

引用外部链接：

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之间的插入UI显着不同。