Door aangepaste HTML te uploaden, hebt u meer controle over de inhoud en de lay-out van elke pagina. Wanneer u uw HTML-code schrijft, moet u gebruik maken van ingebouwde velden en blokken om velden weer te geven op de pagina's wanneer deze worden weergegeven door Trust Payments.
Als u uw site Payment Pages aanpast, is het uw verantwoordelijkheid ervoor te zorgen dat uw oplossing in overeenstemming blijft met de relevante regelingen.
Klik hier om een volledige lijst van beschikbare velden en blokken te bekijken in een nieuw tabblad.
Het kan nuttig zijn om deze lijst bij de hand te houden terwijl u de rest van dit document leest.
Velden
U kunt st.field in uw HTML opnemen om gemakkelijk informatie van de sessie weer te geven, en inputs zoals tekstvakken en dropdowns als onderdeel van de gerenderde pagina. Met CSS en HTML kunt u deze elementen en hun plaats op de pagina volledig aanpassen.
Hierna volgen voorbeelden van de soorten velden die in uw HTML-code moeten worden opgenomen:
Waarden
Een waarde wordt gebruikt om eerder ingevoerde info weer te geven. b.v.
You can use the following reference to track your order: {{st.orderreference .value}}Tekst velden
In een tekstveld kan de klant nieuwe informatie intypen, bijv.
Please enter your postcode: {{st.billingpostcode.textfield}}Drop-downs
Met drop-downs kunnen klanten informatie uit een lijst selecteren, bijv.
Country: {{st.billingcountryiso2a.dropdown}}
Bepaalde velden kunnen niet worden weergegeven als tekstinvoer of vervolgkeuzelijsten.
Klik hier voor een volledige lijst van velden en hun ondersteunde implementaties.
De in de vorige hoofdstukken beschreven HTML-formulieren worden automatisch vooraf gevuld met informatie uit de sessie, als die al is verstrekt. Als de klant er niet in slaagt alle verplichte velden in te vullen of ongeldige informatie invoert, wordt de betaling niet voortgezet en wordt het betreffende veld op het scherm gemarkeerd.
Alle Trust Payments velden worden gevalideerd. Aangepaste velden kunnen niet worden gevalideerd door Trust Payments.
Veldfouten worden alleen aan de klant getoond als de betreffende invoervelden op de pagina zijn opgenomen
Als bijvoorbeeld per post een ongeldig e-mailadres is opgegeven, kan de klant dit niet corrigeren op Payment Pages als dit invoerveld niet zichtbaar is.
Zorg ervoor dat alle gegevens volgens onze specificaties zijn gevalideerd voordat u ze naar Payment Pages stuurt, OF dat u de nodige facturerings-/leveringsgegevens weergeeft op Payment Pages , zodat de klant zo nodig wijzigingen kan aanbrengen.
Aangepaste tekstinvoervelden en -waarden kunnen op dezelfde manier worden ingevoerd als de eerder beschreven ingebouwde velden, bv.
Enter your Membership Id: {{st.memberid.textfield}}
This is your Membership Id: {{st.memberid.value}}
- De st.field functionaliteit ondersteunt geen drop-downs voor aangepaste velden.
- Trust Payments kan geen aangepaste velden valideren.
De meeste velden die in een Payment Pages sessie worden gebruikt, inclusief aangepaste velden, kunnen op uw website worden geplaatst als onderdeel van een redirect of als onderdeel van een URL-kennisgeving.
Blokken
An st.block is a reference you can include in your HTML to display grouped page elements when the page is rendered, instead of defining each element individually. Blocks are written as follows (including curly brackets): {{st.block.blockname}}
Wanneer bijvoorbeeld de referentie {{st.block.paymentdetailsdiv}} wordt doorgegeven op de pagina met betalingsdetails, zal Trust Payments de betalingsvelden weergeven bij het renderen van de pagina.
Bepaalde st.block zijn vereist op geüploade HTML-bestanden.
Klik hier om de volledige lijst met beschikbare blokken in een nieuw tabblad te openen.
Lichaamsklasse
Trust Payments recommends specifying {{st.bodyclass.value}} in the class attribute of the body tag on all pages, to ensure shortcuts appear with the correct styling in the following situations:
- Als u van plan bent Trust Payments CSS met aanpassingen te gebruiken.
- Als u van plan bent CSS te uploaden die verschillende stijlen toepast afhankelijk van de pagina die wordt weergegeven.
For example: <body class=”{{st.bodyclass.value}}”>
Afbeeldingen
Include {{stresource.<filename>}} in your HTML to reference images uploaded to your account using the MyST File Manager.
b.v. {{stresource.companylogo.gif}}
Wij raden u aan alleen te verwijzen naar afbeeldingen die zijn opgeslagen in de MyST Bestandsbeheer en niet naar een externe bron, anders kan de browser van de klant een waarschuwing geven dat de pagina niet veilig is.
Voorbeelden
Hieronder staan voorbeelden van aangepaste pagina's die gebruik maken van de ST-blokken. Voel je vrij om deze sjablonen te gebruiken om je eigen pagina's te bouwen, met de blok- en veldreferentie als leidraad.
Be aware that there are some mandatory blocks for each page, as described in this reference. As part of these requirements, please ensure that the blocks specified in <head> are in the same order as shown in the examples below.
{{st.block.doctype}}
<html>
<head>
{{st.block.metatags}}
{{st.block.defaultcss}}
{{st.block.profilecss}}
{{st.block.requiredjs}}
{{st.block.defaultjs}}
{{st.block.profilejs}}
</head>
<body class="{{st.bodyclass.value}} st-inputs-style st-blocks-style">
{{st.block.header}}
<div class="st-content">
{{st.block.messagesdiv}}
<h2>Order details</h2>
{{st.block.orderdetailsdiv}}
<h2>Payment choice</h2>
{{st.block.standardpaymentchoicesdiv}}
</div>
{{st.block.footer}}
</body>
</html>
{{st.block.doctype}}
<html>
<head>
{{st.block.metatags}}
{{st.block.defaultcss}}
{{st.block.profilecss}}
{{st.block.requiredjs}}
{{st.block.defaultjs}}
{{st.block.profilejs}}
</head>
<body class="{{st.bodyclass.value}} st-inputs-style st-blocks-style">
{{st.block.header}}
<div class="st-content">
{{st.block.messagesdiv}}
<h2>Order details</h2>
{{st.block.orderdetailsdiv}}
<h2>Change payment type</h2>
{{st.block.smallpaymentchoicesdiv}}
<form name="paymentsdetails" id="paymentsdetails" method="post" action="details">
{{st.block.hiddendiv}}
<h2>Billing details</h2>
{{st.block.billingdetailsdiv}}
<h2>Delivery details</h2>
{{st.block.deliverydetailsdiv}}
<h2>Payment details</h2>
{{st.block.paymentdetailsdiv}}
{{st.block.requirednoticediv}}
</form>
</div>
{{st.block.footer}}
</body>
</html>
{{st.block.doctype}}
<html>
<head>
{{st.block.metatags}}
{{st.block.defaultcss}}
{{st.block.profilecss}}
{{st.block.requiredjs}}
{{st.block.defaultjs}}
{{st.block.profilejs}}
</head>
<body class="{{st.bodyclass.value}} st-inputs-style st-blocks-style">
{{st.block.header}}
<div class="st-content">
{{st.block.messagesdiv}}
{{st.block.hiddendiv}}
{{st.block.orderdetailsdiv}}
<h2>3-D Secure Process</h2>
{{st.block.3dredirectdiv}}
</div>
{{st.block.footer}}
</body>
</html>
{{st.block.doctype}}
<html>
<head>
{{st.block.metatags}}
{{st.block.defaultcss}}
{{st.block.profilecss}}
{{st.block.defaultjs}}
{{st.block.profilejs}}
</head>
<body class="{{st.bodyclass.value}} st-inputs-style st-blocks-style">
{{st.block.header}}
<div class="st-content">
{{st.block.messagesdiv}}
<h2>Order details</h2>
{{st.block.orderdetailsdiv}}
<h2>Transaction response</h2>
{{st.block.transactionresponsediv}}
<h2>Billing details</h2>
{{st.block.billingresponsediv}}
<h2>Delivery details</h2>
{{st.block.deliveryresponsediv}}
</div>
{{st.block.footer}}
</body>
</html>
{{st.block.doctype}}
<html>
<head>
{{st.block.metatags}}
{{st.block.defaultcss}}
{{st.block.profilecss}}
{{st.block.defaultjs}}
{{st.block.profilejs}}
</head>
<body class="{{st.bodyclass.value}} st-inputs-style st-blocks-style">
{{st.block.header}}
<div class="st-content">
{{st.block.messagesdiv}}
{{st.block.lockeddiv}}
</div>
{{st.block.footer}}
</body>
</html>
Zodra u uw opmaak hebt geschreven en de bestanden hebt geüpload, kunt u uw wijzigingen activeren. Klik hier om verder te gaan.
