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');

🚧IMPORTANT

🚧
IMPORTANT