The Clover iframe (inline frame) provides access to card and page elements. On your payment page, you can add a Clover-hosted iframe as a single page component with all of the required fields or integrate each page element individually, if required, for the design of your app.

Card elements

The SDK includes seven card elements that you can combine and use as required fields in your application. For each element, you can set custom styling as a second parameter. See Customize iframe elements with CSS for more information on styling iframes. All elements are auto-validating.

1. cardNumber

Use the cardNumber element to accept a credit card number. Optionally, you can set up custom styling with the second parameter when creating a new cardNumber.

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

2. cardHolderName

Use the cardHolderName element to accept a credit cardholder's name. Optionally, you can set up custom styling with the second parameter when creating a new cardHolderName.

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

3. cardDate

Use the cardDate element to accept a credit card's expiration date. Optionally, you can set up custom styling with the second parameter when creating a new cardDate. This element supports both MM/YY and MM/YYYY formats.

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

4. cardCvv

Use the cardCvv element to accept a card verification number. Optionally, you can set up custom styling with the second parameter when creating a new cardCvv.

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

5. cardPostalCode

Use the cardPostalCode element to accept a cardholder's postal code. Optionally, you can set up custom styling with the second parameter when creating a new cardPostalCode.

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

6. cardStreetAddress

Use the cardStreetAddress element to accept a cardholder's street address. This information is used for all Address Verification Service (AVS) fraud rules. Optionally, you can set up custom styling with the second parameter when creating a new cardStreetAddress.

Note: You must pass the merchantId parameter when configuring the Clover SDK to use the street address field. If the merchantId is not accessible and the merchant has enabled the AVS fraud rules, the payment from a tokenized card fails with an AVS error at the time of charge or order pay.

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

const clover = new Clover('12a3b45167a89123d4567989123e45f67', {
    merchantId: 'xxxxxxxxxxxxx'
});
const elements = clover.elements();

7. paymentRequestButton

Use the paymentRequestButton element to add a button to request payments for transactions using:

• Apple Pay^®
• Google Pay™

Page elements

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