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="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>
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 de wrapper met de invoer op te maken: | |
| space-inset-wrapper | Elke kaartinvoer zit in een wrapper. Deze eigenschap stelt de padding voor de wrapper in. |
| 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. |
| box-schaduw-invoer | Stelt een box-schaduw in op elke kaartinvoer die door de bibliotheek wordt weergegeven. Deze eigenschap gedraagt zich op dezelfde manier als de CSS-boxschaduw. |
| color-input | Stel de ingangskleur in. |
| kleur-invoer-plaatshouder | Stelt de kleur in van de plaatshouder voor elke kaartinvoer die door de bibliotheek wordt weergegeven. De eigenschap kan kleurnamen en hexadecimale waarden accepteren. |
| lettertype-familie-invoer | Stelt de lettertypefamilie in voor elke kaartinvoer die door de bibliotheek wordt weergegeven. Dit geldt voor de plaatshoudertekst en de ingevoerde tekst van de invoer. |
| lettertype-familie-invoer-fout | Stelt de lettertypefamilie in voor elke kaartinvoer die door de bibliotheek wordt weergegeven wanneer er een fout optreedt. Dit geldt voor de plaatshoudertekst en de ingevoerde tekst van de invoer. |
| font-size-input | Stel de grootte van het ingevoerde lettertype in. |
| line-height-input | Stel de hoogte van de invoerlijn in. |
| outline-invoer |
Stel de omtrek in buiten de rand van de kaartingang. bijvoorbeeld "5px gestippeld groen". |
| 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: | |
| achtergrondkleur-label |
Stelt de achtergrondkleur in voor elk kaartinvoerlabel dat door de bibliotheek wordt weergegeven. De eigenschap kan kleurnamen en hexadecimale waarden accepteren. |
| 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. |
| 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. |
| lettertype-label |
Stelt de lettertypefamilie in voor elk kaartinvoerlabel dat door de bibliotheek wordt weergegeven. |
| font-size-label |
Stel de lettergrootte van het label in. |
| font-weight-label |
Stelt het lettertypegewicht in voor elk kaartinvoerlabel dat door de bibliotheek wordt weergegeven. De eigenschap accepteert de volgende waarden:
Als er geen waarde wordt opgegeven, stelt de bibliotheek de standaardwaarde voor het gewicht in. |
| line-height-label | Stel de regelhoogte van het label in. |
| max-breedte-label | Stelt een maximale breedte in voor het labelelement. |
| positie-onderaan-label | Deze eigenschap gedraagt zich hetzelfde als de "bottom" CSS eigenschap wanneer de elementpositie relatief is. Door deze instelling beweegt de onderrand van het invoerlabel boven/onder de normale positie. |
| positie-links-label | Deze eigenschap gedraagt zich hetzelfde als de "links" CSS eigenschap wanneer de elementpositie relatief is. Door deze instelling wordt de onderrand van het invoerlabel naar links/rechts verplaatst ten opzichte van de normale positie. |
| positie-rechts-label |
Deze eigenschap gedraagt zich hetzelfde als de "rechts" CSS eigenschap wanneer de elementpositie relatief is. Door deze instelling wordt de onderrand van het invoerlabel naar links/rechts verplaatst ten opzichte van de normale positie. |
| positie-top-label | Deze eigenschap gedraagt zich hetzelfde als de "top" CSS eigenschap wanneer de elementpositie relatief is. Door deze instelling beweegt de onderrand van het invoerlabel boven/onder zijn normale positie. |
| text-align-label |
Lijn de labeltekst uit:
|
| text-transform-label |
Stel de behuizing van de labeltekst in:
|
| breedte-label |
Stel een opgegeven breedte in op het labelelement |
| Het validatiebericht opmaken: | |
| achtergrondkleur-bericht | Stel de achtergrondkleur in voor validatieberichten die door de bibliotheek worden weergegeven. De eigenschap kan kleurnamen en hexadecimale waarden accepteren. |
| lettertype-boodschap | Stel de lettertypefamilie in voor invoervalidatieberichten die door de bibliotheek worden weergegeven. |
| 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. |
| Het invoerlabel links van de invoer plaatsen: | |
| isLinedUp | Stel dit in op waar om het label links van de invoer van het kaartnummer te plaatsen. |
