使用 React Stripe 元素时，如何向我的卡片元素添加自定义字体？答案

【问题标题】：How do I add a custom font to my Card Element when using React Stripe Elements?使用 React Stripe 元素时，如何向我的卡片元素添加自定义字体？
【发布时间】：2018-08-20 17:47:00
【问题描述】：

我正在使用 react-stripe-elements，但自述文件没有说明如何添加自定义字体。

我有一个容器：

  <StripeProvider apiKey={stripePubkey}>
    <Elements>
      <Checkout {...this.props} />
    </Elements>
  </StripeProvider>

然后在我的结帐中，我有一个包装信用卡输入：

<form id="payment-form" onSubmit={this.onSubmit}>
   <CreditCardInput />
</form>

然后我的包装信用卡输入是：

  <label>
    Card info
    <CardElement onChange={this.onCardChange} style={style} />
    <div id="card-errors" role="alert">{this.state.error.message}</div>
  </label>

传入<CardElement />的样式：

const style = {
  base: {
    color: '#232e35',
    fontFamily: '"Podkova", "Courier New", serif',
    fontSize: '16px',
    '::placeholder': {
      color: '#9ab4b0'
    }
  },
  invalid: {
    color: '#cf3100',
    iconColor: '#cf3100'
  }
};

【问题讨论】：

标签： reactjs stripe-payments

【解决方案1】：

原来Stripe API 中的stripe.elements([options]) 映射到react-stripe-elements 中的<Elements /> 组件。因此，您将 cssSrc 添加到 fonts 选项/属性中，如下所示：

  render() {
    const fonts = [{ cssSrc: "https://fonts.googleapis.com/css?family=Podkova:400" }]

    return (
      <StripeProvider apiKey={stripePubkey}>
        <Elements fonts={fonts}>
          <Checkout {...this.props} />
        </Elements>
      </StripeProvider>
    )
  }

【讨论】：

【解决方案2】：

我必须对Sja's answer 进行修改才能使其适用于我的情况。（顺便说一句，我使用 loadStripe 而不是 StripeProvider。）

const options = {
  fonts: [
    {
      src: require("path-to-font"),
      family: "Fontname",
    },
  ],
}

<Elements stripe={loadStripe(stripe_public_key)} options={options}>

这里也解决了这个问题：https://github.com/stripe/react-stripe-elements/issues/285

【讨论】：