Customize iframe elements with CSS
United States
Canada
The Clover iframe lets you customize the payment and checkout page to match your website branding. You can use an object containing Cascading Style Sheets (CSS) to define the style of the iframe and the elements inside it.
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 and page elements:
cardNumber
cardHolderName
cardDate
cardCvv
cardPostalCod
cardStreetAddress
paymentRequestButton
For more information on card and page elements, see Clover iframe features.
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 GPay 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.
- GPay button—If you are adding 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.
Code sample
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;
Updated 10 months ago