Rails Braintree - 覆蓋braintree-dropin.css

Question

我正在使用braintree作爲支付網關在我的一個ruby on rails應用程序中。但我無法自定義braintree提交表單樣式（css），以便由braintree js創建的dropin表單提交。我如何定製/重寫CSS（樣式）？

Answer 1

_{完全披露：我在布倫特裏工作。如果您有任何其他問題，請隨時聯繫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。

引述外部鏈接：

在投遞中的大多數元素有一個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 兩者之間顯著不同軟件開發工具包。