react-stripe-elements 样式卡元素

Question

我正在使用模块react-stripe-elements，我想设置CardElement的样式以创建类似附件的内容。有人可以帮忙吗？

https://stripe.com/docs/stripe-js/react

<CardElement
  options={{
    style: {
      base: {
        fontSize: '16px',
        color: '#424770',
        '::placeholder': {
          color: '#aab7c4',
        },
      },
      invalid: {
        color: '#9e2146',
      },
    },
  }}
/>

Answer 1

从“@stripe/stripe-js”导入{loadStripe}； 从“@stripe/react-stripe-js”导入{Elements}；

常量外观 = { 主题：“条纹”，

variables: {
  colorPrimary: "#ffffff",
  colorBackground: "#ffffff",
  colorText: "#000000",
  colorDanger: "#ffffff",
  fontFamily: "Ubuntu",
  spacingUnit: "2px",
  borderColor: "#342",
  borderRadius: "0px",

  tabLogoSelectedColor: colors.prime,
  iconLoadingIndicatorColor: colors.prime,
  iconMenuHoverColor: colors.prime,

},

<Elements
  stripe={stripePromise}
  options={{
    mode: "payment",
    amount: 1000,
    currency: "eur",
    paymentMethodTypes: ["card", "paypal", "sepa_debit"],
    appearance: appearance,
  }}
>

这是您需要的两件事。将外观传递给元素，即 样式都使用条纹元素，例如 AdressElement 元素