Iframes

The iframe is used to display the payment form on your checkout.

This styling of the iframe can be formatted by including styles: {} in the config passed into ST, as shown in the example below:

HTML

<html>
<head>
</head>
<body>
  <div id="st-notification-frame"></div>
  <form id="st-form" action="https://www.example.com" method="POST">
    <div id="st-card-number" class="st-card-number"></div>
    <div id="st-expiration-date" class="st-expiration-date"></div>
    <div id="st-security-code" class="st-security-code"></div>
    <button type="submit" id="st-form__submit" class="st-form__submit">
      Pay securely
    </button>
  </form>
 <script src=<DOMAIN>/js/v2/st.js></script>
 <script> 
  (function() {
   var st = SecureTrading({  
    jwt: 'INSERT YOUR JWT HERE',
    styles: {
          'background-color-input': '#e71b5a',
          'font-size-label': '18px',
          'color-input': '#fff'
    }
    });  
   st.Components(); 
  })(); 
 </script>
</body>
</html>

The example mark-up above can be used to render a checkout form similar to the following:

The following properties can be used to format the iframe:

Attribute	Description
To style the body of the iframe:
background-color-body	Set the iframe background colour.
color-body	Set the iframe body colour.
font-size-body	Set the iframe body font size.
line-height-body	Set the iframe body line height.
space-inset-body	Set the body inset spacing (padding).
space-outset-body	Set the body outset spacing (margin).
To style the input:
background-color-input	Set the input background colour.
border-color-input	Set the input border colour.
border-radius-input	Set the input border radius.
border-size-input	Set the input border size.
color-input	Set the input colour.
font-size-input	Set the input font size.
line-height-input	Set the input line height.
space-inset-input	Set the input inset spacing (padding).
space-outset-input	Set the input outset spacing (margin).
To style the input when there has been error:
background-color-input-error	Set the input background colour for when an error occurs.
border-color-input-error	Set the input border colour for when an error occurs.
border-radius-input-error	Set the input border radius for when an error occurs.
border-size-input-error	Set the input border size for when an error occurs.
color-input-error	Set the input colour for when an error occurs.
font-size-input-error	Set the input font size for when an error occurs.
line-height-input-error	Set the input line height for when an error occurs.
space-inset-input-error	Set the input inset spacing (padding) for when an error occurs.
space-outset-input-error	Set the input outset spacing (margin) for when an error occurs.
To style the label:
color-label	Set the label colour.
font-size-label	Set the label font size.
display-label	Used to specify how a label is displayed on screen.
line-height-label	Set the label line height.
To style the message:
font-size-message	Set the message font size.
line-height-message	Set the message line height.
To style the message when there has been an error:
color-error	Set the message colour for when an error occurs.

Customising payment form text Appearance