Iframe—Customize iframe elements with CSS

North America—United States and Canada

The Clover iframe lets you customize the payment form to match your website branding. You can use an object containing Cascading Style Sheets (CSS) to define the style of the iframe and its elements.

Before you begin

Complete the steps set up a payment form.
Create an interactive payment form where you can create instances of iframe card elements and insert (mount) them in <div> containers.
See how to use card and page elements.

Define iframe elements

When creating an iframe, use your custom JavaScript-style object to:

Define the iframe style. The iframe always inherits 100% of the width and height of its container element. Use the CSS applied to the container to change the iframe dimensions.

Define the styles inside the iframe, such as the border and custom font of card elements:

Card element	Use on the payment form
`cardNumber`	To accept a credit card number.
`cardHolderName`	To accept a credit cardholder's name.
`cardDate`	To accept a credit card's expiration date.
`cardCvv`	To accept a card verification number.
`cardPostalCode`	To accept a cardholder's postal code.
`cardStreetAddress`	To accept a cardholder's street address.
`paymentRequestButton`	To add a button to request payments for transactions.

Code sample

// const clover = new Clover('7e525404872b8186b82b5057cfacebff');
const clover = new Clover('080391318a9041e4d122082d369b64c7', {
    merchantId: 'M1V5CF1WV0FSJ'
  });
const elements = clover.elements();
const styles = {
  body: {
    fontFamily: 'Roboto, Open Sans, sans-serif',
    fontSize: '16px',
  },
  input: {
    fontSize: '20px'
  }
};
const cardNumber = elements.create('CARD_NUMBER', styles);
const cardName = elements.create('CARD_NAME', styles)
const cardDate = elements.create('CARD_DATE', styles);
const cardCvv = elements.create('CARD_CVV', styles);
const cardPostalCode = elements.create('CARD_POSTAL_CODE', styles);
const cardStreetAddress = elements.create('CARD_STREET_ADDRESS', styles);
cardNumber.mount('#card-number');
cardName.mount('#card-name');
cardDate.mount('#card-date');
cardCvv.mount('#card-cvv');
cardPostalCode.mount('#card-postal-code');
cardStreetAddress.mount('#card-street-address');


// const paymentRequest = clover.paymentRequest(paymentReqData);
const paymentRequestButton = elements.create('PAYMENT_REQUEST_BUTTON', {
paymentReqData
});
paymentRequestButton.mount('#payment-request-button');
paymentRequestButton.addEventListener('paymentMethod', function(ev) {
alert(JSON.stringify(ev));
})
paymentRequestButton.addEventListener('paymentMethodStart', function(ev) {
console.log(“Gpay in progress”);
  })
//   });

Design the form submission and payment button

Form submission button—If you are adding a form submission button, use your website CSS container element to define the style and dimension of the button. This lets you create a button that matches your website style standards.
Payment button—If you are adding the Apple Pay® or Google Pay™ option in your payment form, you must create a #paymentRequestButton. container in your website CSS to define the size and width of the button. For specific guidelines, see:
- Add Apple Pay button to the Clover iframe
- Add Google Pay button to the Clover iframe

Code sample with GPay button

In this example, the form submission button—Submit Payment—is .button-container, and the GPay button container is #paymentRequestButton. All Google Pay assets and buttons must follow the Google Pay Web Brand Guidelines.

.container .button-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.container .button-container button {
  background-color: #xxxxxx;
  border:
  border-radius: xx;
  color: white;
  font-size: xx;
  display: xxxx;
  height: xx;
  width: xx;
}

#paymentRequestButton.  {
  width: 85%;
  height: 40px;
  margin: 0 auto;
}

@media (min-width: 200px) {
  body {
    width: auto;
  }
}

@media (min-width: 600px) {
  body {
    width: 600px
  }
}

.hr {
  width: 100%; 
  height: 10px; 
  border-bottom: 1px solid black; 
  text-align: center;
  margin: 20px 0;
}

.hr span {
  font-size: 10px; 
  background-color: #FFF; 
  padding: 0 10px;
}

.clover-privacy-link {
  font-family: Roboto, "Open Sans", sans-serif;
}

section {
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-evenly;

Before you begin

Define iframe elements

Code sample

Design the form submission and payment button

Code sample with GPay button

Related topics