如何向受保护字段的卡片输入字段添加其他 CSS 属性

Question

我还没有找到一种方法来向卡片输入字段添加伪类；即

:hover

和

:focus

。

AdyenCheckout 实例

的styles属性中没有提及这一点。

请指教。

Answer 1

有 2 个选项可用于自定义卡片组件（和 Drop-in）。

根据需要定义您的自定义插入式 CSS 类和样式：

# define border for all input fields
.adyen-checkout__input:focus {
  border-color: green;
  box-shadow: 0 0 5px green;
  color: red;
}

使用 StyleObject 的样式卡输入字段

const configuration = {
  //...other configuration parameters
  paymentMethodsConfiguration: {
    card: {
      styles: {
         base: {
          color: "#ffffff",
          fontSize: '16px'
        }
      } 
    }
  },
};

第二种方法是您可以用来更改卡号、CVC 和卡到期日期的样式。

const styleObject = {
  base: {
    color: 'purple',
    fontSize: '32px',
    fontSmoothing: 'antialiased',
    fontFamily: 'Helvetica'
  },
  error: {
    color: 'red'
  },
  placeholder: {
    color: '#ffffaa'
  },
  validated: {
    color: 'green'
  }
};

不幸的是，当无法进行 onFocus 或 onHover 时，请更改背景颜色或插入符号颜色。