Iframes

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:

js_styling.png
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:

  • "links"
  • "juist"
  • "midden"
  • "rechtvaardigen"
text-transform-label

Stel de labeltestbehuizing in:

  • "hoofdletters".
  • "kleine letters"
  • "kapitaliseren"
  • "geen"
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.
Was dit artikel nuttig?
0 van de 0 vonden dit nuttig
Hebt u meer vragen? Dien een verzoek in