Customize iframe elements with CSS
United States
Canada
You can easily customize the Clover iframe
elements to match your website branding for a seamless payment and checkout experience.
Individual instances of iframe
elements can be styled by passing an object containing CSS when creating the element. For example, you could style each of the four <input>
fields in an iframe
with a border and a custom font: <card-number>
, <card-date>
, <card-cvv>
, or <card-postal-code>
.
IMPORTANT
For browser security, the scope of the CSS is limited to the instance of the element created inside the iframe.
const styles = {
'card-number input': {
'width': '20em',
'font-size': '20px',
'border': '1px gray dotted',
'padding': '3px',
'margin': '3px',
'font-weight': 'bold'
},
'card-number input': {
'background-color': '#BBBBBB'
},
'card-date input': {
'background-color': '#CCCCCC'
},
'card-cvv input': {
'background-color': '#DDDDDD'
},
'card-postal-code input': {
'background-color': '#EEEEEE'
}
};
const cardNumber = elements.create('CARD_NUMBER', styles);
const cardDate = elements.create('CARD_DATE', styles);
const cardCvv = elements.create('CARD_CVV', styles);
const cardPostalCode = elements.create('CARD_POSTAL_CODE', styles);
cardNumber.mount('#card-number');
cardDate.mount('#card-date');
cardCvv.mount('#card-cvv');
cardPostalCode.mount('#card-postal-code');
Updated 2 months ago