Card element font

You can easily change the font of a card element using Stripe.js.

For example we can change the font used in this card element to Permanent Marker from the Google fonts API. https://fonts.googleapis.com/css?family=Permanent+Marker

Console

> Ready ...

            
              var elements = stripe.elements({
                fonts: [
                  {
                    cssSrc: 'https://fonts.googleapis.com/css?family=Permanent+Marker'
                  }
                ],
              });

              var style = {
                base: {
                  color: 'black',
                  fontFamily: '"Permanent Marker", sans-serif',
                  fontSmoothing: 'antialiased',
                  '::placeholder': {
                    color: '#black',
                  },
                },
                invalid: {
                  color: 'red',
                  ':focus': {
                    color: 'red',
                  },
                },
              };

              const cardElement = elements.create('card', {style: style});

Experiment and learn

Make copies, remix, change and learn how to play with this tinydemo.

Any questions?

Reach out to us on any of our contact channels: