React-stripe-elements: Loading fonts from http not allowed on local environment

[cleemputc]

Feature request or idea? Consider opening an
API review!

Summary

We are adding fonts from our assets to the stripe elements in the following manner:

const fonts = [{
      family: 'Fakt Pro Normal',
      src: `url(${Assets.lookup('faktpro/FaktProWeb-Normal.woff')})`
    }];

<Elements
   locale={this.props.session.language}
   fonts={fonts}
 >

In our development environment we are not going through https, so we are getting an error, see below.

Other information

[asolove-stripe]

Hi @cleemputc, thanks for reporting this!

We definitely understand that it's annoying to need to use https in your dev environment. We have thought about adding http font support just for testmode. But we were worried that developers would see that their integration works in testmode, then deploy to production and be surprised when their http fonts stopped working. We strive to avoid having validation rules that change across environment for exactly that reason, because of how many people have been tricked by similar problems in the past.

(I don't know if this is possible for your specific case, but I often use ngrok when I need an https connection to localhost.)

[cleemputc]

Thank you for your reply, I can understand your reasoning, however when the fonts fail to load like above, or maybe in other circumstances too, f.e. cdn is down, any interaction with the element is also blocked.

[BagpipesJohnson]

I've got to concur with cleemputc, this makes it next to impossible to do any kind of useful debugging on localhost. At the least, just ignore the font. Not being able to interact with the element is just a non-starter

[roberthchapman]

@asolove-stripe Why is this not a very bold gotcha in the documentation??! It' always painful when issues where you're facing a dilemma (.."we were worried that developers would see that their integration works in testmode"...) are not made clear very early on so that everyone doesn't have to go through one of the two painful misunderstandings!

[asolove-stripe]

Hi all, just a quick update here. There are two issues and one is not fixable but the other is now fixed!

• One problem is that you can't load fonts from http origins inside an Element in development. This is unfortunately not something we can fix (Elements are iframes loaded from https and there is no way they can let them load something via http.)
• But the second, and maybe more annoying, problem, is that when you passed in http fonts, Elements used to be completely unusable. We have fixed this problem so that the http font is ignored and falls back to the browser's default font, with a console warning if you look there for more information.

Hope this prevents future pain for people trying to test this out. And if you need a way to try out fonts locally, I still recommend ngrok as a service that can generate you an https proxy in front of whatever your local development environment is.