Clover iframe features

With the Clover iframe, you have access to different card and page elements. The following document describes these card 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.

📘

All elements are auto-validating.

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

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.

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

📘

NOTE

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

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

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

paymentRequestButton

Use the paymentRequestButton element to add a button for Google Pay™ transactions. Clicking the button opens a new window 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);
});
Default button if the customer has a saved payment methodDefault button if the customer has a saved payment method

Default button if the customer has a saved payment method


Default button if the customer does not have a saved payment methodDefault button if the customer does not have a saved payment method

Default button 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.


Did this page help you?