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:
Thanks guys for the help. I got a help on stripe's IRC. It might've been the missing commas, and also switched to ttf. At any rate hope this can help someone:
var elements = stripe.elements({
fonts: [
{
family: 'Effra',
src: 'local("Effra"), local("effra"), url(https://cuddlecompanions.org/wp-content/themes/diamondphoenix/fonts/effra.ttf) format("truetype")',
unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215',
},
]
});
<style>
@font-face {
font-family: 'Effra';
font-weight: 400;
src: local("Effra"), local("effra"), url(https://cuddlecompanions.org/wp-content/themes/diamondphoenix/fonts/effra.ttf) format("truetype");
unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
</style>
stripe.elements
takes an options object.
stripe.elements([options])
fonts
An array of custom fonts Elements created from the elements object can use.
It seems that it's expecting an array.
Try changing to
var elements = stripe.elements(
{
fonts: [{
family:'Effra',
src: "url('https://cuddlecompanions.org/wp-content/themes/diamondphoenix/fonts/effra.eot')"
}]
}
);
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);
I think its a formatting error , you are missing some commas.
var elements = stripe.elements({
fonts: [
{
family:'Effra',
src: "url('https://cuddlecompanions.org/wp-content/themes/diamondphoenix/fonts/effra.eot')",
},
]
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.