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 the div in which the credit card iFrame will be injected.
Copy
Copied
<body>
...
  <div id="credit-card-iframe"></div>
...
  <div id="token"></div>
...
</body>
From this, we will call 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:
KeyDefault ValueDescription
custom_stylenullCreate an object with additional styling, outlined in detail below to change WePay's default styling.
show_labelsfalseWhen true, an identifying label will be displayed above each input field.
show_placeholderstrueWhen true, identifying placeholder text will be displayed inside each input field.
show_error_messagesfalseWhen true, an error message will be displayed underneath each invalid input
show_error_messages_when_unfocusedtrueWhen 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_icontrueWhen false, hides the error exclamation icon (!) that would be rendered next to an error message by default
show_required_asteriskfalseWhen 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_messagefalseWhen 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_linerfalseDisplay all credit card iFrame fields in a single row.

We recommend setting the following optional display keys at minimum:

Copy
Copied
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 the custom_style. Use the following classes to globally define input style behavior for default viewing, valid data input, and invalid data input:
  • base
  • valid
  • invalid
Additionally, you can describe the global 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:
Copy
Copied
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 credit card iframe example
Click to see a static rendered instance of when use_one_liner in options is set to true Have the input boxes for the credit card information be on one line
Style specific elements within the iFrame by using the following classes with nested base, invalid, valid, and labels classes:
Class NameNotes
cvv-iconThis can only have base.display nested in order to hide the icon.
cvv-number
asterisk
expiration-monthThere is only one label for the expiration date, and label styling should be nested under `expiration_month` if custom styling is desired there.
expiration-yearDo not apply styling here.
expiration-slashWhen 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
errorsCurrently, 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 (for cvv-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.
Here's an example using the options and custom_style objects, as well as element-level and global-level styling:
Copy
Copied
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
};
In order to move the focus to a specific input in the iFrame, call the following function where 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 the cc-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 the creditCard variable's tokenize function, and extract the token in the response. The response is a Promise.
Copy
Copied
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);
  });