Hi all I have following code
I am trying to add Ralway
google font into my stripe element.
I try this:
App.js
export default function App() {
const stripePromise = loadStripe("pk_test_FnsOZv49080ssnyO2xn0gCoS");
const options = {
elements: {
fonts: [
{
cssSrc:
"https://fonts.googleapis.com/css2?family=Raleway&display=swap"
}
]
}
};
return (
<Elements stripe={stripePromise} options={options}>
<div className="App">
<PaymentForm />
</div>
</Elements>
);
}
PaymentForm .js
const PaymentForm = () => {
const stripe = useStripe();
const elements = useElements();
const stripeStyle = {
base: {
fontFamily: "Raleway",
fontSize: "16px"
},
"::placeholder": {
color: "green"
}
};
return (
<div>
<CardNumberElement
options={{
style: stripeStyle
}}
/>
<CardExpiryElement options={{ style: stripeStyle }} />
<CardCvcElement options={{ style: stripeStyle }} />
</div>
);
};
But nothing has happened. Please help me figure out how should I change my code.
I looked into following questions ( 1, 2, 3 ) regarding to fonts for react-stripe-elements but no one of them didn’t helped me to resolve my problem.