1

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

4

2 回答 2

2

全面披露：我在布伦特里工作。如果您还有其他问题，请随时联系支持人员。

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

无法编辑 Drop-In 表单是为了使 Drop-In 尽可能简单而做出的设计选择。如果您开始遇到 Drop-In 表单的限制，请考虑改用托管字段解决方案。

于 2015-11-24T15:02:53.420 回答
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 之间的插入式 UI存在显着差异。

于 2017-12-20T01:28:50.727 回答