De iframe wordt gebruikt om het betalingsformulier op uw kassa weer te geven.
Deze opmaak van de iframe kan worden geformatteerd door toevoeging van styles: {} in de configuratie die wordt doorgegeven aan ST, zoals in onderstaand voorbeeld:
<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="<CDN_DOMAIN>"></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>
Vervang <CDN_DOMAIN> met een ondersteund domein. Klik hier voor een volledige lijst.
De bovenstaande voorbeeldopmaak kan worden gebruikt om een afrekenformulier te maken zoals hieronder:
Klik op de afbeelding om uit te breiden
De volgende eigenschappen kunnen worden gebruikt om de iframe:
| Attribuut | Beschrijving |
| Om het lichaam van de iframe te stylen: | |
| background-color-body | Stel de iframe achtergrondkleur in. |
| color-body | Stel de kleur van het iframe lichaam in. |
| font-size-body | Stel de lettergrootte van de iframe body in. |
| line-height-body | Stel de hoogte van de iframe lichaamslijn in. |
| space-inset-body | Stel de spatiëring (padding) van de body in. |
| space-outset-body | Stel de afstand (marge) tussen de romp en het begin in. |
| Om de invoer te stylen: | |
| background-color-input | Stel de achtergrondkleur van de invoer in. |
| border-color-input | Stel de kleur van de invoerrand in. |
| border-radius-input | Stel de straal van de invoerrand in. |
| border-size-input | Stel de grootte van de invoerrand in. |
| color-input | Stel de ingangskleur in. |
| font-size-input | Stel de grootte van het ingevoerde lettertype in. |
| line-height-input | Stel de hoogte van de invoerlijn in. |
| space-inset-input | Stel de tussenruimte voor de invoer (padding) in. |
| space-outset-input | Stel de afstand (marge) tussen de invoer en de invoer in. |
| Om de invoer op te maken als er een fout is opgetreden: | |
| background-color-input-error | Stel de achtergrondkleur van de invoer in voor als er een fout optreedt. |
| border-color-input-error | Stel de kleur van de invoerrand in voor als er een fout optreedt. |
| border-radius-input-error | Stel de straal van de invoerrand in voor als er een fout optreedt. |
| border-size-input-error | Stel de grootte van de invoerrand in voor als er een fout optreedt. |
| color-input-error | Stel de invoerkleur in voor als er een fout optreedt. |
| font-size-input-error | Stel de lettergrootte van de invoer in voor als er een fout optreedt. |
| line-height-input-error | Stel de hoogte van de invoerregel in voor als er een fout optreedt. |
| space-inset-input-error | Stel de tussenruimte (padding) van de invoer in voor als er een fout optreedt. |
| space-outset-input-error | Stel de afstand (marge) tussen de invoer en de invoer in voor als er een fout optreedt. |
| Om het label te stylen: | |
| color-asterisk | Stelt de kleur in van het sterretje naast elk kaartinvoerlabel dat door de bibliotheek wordt weergegeven. De eigenschap kan kleurnamen en hexadecimale waarden accepteren. |
| color-label | Stel de label kleur in. |
| font-size-label | Stel de lettergrootte van het label in. |
| display-label | Wordt gebruikt om aan te geven hoe een label op het scherm wordt weergegeven. |
| line-height-label | Stel de regelhoogte van het label in. |
| text-align-label |
Lijn de labeltekst uit:
|
| text-transform-label |
Stel de labeltestbehuizing in:
|
| Om het bericht te stylen: | |
| font-size-message | Stel de lettergrootte van het bericht in. |
| line-height-message | Stel de regelhoogte van het bericht in. |
| Om het bericht op te maken wanneer er een fout is opgetreden: | |
| color-error | Stel de kleur van het bericht in voor als er een fout optreedt. |
