Clover iframe features
The Clover iframe (inline frame) provides access to card and page elements.
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 when configuring the Clover SDK to use the street address input field.
const cardPostalCode = elements.create('CARD_POSTAL_CODE', styles);
7. paymentRequestButton
Use the paymentRequestButton
element to add a button for Google Pay™ transactions. When you click GPay, a new window displays for the Google Pay flow. The size of the button is rendered based on the width and height of the #payment-request-button
element.
All Google Pay assets and buttons must follow the Google Pay Web Brand Guidelines. The Google Pay payment button has specific size properties.
- Default width is
90px
(min-width: 90px;
) - Default height is
40px
(min-height: 40px;
) - The
max-width
andmax-height
values are set by the width and height of the<div>
container you use for mounting thepaymentRequestButton
(<div id="payment-request-button"></div>
). - When creating a new
paymentRequestButton
, the paymentamount
(in cents) is required.
// Sample payment amount
const paymentReqData = {
total: {
label: 'Demo total',
amount: 1099,
},
// Default buttonType is 'long' for button with card brand & last 4 digits
options: {
button: {
buttonType: 'short' // For button without additional text
}
}
};
// Create paymentRequestButton & mount to <div> container
const paymentRequestButton = elements.create('PAYMENT_REQUEST_BUTTON', {
paymentReqData
});
paymentRequestButton.mount('#payment-request-button');
// Handle validation errors after tokenization
paymentRequestButton.addEventListener('paymentMethod', function(tokenData) {
console.log(tokenData);
});

Default button that displays if the customer has a saved payment method

Default button that displays if the customer does not have a saved payment method
IMPORTANT
By using Google Pay integrations, you are agreeing to the Google Pay API Terms of Service.
Page elements
The Clover Privacy Policy is automatically added to footer of every iframe using a <div>
container with the clover-footer
class.

Secure Payments Powered by Clover - Privacy Policy
Updated 9 days ago