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:

<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
<script src="<CDN_DOMAIN>"></script>
(function() {
var st = SecureTrading({
styles: {
'background-color-input': '#309D76',
'font-size-label': '18px',
'color-input': '#FFF'

Replace <CDN_DOMAIN> with a supported domain. Click here for a full list.


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

Click the image to expand


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-asterisk Sets the colour of the asterisk next to each card input label rendered by the library. The property can accept colour names and hexadecimal values.
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.

Align the label text:

  • "left"
  • "right"
  • "center"
  • "justify"

Set the label test casing:

  • "uppercase"
  • "lowercase"
  • "capitalize"
  • "none"
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.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request