Rails Braintree - 覆盖 braintree-dropin.css

Question

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

Answer 1

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

Braintree 的 Drop-In 表单在外部托管并使用 iFrame 加载到您的页面中。因为表单托管在别处，所以您能够更改外观的唯一方法是如果 Braintree 创建 javascript 挂钩到 CSS，就像他们为 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.

引用外部link：

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

引用的例子是：

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

它继续说明您可以选择使用 overrides 对象来覆盖样式。

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...

例如：

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 显着不同。

Rails Braintree - 覆盖 braintree-dropin.css

Rails Braintree - To override braintree-dropin.css

braintree

ruby-on-rails-4

braintree-rails