Custom font src with Stripe

css, javascript, stripe-payments

Solution

Here is the my working example (it works on my side).

var stripe = Stripe('pk_test_........'); // paste your stripe public key here

var elements = stripe.elements({
  fonts: [
    {
      // integrate your font into stripe
      cssSrc: 'https://fonts.googleapis.com/css?family=Montserrat:400,500',
    }
  ]
});

const style = {
  base: {
    color: '#32325d',
    fontFamily: 'Montserrat, sans-serif',  // set integrated font family
    fontSmoothing: 'antialiased',
    fontSize: '17px',
    '::placeholder': {
      color: '#e5286a'
    }
  }
};

this.card = elements.create('card', {
  style: style,
  hidePostalCode: true,
});
this.card.mount(this.cardInfo.nativeElement);

Problem

Using this as reference https://stripe.com/docs/elements/reference#stripe-elements I'm trying create a custom font `src` to pass to my stripe elements: ``` var elements = stripe.elements( { font: { family:'Effra', src: "url('https://cuddlecompanions.org/wp-content/themes/diamondphoenix/fonts/effra.eot')" } } ); var style = { base: { fontFamily: 'Effra' } } ``` But the font is not displaying as planned.. Any help would be appreciated:

Original source