How to change formatting of stripe card-element based on viewport size

user_4305114 0
Viewed 3457

I'm building an adaptive website using stripe for payments, including the Stripe card-element, which is used to accept credit card payments.

Naturally, with changing viewport size, the paragraph font size changes. The same should be true for the Stripe card-element which I am creating with var card = elements.create('card'). The Stripe card element is an iframe because the payment data goes straight to Stripe's servers, not mine, meaning that relative font sizing using em does not work and neither do media queries. Because, of course, this iframe doesn't care at all about my CSS, all the formatting instructions are currently passed to stripe.elements.create as I instantiate the card element.

How can I make style properties (in this case the font size) of the Stripe element adaptive?

The only way I can think of is checking for viewport size in JS and re-instantiating the element when the viewport size changes; but this seems ugly and overkill.

var card = stripe.elements.create('card', {
  hidePostalCode: true,
  style: {
    base: {
      fontSize: "1em"
    }
  }
});

card.mount('#card-element');
@media only screen and (min-width: 992px) {
  p {
    font-size: 9pt;
    }
  #card-element {
    font-size: 9pt; // Does not work.
    }
}

@media only screen and (min-width: 1200px) {
  p {
    font-size: 12pt;
    }
  #card-element {
    font-size: 12pt; // Does not work.
    }
}
<html>

<head>
  <script src="https://js.stripe.com/v3"></script>
</head>

<body>
  <p>Some text preceding the card element</p>
  <div id="card-element"></div>
</body>

</html>

stripe-payments iframe css javascript
1 Answers

The card element has an update method that can be used to pass to it the same options as when first creating it. By using an event listener with the update methods, one can change the font-size in just the same way as it was first defined.

window.addEventListener('resize', function(event) {
  if (window.innerWidth <= 320) {
    card.update({style: {base: {fontSize: '13px'}}});
  } else {
    card.update({style: {base: {fontSize: '16px'}}});
  }
});

Source: https://stripe.com/docs/stripe-js/reference#other-methods

user_43051140
Related