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>
<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="https://cdn.eu.trustpayments.com/js/latest/st.js"></script>
<script>
(function() {
var st = SecureTrading({
jwt: 'INSERT YOUR JWT HERE',
styles: {
'background-color-input': '#309D76',
'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:
Click the image to expand
The following properties can be used to format the iframe:
| Attribute | Description |
| To style the wrapper containing the input: | |
| space-inset-wrapper | Each card input is contained within a wrapper. This property sets the padding for the wrapper. |
| 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. |
| box-shadow-input | Sets a box-shadow on each card input rendered by the library. This property behaves in the same way as the CSS box-shadow. |
| color-input | Set the input colour. |
| color-input-placeholder | Sets the input placeholder colour for each card input label rendered by the library. The property can accept colour names and hexadecimal values. |
| font-family-input | Sets the font family for each card input rendered by the library. This applies to the input's placeholder text and entered text. |
| font-family-input-error | Sets the font family for each card input rendered by the library when an error occurs. This applies to the input's placeholder text and entered text. |
| font-size-input | Set the input font size. |
| line-height-input | Set the input line height. |
| outline-input |
Set the outline outside of the card input's border. e.g. "5px dotted green" |
| 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: | |
| background-color-label |
Sets the background colour for each card input label rendered by the library. The property can accept colour names and hexadecimal values. |
| 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. |
| display-asterisk |
Sets the visibility of the asterisk next to each card input label rendered by the library. The property accepts a Boolean value and defaults to true. When set to true the asterisks are displayed. When set to false the asterisks are not displayed. |
| display-label |
Used to specify how a label is displayed on screen. |
| font-family-label |
Sets the font family for each card input label rendered by the library. |
| font-size-label |
Set the label font size. |
| font-weight-label |
Sets the font weight for each card input label rendered by the library. The property accepts the following values:
When no value is specified, the library will set the default weight value. |
| line-height-label | Set the label line height. |
| max-width-label | Sets a maximum width on the label element. |
| position-bottom-label | This property behaves the same as the "bottom" CSS property when the element position is relative. Setting this will make card input label's bottom edge move above/below its normal position. |
| position-left-label | This property behaves the same as the "left" CSS property when the element position is relative. Setting this will make card input label's bottom edge move left/right of its normal position. |
| position-right-label |
This property behaves the same as the "right" CSS property when the element position is relative. Setting this will make card input label's bottom edge move left/right of its normal position. |
| position-top-label | This property behaves the same as the "top" CSS property when the element position is relative. Setting this will make card input label's bottom edge move above/below its normal position. |
| text-align-label |
Align the label text:
|
| text-transform-label |
Set the label text casing:
|
| width-label |
Set a specified width on the label element |
| To style the validation message: | |
| background-color-message | Set the background colour for validation messages rendered by the library. The property can accept colour names and hexadecimal values. |
| font-family-message | Set the font family for input validation messages rendered by the library. |
| 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. |
| To position the input label to the left of input: | |
| isLinedUp | Set this to true to position the label to the left of the card number input. |
