Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

73
Visualizações
How add google font into react-stripe-elements

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.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Is the font-family stylesheet loaded from Google Fonts? I think the issue lies with your options variable. There's an extra elements hash which is not necessary. It should instead look like:

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>
)
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda