yeti_api | Stripe Developers | Page 1

jaunty raftBOT Nov 21, 2024, 11:23 AM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1309116928584974358

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

#

quick tundra Nov 21, 2024, 11:24 AM

#

Hello Karl,
We are integrating a stripe payment element on our marketplace.
I'm currently trying to customize its visual rendering, but changing the typography doesn't seem to work.

#

there is my code :

#

var appearance = {
theme: 'stripe', // Autres options : 'stripe, 'night', 'flat', 'bubble'
labels: 'floating',
variables: {
colorPrimary: '#0B062D',
colorBackground: '#ffffff',
colorText: '#32325d',
colorDanger: '#df1b41',
borderRadius: '7px',
fontFamily: '"Montserrat", "Arial", sans-serif', // Police par défaut
// fontSizeBase: '0.938rem', // Taille des labels
// fontSmoothing: 'antialiased', // Active un lissage amélioré
// textRendering: 'optimizeLegibility', // Priorise la lisibilité
},
rules: {

tulip dock Nov 21, 2024, 11:26 AM

#

hi! well did you pass the Montserrat font definition when creating the Elements instance? https://docs.stripe.com/js/elements_object/create#stripe_elements-options-fonts // https://docs.stripe.com/elements/appearance-api#variables:~:text=DESCRIPTION-,fontFamily,-The font family

quick tundra Nov 21, 2024, 11:27 AM

#

oh

#

i dont think so

#

elements = stripe.elements({
clientSecret: response.data.clientSecret, // Tu passes le clientSecret ici, mais pas directement à elements.create()
appearance: appearance, // Assure-toi que 'appearance' est bien défini
});

#

let me see

tulip dock Nov 21, 2024, 11:33 AM

#

for example

  const appearance = {
    theme: 'stripe',

    variables: {
      colorPrimary: '#0570de',
      colorBackground: '#ffffff',
      colorText: '#30313d',
      colorDanger: '#df1b41',
      fontFamily: 'Bokor, system-ui, sans-serif',
      spacingUnit: '2px',
      borderRadius: '4px',
      // See all possible variables below
    }
  };
  const elements = stripe.elements({
    fonts:[
      {
        cssSrc: 'https://fonts.googleapis.com/css2?family=Bokor&display=swap'
      }
    ],
    appearance:appearance,
    amount:500,currency:"eur",
    paymentMethodTypes:["card", "sepa_debit"],
    mode:"payment",
  });

for a different font (https://fonts.google.com/specimen/Bokor)

quick tundra Nov 21, 2024, 11:38 AM

#

yes thank you so much

#

it works, I just have another small question please

#

can i change the fontsize without trouble ? If I decrease the font-size, the text looks “fuzzy/blured”.

#

#

(if I zoom in, then out, the text becomes “sharp”)

#

i did this :

variables: {
fontFamily: '"Montserrat", "Arial", sans-serif', // Police par défaut
fontSizeBase: '0.938rem', // Taille des labels
// fontSmoothing: 'antialiased', // Active un lissage amélioré
// textRendering: 'optimizeLegibility', // Priorise la lisibilité
},

tulip dock Nov 21, 2024, 11:43 AM

#

hmm I would think that depends on how the font is implemented. Also maybe it looks better if you uncomment fontSmoothing ?

quick tundra Nov 21, 2024, 11:47 AM

#

still the same

#

even with the default font family

#

and fontsmoothing

tulip dock Nov 21, 2024, 11:52 AM

#

I don't really see that on my end, maybe it's something to do with your own browser or system. I don't really 100% understand the issue you're describing to be honest. A link to some page that shows the problem plus repro steps could help.

#yeti_api