The Clover iframe (inline frame) provides access to card and page elements. On your payment page, you can add 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 (mId) parameter when configuring the Clover SDK to use the street address field. If the mId 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 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 and max-height values are set by the width and height of the <div> container you use for mounting the paymentRequestButton (<div id="payment-request-button"></div>).
• When creating a new paymentRequestButton, the payment amount (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);
});

🚧

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.