Clover iframe features

With the Clover iframe, you have access to different card elements and page elements.

Card elements

The SDK has five card elements that you can combine and use as required in your application. For each element, you can set custom styling as a second parameter. For more information on styling iframes, see Customizing iframe elements with CSS.

cardNumber

cardNumber is an auto-validating element for you to accept a credit card number. When creating a new cardNumber, you can optionally set custom styling with the second parameter.

const card = elements.create('CARD_NUMBER', styles);

cardDate

cardDate is an auto-validating element for you to accept a credit card's expiration date. When creating a new cardDate, you can optionally set custom styling with the second parameter.

const cardDate = elements.create('CARD_DATE', styles);

📘

NOTE

The date picker supports browser autofill in both the MM/YY and MM/YYYY formats.

cardCvv

cardCvv is an auto-validating element for you to accept a card verification number. When creating a new cardCvv, you can optionally set custom styling with the second parameter.

const cardCvv = elements.create('CARD_CVV', styles);

cardPostalCode

cardPostalCode is an auto-validating element for you to accept a cardholder's postal code. When creating a new cardPostalCode, you can optionally set custom styling with the second parameter.

const cardPostalCode = elements.create('CARD_POSTAL_CODE', styles);

Page elements

The Clover Privacy Policy is automatically added to footer of every iframe using a <div> container with the clover-footer class.


Did this page help you?