Hello everyone,
as explained in the title, I cannot change the font-family of hostedField inputs.
I followed the steps in the documentation, but the font does not change, my profect is on Nuxt 2, and this is my code:
paypal() {
const paypalButton = window.paypal.Buttons({
fundingSource: window.paypal.FUNDING.PAYPAL,
style: {
color: 'gold',
label: 'pay'
},
createOrder: (data, actions) => this.create(data, actions),
onApprove: (data, actions) => this.approve(data, actions),
})
if (paypalButton.isEligible()) {
paypalButton.render('#paypal-button-container')
}
if (window.paypal.HostedFields.isEligible()) {
window.paypal.HostedFields.render({
fields: {
number: {
selector: "#card-number",
placeholder: "4111 1111 1111 1111",
},
expirationDate: {
selector: "#expiration-date",
placeholder: "MM/YY",
},
},
styles: {
input: {
'font-family': 'Titillium Web, sans-serif'
}
},
createOrder: (data, actions) => this.create(data, actions),
}).then(hostedFields => {
this.renderCardSvg(hostedFields.getCardTypes())
hostedFields.on('notEmpty', (event) => {
this[event.emittedBy] = true
})
hostedFields.on('empty', (event) => {
this[event.emittedBy] = false
})
const form = this.$refs.funnel_form.$refs.form
form.addEventListener('submit', (event) => {
event.preventDefault()
hostedFields.submit().then(() => {
this.approve({ orderId: this.orderId })
}).catch(error => {
console.log(error)
this.showErrorBox = true
})
})
})
}
},
