我正在使用react-stripe-elements,但自述文件没有解释如何添加自定义字体。
我有一个容器:
<StripeProvider apiKey={stripePubkey}>
<Elements>
<Checkout {...this.props} />
</Elements>
</StripeProvider>
然后在我的 Checkout 中,我有一个包装信用卡输入:
<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'
}
};
最佳答案
事实证明stripe.elements([options])
来自Stripe API映射到<Elements />
React-stripe-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>
)
}
关于reactjs - 使用 React Stripe Elements 时如何向我的卡片元素添加自定义字体?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49239767/