Hola a todos, tengo el siguiente código.
Estoy tratando de agregar la fuente de Google Ralway en mi elemento de franja.
Intento esto:
Aplicación.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> ); }Formulario de Pago .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> ); };Pero no ha pasado nada. Por favor, ayúdame a averiguar cómo debo cambiar mi código.
Investigué las siguientes preguntas ( 1 , 2 , 3 ) con respecto a las fuentes para los elementos react-stripe, pero ninguno de ellos me ayudó a resolver mi problema.
¿Se carga la hoja de estilo de la familia de fuentes desde Google Fonts? Creo que el problema radica en su variable de options . Hay un hash de elements adicionales que no es necesario. En su lugar, debería verse como:
const options = { fonts: [{ cssSrc: "https://fonts.googleapis.com/css2?family=Raleway&display=swap" }] }; return ( <Elements stripe={stripePromise} options={options}> <div className="App"> <PaymentForm /> </div> </Elements> )