Is there any way to implement fluid typography with Stripe Elements?

Question

I'm using Stripe Elements to build a custom checkout on my site that uses fluid typography to resize the text within a modular scale based on the viewport width.

I'm using the Modular Scale SASS plugin , which I believe uses calc along with vw units in order to dynamically calculate the font size (which I then also use for dynamic spacing within the site).

Currently, I'm using an element id #stripe-styles on a hidden div and something like

const styles = window.getComputedStyle(document.getElementById('stripe-styles'))
const fontSize = styles.getPropertyValue('font-size')

in order to get the computed value when the element is initialized and pass it into the stripe element style object. This works fine for the most part, but if the window is ever resized, the element retains the font-size property from when it was first created.

My question is: is there any way, without making constant calls to the Elements update method, to make the sizing fluid within the element as well?

Answer 1

Unfortunately not. You're limited in what CSS properties you can set on the Elements object that exists in the Stripe iframe: https://stripe.com/docs/js/appendix/style