learner-elements | Stripe Developers | Page 1

shadow musk Sep 8, 2021, 9:47 AM

#

@hasty mist I have one here https://jsfiddle.net/5yz4z2yn/104/

hasty mist Sep 8, 2021, 9:52 AM

#

Thanks. Can you please share a @stripe/react-stripe-js example as well?

shadow musk Sep 8, 2021, 9:54 AM

#

I can't actually, I don't have one.

#

if there's some specific problem you're running into when trying to build this yourself let me know and I can try to unblock you!

hasty mist Sep 8, 2021, 9:59 AM

#

I am using @stripe/react-stripe-js which uses useElements hook to create elements

#

Corresponding to https://jsfiddle.net/5yz4z2yn/104/ I tried initializing it as:

    {cssSrc: 'https://fonts.googleapis.com/css?family=Indie+Flower'}
    ],});```

#

and it didn't worked. Please suggest what am I doing wrong here

shadow musk Sep 8, 2021, 10:05 AM

#

can you share the full code of your component?

#

for example are you actually passing the font to the style option of the CardElement?

#

the code snippet you posted above just loads the font, it doesn't use it.(that's what line 16 in the JSfiddle is for)

hasty mist Sep 8, 2021, 10:13 AM

#

📎 delMe.tsx

#

Full code

shadow musk Sep 8, 2021, 10:16 AM

#

that seems like it should work I think. Any errors in your browser console?

hasty mist Sep 8, 2021, 10:23 AM

#

quite a few. I believe these existing before I made change to load custom font and are not new

shadow musk Sep 8, 2021, 10:25 AM

#

ok well the q.stripe.com ones are normal, they just happen if you have an ad-blocker running

hasty mist Sep 8, 2021, 10:29 AM

#

yep, I have an adblocker

shadow musk Sep 8, 2021, 10:41 AM

#

still looking

hasty mist Sep 8, 2021, 11:35 AM

#

FYI - I am using NextJS

hasty mist Sep 8, 2021, 12:43 PM

#

@shadow musk sorry just checking again if there are any suggestions

shadow musk Sep 8, 2021, 12:48 PM

#

not really, I tried this myself (https://codesandbox.io/s/react-stripe-js-forked-15kts?file=/src/components/demos/CardForm.js:461-504) and couldn't get it to work

#

unfortunately I'm a little under-resourced so I'm not able to dig much more into this 😦

hasty mist Sep 8, 2021, 12:56 PM

#

by any chance would someone else in the support team will have bandwidth to help out?

shadow musk Sep 8, 2021, 12:58 PM

#

right now I am the support team unfortunately until US hours! But let me tag someone when they come online.

hasty mist Sep 8, 2021, 1:00 PM

#

Thank you @shadow musk. On a separate note, are there any support openings at Stripe?

shadow musk Sep 8, 2021, 1:02 PM

#

yes, https://stripe.com/jobs/search?t=operations !

#

@gaunt arrow can you help out?

gaunt arrow Sep 8, 2021, 1:07 PM

#

👋

#

catching up, just a sec

#

ok, in my colleagues codesandox demo above it looks like the styling is being applied but the font isnt available, so trying to address that

hasty mist Sep 8, 2021, 1:55 PM

#

Thanks @gaunt arrow Please let me know as you are done

gaunt arrow Sep 8, 2021, 2:14 PM

#

still trying to figure out how the options are supported here via useElements, but pretty much out of ideas

#

it does appear to support options generally:
https://github.com/stripe/react-stripe-js/blob/master/src/components/Elements.tsx#L79-L83

#

but it's behaving as i'd expect

hasty mist Sep 8, 2021, 2:58 PM

#

@gaunt arrow sorry still couldn't make it work

gaunt arrow Sep 8, 2021, 3:05 PM

#

Me neither, I'm going to have to ask the team internally about this :/

#

oh wow, my message above should have said it's not behaving as i expect, sorry about that 😦

gaunt arrow Sep 8, 2021, 3:43 PM

#

Can you please write in to support@stripe.com about this and mention my username? I'd like to investigate this further and be able to get back to you.

#learner-elements