Style Credit Card iFrames
Our credit card iFrames allow a high level of customization and styling. We've outlined how to style it in this guide, and you can test it out using this Pen:
Create An iFrame
If you haven't already, follow the steps laid out here to initialize the Javascript SDK. Once your page has initialized the SDK, the next step is to define thediv
in which the credit card iFrame will be injected.<body>
...
<div id="credit-card-iframe"></div>
...
<div id="token"></div>
...
</body>
WePay.createCreditCardIframe()
. The first argument takes the ID of the div
in which you wish to inject the iFrame, and the second argument is an optional Javascript object of customizable display options. The object can contain the following keys, all of which are also optional:Key | Default Value | Description |
---|---|---|
custom_style | null | Create an object with additional styling, outlined in detail below to change WePay's default styling. |
show_labels | false | When true , an identifying label will be displayed above each input field. |
show_placeholders | true | When true , identifying placeholder text will be displayed inside each input field. |
show_error_messages | false | When true , an error message will be displayed underneath each invalid input |
show_error_messages_when_unfocused | true | When false , hides any errors messages for invalid inputs when the input is not in focus; when true , error messages persist even when the input field is not in focus. |
show_error_icon | true | When false , hides the error exclamation icon (!) that would be rendered next to an error message by default |
show_required_asterisk | false | When true , renders an asterisk next to the label of each required field. When enabled, the asterisk can be styled like the other specific elements (e.gcvv-icon and cvv-number ) bby accessing asterisk . |
resize_on_error_message | false | When true , the space at the bottom of the iframe normally reserved for the error message is removed, and the iframe height is dynamically resized when error messages are rendered. Only takes effect when show_error_messages is also true . |
custom_required_field_error_message | "This field is required" | Create string text for the required field error message. The string can have a maximum of 40 characters, and must only contain alphabetical letters. |
use_one_liner | false | Display all credit card iFrame fields in a single row. |
We recommend setting the following optional display keys at minimum:
var options = {
custom_style:custom_style,
show_labels:true,
show_placeholders:true,
show_error_messages:true,
show_error_messages_when_unfocused:true,
show_error_icon: true,
show_required_asterisk: false,
resize_on_error_message: false,
custom_required_field_error_message: '{YOUR-CUSTOM-REQUIRED-FIELD-ERROR-MESSAGE}',
use_one_liner: false
};
var iframe_container_id = "credit-card-iframe";
var creditCard = WePay.createCreditCardIframe(credit-card-iframe, options)
Style An iFrame
Next, customize iFrame styling by creating an object which describes thecustom_style
. Use the following classes to globally define input style behavior for default viewing, valid data input, and invalid data input:base
valid
invalid
labels
style behavior by using labels
as a top-level key with base
, valid
, and/or invalid
nested keys. Here is an example of global custom style using the CSS property color
:var custom_style = {
'styles': {
'base': {
'color': 'blue'
},
'invalid': {
'color': 'red'
},
'valid': {
'color': 'green'
},
'labels': {
'base': {
'color': 'gray'
}
}
}
}
Click to see a static rendered instance of the above custom_style
and options
examples
Click to see a static rendered instance of when use_one_liner
in options
is set to true
base
, invalid
, valid
, and labels
classes:Class Name | Notes |
---|---|
cvv-icon | This can only have base.display nested in order to hide the icon. |
cvv-number | |
asterisk | |
expiration-month | There is only one label for the expiration date, and label styling should be nested under `expiration_month` if custom styling is desired there. |
expiration-year | Do not apply styling here. |
expiration-slash | When setting base , invalid , and valid styles for this element, the styling will depend on base/invalidity/validity of the expiration month input by the user. So if the month input is invalid, the slash will display the defined invalid styling, if styling is present. |
cc-number | |
errors | Currently, the only accepted properties for styling errors are invalid and color . See the example below to see the accepted method of styling errors. |
Styling specific elements will override global styles when there is a conflict.
Use the following CSS properties and pseudo-classes to customize global and element styling:
appearance
border
border-left
border-right
border-top
border-bottom
border-color
border-radius
box-shadow
color
display
(forcvv-icon
element only)font-size
font-weight
font-family
font-smooth
font-style
font-variant
letter-spacing
line-height
margin
padding
text-decoration
text-shadow
text-transform
transition
width
:hover
:focus
::placeholder
::selection
Note
Pass
margin
, box-shadow
, and width
as pixels, otherwise the inputs may not align with the iFrame correctly.options
and custom_style
objects, as well as element-level and global-level styling:var custom_style = {
'styles': {
'base': {
'color': 'blue',
'border-color': 'blue'
},
'invalid': {
'color': 'red',
'border-color': 'red'
},
'valid': {
'color': 'green',
'border-color': 'green'
},
'labels': {
'base': {
'color': 'gray',
'font-size': '200%'
}
},
'cvv-icon': {
'base': {
'display': 'none'
}
},
'errors': {
'invalid': {
'color': 'blue'
}
}
}
};
var options = {
custom_style: custom_style,
show_labels:true,
show_placeholders:false,
show_error_messages:true,
show_error_messages_when_unfocused:true
};
KEY
is a string that corresponds to the id of the element that should receive focus:creditCard.setFocus(KEY);
Valid keys:
cc-number
cvv-number
expiration-month
expiration-year
If an invalid key is passed, the focus will not move.
The intent of this function is to allow the parent page to move the focus to the first error when errors are present in the form. There should be some additional logic in your code on the parent page to process the errors and choose where to move focus. For example, if there is an error on the parent page, focus should be moved there. However, if the first error is in thecc-number
field, the parent page could call creditCard.setFocus(“cc-number”);
to move focus to the credit card number field.Tokenize An iFrame
Beyond styling, attach a submit handler for your checkout submission form, and, once executed, call thecreditCard
variable's tokenize
function, and extract the token in the response. The response is a Promise.creditCard.tokenize()
.then(function (response) {
console.log('response', response);
var node = document.createElement('div');
node.innerHTML = JSON.stringify(response);
document.getElementById('token').appendChild(node);
})
.catch(function (error) {
console.log('error', error);
var node = document.createElement('div');
node.innerHTML = JSON.stringify(error);
document.getElementById('token').appendChild(node);
});