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 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. |
| 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-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. |
| text-align-label |
Align the label text:
|
| text-transform-label |
Set the label text casing:
|
| 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. |
