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-asterisk |
Stelt de zichtbaarheid in van het sterretje naast elk kaartinvoerlabel dat wordt weergegeven door de bibliotheek. De eigenschap accepteert een booleaanse waarde en is standaard waar. Als dit is ingesteld op waar, worden de sterretjes weergegeven. Als false is ingesteld, worden de sterretjes niet weergegeven. |
| 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. |
