Pas het uiterlijk van Payment Pages aan - Trust Payments

Onze gehoste Payment Pages integratie ondersteunt diepgaande aanpassingen van lay-out en uiterlijk met aangepaste HTML, CSS en JavaScript.

Hoe werkt het?

Aangepaste HTML / CSS / JS-opmaak schrijven.
Upload bestanden naar ons platform via de Portal Bestandsbeheer om een stprofile.
Werk de HTTPS POST bij naar Payment Pages om een stprofile bij het afrekenen.

Content Security Policy (CSP)

Als je aangepaste styling wilt implementeren in je Payment Pages, moet je contact opnemen met ons ondersteuningsteam om ervoor te zorgen dat CSP-blocking is ingeschakeld op je test site referentie. U moet ook een lijst met vertrouwde URI's (Uniform Resource Indicators) opgeven die toegang moeten krijgen vanuit uw mark-up. Typische voorbeelden zijn wanneer je moet verwijzen naar extern gehoste scripts of afbeeldingen om bepaalde visuele aspecten van je kassa weer te geven en/of om analyses uit te voeren.

Opmerking: Om een URI op te nemen in de witte lijst, moet de bron worden geladen via HTTPS.

Wij zullen communicatie naar URI's die niet in de bovengenoemde lijst voorkomen blokkeren om uw account beter te beschermen tegen inmenging door onbevoegde derden. Om deze reden is het belangrijk om uw wijzigingen grondig te testen op uw test site referentie voordat u ze toepast op uw live site referentie.

Mocht u in de toekomst de whitelist URI voor een van uw sitereferenties moeten bijwerken, neem dan contact op met ons Support Team en wij zullen de configuratie dienovereenkomstig bijwerken. Wij laten u weten wanneer de nieuwe URI's in de whitelist zijn opgenomen en beschikbaar zijn voor gebruik als onderdeel van uw oplossing.

Als u vragen heeft of nadere toelichting wenst, aarzel dan niet om contact met ons op te nemen.

Wat is een stprofile?

Om het uiterlijk en de lay-out van Payment Pages aan te passen, moet je gebruikmaken van stprofiles.

Een stprofile bestaat uit aangepaste HTML-, CSS- en/of JavaScript-bestanden die samenwerken om wijzigingen toe te passen.

Je kunt meerdere stprofielen instellen om verschillende lay-outs en/of styling toe te passen, afhankelijk van de situatie.

Voor een winkel met wenskaarten kun je bijvoorbeeld verschillende stprofielen hebben voor elke afdeling of producttype:

Door de POST te updaten naar Payment Pages, kan een aangepaste stprofile worden toegepast voor elke klantsessie.

Als er geen aangepaste stprofile niet is opgegeven, worden de standaard Trust Payments-pagina's weergegeven.

Conventies voor bestandsnamen

Markup wordt toegewezen aan stprofiles door de bestandsnaam vooraf te laten gaan door de naam van de stprofile.

Je moet dus beginnen met het bepalen van de naam van je stprofile(s).

Als je van plan bent om dezelfde styling te gebruiken voor alle klantsessies, hoef je er alleen maar één te noemen stprofile die je op elke transactie kunt toepassen.

Als de stijl moet verschillen afhankelijk van de situatie, moet je er meer dan één plannen. stprofile.

Houd bij het benoemen van je stprofile rekening met de volgende vereisten:

stprofile namen mogen alleen kleine letters en/of cijfers bevatten (max. lengte 20).
stprofile namen mogen geen hoofdletters, leestekens of spaties bevatten.

Als de stprofile naam is bepaald, moeten de geüploade opmaakbestanden de onderstaande naamgeving volgen:
(Vervang [stprofile ] door de naam van uw stprofile)

[stprofile ] choice.html - Pagina waar de klant zijn betaalmethode selecteert.
[stprofile ] details.html - Pagina waar de klant zijn betalingsgegevens invoert.
[stprofile ] locked.html - Pagina die wordt weergegeven wanneer de klant een nieuwe pagina opent terwijl de betaling wordt verwerkt.
[stprofile ] 3dredirect.html - Pagina die wordt weergegeven wanneer de klant wordt doorgestuurd naar 3-D Secure authenticatie.
[stprofile ] response.html - Pagina die aan de klant wordt getoond na voltooiing van de transactie.
[stprofile ].css - Je kunt een enkel CSS-bestand uploaden dat alle pagina's voor de gegeven stprofile.
[stprofile ].js - Je kunt een enkel JS-bestand uploaden dat alle pagina's voor de gegeven stprofile.

We zullen hierna uitleggen wat je in deze bestanden moet zetten, maar als je klaar bent, klik dan hier voor informatie over hoe je ze kunt uploaden naar ons systeem via de Portal Bestandsbeheer .

Opmerking: Hoewel meerdere stprofielen kunnen worden gedefinieerd voor een enkele site referentie, kunnen de bestanden die u uploadt alleen worden gebruikt op de site referentie waarnaar ze zijn geüpload. Om een stprofile op meerdere sites te gebruiken, moeten de bestanden afzonderlijk worden geüpload naar elke site referentie waar ze nodig zijn.

Opmaak schrijven

Bij het schrijven van je HTML-code moet je gebruik maken van ingebouwde velden en blokken om velden weer te geven op de pagina's wanneer ze 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.

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.

Veldtypes

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. bijv.

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.

Voorvulling en validatie

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 velden

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.

Meldingen en doorverwijzingen

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.

Veldverwijzing

Legenda

- Waarden die kunnen worden weergegeven
- Tekstvelden waarin gebruikers kunnen typen
- Dropdowns waaruit gebruikers kunnen kiezen

Veld	Beschrijving
accounttypedescription	Het type rekening waarmee het verzoek wordt verwerkt (bv. "ECOM", "MOTO").
authcode	De code autorisatie wordt door de kaartuitgever verstrekt op autorisatie.
ban	Specifiek veld voor bankoverschrijving: Bankrekeningnummer van de klant.
bankid	Specifiek veld voor bankoverschrijvingen: Bank id van de klant.
bankname	Specifiek veld voor bankoverschrijvingen: Naam van de bank van de klant.
baseamount	Het bedrag in basiseenheden zonder komma's of decimalen. Bijvoorbeeld, £10,50 in basiseenheden is "1050".
bic	Geldige BIC (Bank Identifier Code) van de bank van de klant.
billingcountryiso2a	Landcode van twee cijfers voor het factuuradres. Klik hier voor een lijst met landcodes.
billingcounty	County voor het factuuradres.
billingdob	Geboortedatum van de rekeninghouder.
billingdobday	Geboortedatum van de rekeninghouder (de dag).
billingdobmonth	Geboortedatum van de rekeninghouder (de maand).
billingdobyear	Geboortedatum van de rekeninghouder (het jaar).
billingemail	E-mailadres voor facturering.
billingfirstname	Voornaam voor factuurgegevens.
billinglastname	Achternaam voor factuurgegevens.
billingmiddlename	Middelste naam of initiaal voor facturatiegegevens.
billingpostcode	De postcode van het factuuradres.
billingprefixname	Billing Name Prefix. Bijvoorbeeld: "De heer", "De heren", "Juffrouw", "Dr.".
billingpremise	De eerste regel van het factuuradres.
billingstreet	De straatnaam van het factuuradres.
billingsuffixname	Achtervoegsel factuurnaam. Bijvoorbeeld "Phd", "BSc MEng".
billingtelephone	Het telefoonnummer voor het factuuradres.
billingtelephonetype	Dit is een attribuut voor het telefoonnummer. De beschikbare opties zijn: "H" = Thuis, "M" = Mobiel, "W" = Werk.
billingtown	De stad van het factuuradres.
credentialsonfile	De toegestane waarden voor dit veld zijn 0, 1 en 2. "0" - Komt niet in aanmerking voor Gevevens in Bestand, of is niet van plan om referenties op een later tijdstip opnieuw te gebruiken. "1" - Transactiegegevens gemarkeerd als beschikbaar voor toekomstig gebruik. "2" - Betaling met gebruik van eerder opgeslagen inloggegevens.
currencyiso3a	De Munt in het formaat van 3 tekens. Klik hier voor een lijst met valuta.
customeraccountnumber	Als het type rekeningnummer "ACCOUNT" is, het rekeningnummer van de rekeninghouder. Als het type rekeningnummer "CARD" is, het kaartnummer van de rekeninghouder (alleen voor rekeningen met schuldaflossing in het Verenigd Koninkrijk).
customeraccountnumbertype	Ofwel "CARD" of "ACCOUNT". (Alleen in het Verenigd Koninkrijk gevestigde schuldaflossingsrekeningen).
customercountryiso2a	Landcode van twee cijfers voor het adres van de klant. Klik hier voor een lijst met landcodes.
customercounty	County voor het adres van de klant.
customerdob	Geboortedatum van de klant in het formaat JJJJ-MM-DD.
customerdobday	Klant Geboortedatum (de dag).
customerdobmonth	Geboortedatum van de klant (de maand).
customerdobyear	Geboortedatum van de klant (het jaar).
customeremail	Het e-mailadres van de klant.
customerfirstname	De voornaam van de klant.
customerip	Het IP-adres van de klant.
customerlastname	De achternaam van de klant.
customermiddlename	De middelste naam van de klant.
customerpostcode	De postcode van het adres van de klant.
customerprefixname	Het voorvoegsel van de naam van de klant (bv. "De heer", "Juffrouw", "Dr.").
customerpremise	Het adres van de klant (naam of huisnummer).
customerstreet	Het adres van de klant straatnaam.
customersuffixname	Het achtervoegsel van de naam van de klant (bijv. "Bsc").
customertelephone	Het telefoonnummer van de klant.
customertelephonetype	Dit is een attribuut voor het telefoonnummer. De beschikbare opties zijn: "H" = Thuis, "M" = Mobiel, "W" = Werk.
customertown	De woonplaats van de klant.
dccbaseamount	DCC-specifiek: Het bedrag dat u wilt laten bijschrijven in de valuta van de Merchant. Dit bedrag in basiseenheden zonder decimalen, dus €10,50 zou "1050" zijn.
dccconversionrate	DCC-specifiek: De omrekeningskoers die wordt gebruikt om het bedrag op Munt van de Klant te berekenen.
dccconversionratesource	DCC-specifiek: De bron van de conversiekoers die wordt geretourneerd door de DCC provider.
dcccurrencyiso3a	DCC-specifiek: De Munt van de Merchant in iso3a-formaat.
dccenabled	DCC-specifiek: Geeft aan of de transactie werd verwerkt met DCC. "1"= Ja, "0" = Nee.
dccexpirytimestamp	DCC-specifiek: De vervaldatum van de CURRENCYRATE look-up. Latere verzoeken die de CURRENCYRATE als bovengeschikte verzoek gebruiken, moeten vóór deze datum en tijd worden afgewikkeld. Formaat: JJJJ-MM-DD HH:MM:SS.
dccmainamount	DCC-specifiek: Het bedrag dat u wilt laten bijschrijven in de valuta van de Merchant. Dit bedrag in hoofdeenheden, met decimalen, dus €10,50 zou "10.50" zijn.
dccmarginratepercentage	DCC-specifiek: Het percentage dat wordt gebruikt om de omzettingskosten voor Munt te berekenen (4 cijfers achter de komma), automatisch toegevoegd aan het bedrag op Munt van de Klant door de provider DCC .
dccoffered	DCC-specifiek: De volgende waarden kunnen worden geretourneerd: 1 - DCC Aangeboden & Aanvaard De klant heeft het aanbod van DCC aanvaard en heeft ervoor gekozen om te betalen via de Munt van zijn kaartuitgever. 2 - DCC Niet beschikbaar De klant betaalt in de winkel Munt. (bijv. de CURRENCYRATE aanvraag heeft een fout) 3 - DCC Aangeboden & geweigerd De klant heeft het aanbod van DCC geweigerd en ervoor gekozen om te betalen in de webwinkel van Munt.
dccprovider	DCC-specifiek: De naam van de externe DCC provider die de omrekeningskoers heeft geleverd die in de betaling wordt gebruikt.
dccproviderdata	DCC-specifiek: Een unieke tekenreeks die informatie bevat over de berekende omrekeningskoers, rechtstreeks teruggestuurd van bepaalde aanbieders van omrekeningskoersen.
dccratio	DCC-specifiek: De verhouding tussen het bedrag op Munt van de Klant en het bedrag op Munt van de Handelaar, verwerkt in het verzoek in hoofdeenheden.
dcctype	DCC-specifiek: Ofwel "DCC" of "CPC".
debtrepayment	Geeft aan of de transactie is gemarkeerd als schuldaflossing: 1 - Transactie is gemarkeerd als schuldaflossing. 0 - Transactie is niet gemarkeerd als schuldaflossing.
errorcode	Een code om het resultaat van de transactie aan te geven. De code zal "0" zijn als de transactie succesvol was.
errordata	Aanvullende informatie om een fout te helpen oplossen.
errormessage	Een tekstbeschrijving om het resultaat van de transactie aan te geven. Het bericht zal "Oké" zijn als de transactie succesvol was.
expirydate	De op de kaart gedrukte vervaldatum.
expirymonth	De maand van de op de kaart gedrukte vervaldatum.
expiryyear	Het jaar van de op de kaart gedrukte vervaldatum.
facilitatorid	De door Mastercard bij de registratie toegewezen id van de betalingsfacilitator.
facilitatorname	De naam van de betalingsfacilitator is overeengekomen met Mastercard.
iban	Specifiek veld voor bankoverschrijvingen: Het internationale bankrekeningnummer van de klant.
independentsalesorgid	De ISO (Independent Sales Organisation) id die bij de registratie door Mastercard wordt toegewezen.
initiationreason	Dit zijn de waarden waar wij momenteel achter staan: "A" - Herautorisatie "C" - Onvoorziene betaling "D" - Uitgestelde kosten "S" - Opnieuw indienen "X" - No-show (voor een hotelboeking)
issuenumber	Het uitgiftenummer dat op de kaart is gedrukt.
issuer	De kaartuitgever.
issuercountryiso2a	Landcode van twee cijfers voor de uitgever van de kaart. Klik hier voor een lijst met landcodes.
mainamount	Dit bedrag in hoofdeenheden, met decimalen, dus €10,50 zou "10.50" zijn.
mandatereference	Unieke referentie die elke automatische incasso identificeert.
maskedachaba	ACH-specifiek veld: Masked transit routing number.
maskedachaccountnumber	ACH-specifiek veld: Gemaskeerd rekeningnummer.
maskedban	Specifiek veld voor bankoverschrijving: Gemaskeerd bankrekeningnummer.
maskedcustomeraccountnumber	Als het type rekeningnummer "ACCOUNT" is, het rekeningnummer van de rekeninghouder. Als het type rekeningnummer "CARD" is, het kaartnummer van de rekeninghouder (alleen voor rekeningen met schuldaflossing in het Verenigd Koninkrijk). (gemaskeerd)
maskediban	Specifiek veld voor bankoverschrijvingen: Gemaskeerd internationaal bankrekeningnummer.
maskednationalid	Het sofinummer van de klant. (gemaskeerd)
maskedpan	Dit is het kaartnummer dat op de voorkant van de kaart van de klant staat. (gemaskeerd)
merchantemail	Het e-mailadres van de handelaar.
merchantname	De naam van de handelaar.
nationalid	Het sofinummer van de klant.
operatorname	De waarde van dit veld bevat de naam van de gebruiker die het verzoek heeft verwerkt.
orderreference	Uw unieke bestelreferentie die in het Trust Payments systeem kan worden opgeslagen.
pan	Dit is het kaartnummer dat op de voorkant van de kaart van de klant staat.
paymenttypedescription	De betaalwijze van de klant, bijvoorbeeld "VISA" of "MASTERCARD".
paypalemail	Het e-mailadres waarmee de klant zich aanmeldt bij PayPal.
rewardid	De beloning id.
securitycode	Veiligheidscode op de kaart gedrukt.
settleduedate	De dag waarop u de transactie wilt afwikkelen. Deze moet in het formaat JJJJ-MM-DD staan.
settlestatus	Deze waarde heeft betrekking op de status die u aan de transactie wilt geven.
sitereference	Unieke verwijzing naar uw site, ontvangen bij installatie.
startdate	Begindatum op de kaart gedrukt.
startmonth	Maand van de op de kaart gedrukte begindatum.
startyear	Jaar van de op de kaart gedrukte begindatum.
submerchantid	Waarde toegekend door de betalingsfacilitator wanneer deze bij de transactie betrokken is.
subscriptionbegindate	De datum waarop de eerste terugkerende abonnementsbetaling zal worden verwerkt.
subscriptionfinalnumber	Het aantal in totaal te verwerken abonnementen gedurende de looptijd van het abonnement (inclusief de eerste autorisatie).
subscriptionfrequency	In combinatie met het subscriptionunit bepaalt dit hoe vaak betalingen worden verwerkt.
subscriptionnumber	De positie van de transactie binnen een reeks abonnementsbetalingen.
subscriptiontype	Het type Abonnement, zoals vereist door de overnemende bank. De waarde kan ofwel "INSTALLMENT" of "RECURRING" zijn.
subscriptionunit	De tijdseenheid tussen elke inschrijving. Dit kan "DAY" of "MONTH" zijn.
transactionreference	Unieke referentie van de transactie, beschikbaar nadat een betalingsverzoek is verwerkt.
transactionstartedtimestamp	Tijdstempel van wanneer de transactie is verwerkt.
walletdisplayname	De naam van de portemonnee die bij de transactie wordt gebruikt.
walletsource	De bron van de transactieportefeuille.

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.

Blok Referentie

Legenda

Blokken die op een bepaalde pagina worden ondersteund, worden aangeduid met een groen vinkje:
Sommige blokken zijn Verplicht op een bepaalde pagina. Deze worden weergegeven met een roze dubbel vinkje:
Sommige blokken zijn alleen onder bepaalde omstandigheden nodig. Deze worden weergegeven met een geel vierkant pictogram:
Niet alle blokken worden op alle pagina's ondersteund. Niet-ondersteunde blokken worden weergegeven met een kruisje:

Blok	Mogelijkheid om op elke pagina
Blok	Choice	Details	Locked	3-D Redirect	Reactiee
{{st.block.header}} Geeft de koptekst van Trust Payments weer.
{{st.block.requiredjs}} Vereist voor gebruik van EMV 3DS en digitale portemonnees.
{{st.block.hiddendiv}} Bevat vereiste sessie-informatie voor een correcte werking. Een van deze blokken is vereist op de keuzepagina
{{st.block.smallpaymentchoicesdiv}} Toont kleine logo's waarmee klanten hun betaalmethode kunnen selecteren. Een van deze blokken is vereist op de keuzepagina
{{st.block.standardpaymentchoicesdiv}} Toont logo's van normale grootte zodat klanten hun betaalmethode kunnen selecteren. Een van deze blokken is vereist op de keuzepagina
{{st.block.defaultcss}} Past de standaard Trust Payments CSS toe.
{{st.block.defaultjs}} Past de standaard Trust Payments JS toe.
{{st.block.doctype}} Bevat de HTML DOCTYPE-declaratie.
{{st.block.footer}} Geeft de voettekst van Trust Payments weer.
{{st.block.messagesdiv}} Geeft succes-/waarschuwings-/foutberichten weer in de browser.
{{st.block.metatags}} Bevat metadata over de pagina die wordt gebruikt door Trust Payments.
{{st.block.profilecss}} Zorgt ervoor dat je aangepaste CSS wordt toegepast.
{{st.block.profilejs}} Zorgt ervoor dat je aangepaste JS wordt toegepast.
{{st.block.billingresponsediv}} Hiermee worden de factuurgegevens weergegeven.
{{st.block.deliveryresponsediv}} Geeft de details van het leveringsantwoord weer.
{{st.block.orderdetailsdiv}} Geeft de bestelinformatie weer.
{{st.block.billingdetailsdiv}} Geeft een formulier weer waarmee klanten hun factuurgegevens kunnen invoeren.
{{st.block.deliverydetailsdiv}} Toont een formulier waarmee klanten hun leveringsgegevens kunnen invoeren.
{{st.block.processingpaymentdiv}} Toont het laadbericht terwijl de betaling wordt verwerkt.
{{st.block.billingdetailsdivcountystatedropdown}} Geeft het formulier voor het invoeren van factureringsgegevens weer. (Voor gebruikers in de VS wordt Provincie facturatie weergegeven als factureringsstatus)
{{st.block.currencydetailsdiv}} Geeft DCC selectie-informatie weer.
{{st.block.deliverydetailsdivcountystatedropdown}} Geeft een formulier weer voor het invoeren van leveringsgegevens. (Voor gebruikers in de VS wordt het land van levering weergegeven als leveringsstatus)
{{st.block.paymentdetailsdiv}} Toont een formulier waarmee klanten hun betalingsgegevens kunnen invoeren.
{{st.block.requirednoticediv}} Tekst die uitlegt hoe * naast een veld betekent dat het verplicht is.
{{st.block.lockeddiv}} Hiermee wordt het bericht Betaling vergrendeld weergegeven.
{{st.block.3dredirectdiv}} Verwerkt de omleiding naar EMV 3DS.
{{st.block.currencyresponsediv}} Geeft de antwoorddetails van DCC weer.
{{st.block.transactionresponsediv}} Geeft de details van de transactiereactie weer.

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

We raden aan om alleen te verwijzen naar bestanden die zijn opgeslagen op Portal Bestandsbeheer en niet naar een externe bron, anders kan de browser van de klant een waarschuwing weergeven dat de pagina niet veilig is.

Om te verwijzen naar afbeeldingen die zijn geüpload naar je account met de Portal Bestandsbeheer in uw HTML:

Include {{stresource.<filename>}} in your HTML:

{{stresource.companylogo.gif}}

Als u wilt verwijzen naar afbeeldingen die zijn geüpload naar uw account met behulp van de Portal Bestandsbeheer in uw CSS of JavaScript:

Use the relative path as follows:
/merchantfiles/<first 3 numbers of site ref>/<site reference>/<filename>

Voorbeeld:

<img src=”/merchantfiles/018/testsite018/companylogo.gif” alt=”companylogo” />

We raden aan om alleen te verwijzen naar aangepaste bestanden die zijn opgeslagen op Bestandsbeheer en niet naar een externe bron, anders kan de browser van de klant een waarschuwing weergeven dat de pagina niet veilig is.

Voorbeelden

Hieronder staan voorbeelden van aangepaste pagina's met de ST-blokken. Voel je vrij om deze sjablonen te gebruiken om je eigen pagina's te maken, gebruikmakend van de blok- en veldreferenties hierboven.

{{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>

Nadat je de benodigde opmaak hebt geschreven, kun je de bestanden uploaden via Bestandsbeheer. Zorg ervoor dat de bestanden voldoen aan onze naamgevingsconventies.

POST bijwerken naar Payment Pages

Nadat je de vereiste bestanden hebt geüpload, kunnen ze worden gebruikt om je pagina's te renderen door de volgende mark-up toe te voegen aan je afrekenformulier, inclusief de naam van je stprofile:

<input type=’hidden’ name=’stprofile’ value='[name of stprofile]’>

Wanneer de stprofile naam is opgenomen in de POST, worden de bijbehorende bestanden gebruikt (indien beschikbaar) voor elke Trust Payments-gehoste pagina.
Wanneer de stprofile niet is opgenomen in de POST, wordt de standaard styling gebruikt tijdens het betalingsproces.

De volgende voorbeelden zijn voor het starten van het betalingsproces op depagina "Choice" en "Details":

<html>
  <head>
  </head>
  <body>
    <!--YOUR HTML-->
    <form method="POST" action="<DOMAIN>/process/payments/choice">
      <input type="hidden" name="sitereference" value="test_site12345">
      <input type="hidden" name="stprofile" value="birthday">
      <input type="hidden" name="currencyiso3a" value="USD">
      <input type="hidden" name="mainamount" value="100.00">
      <input type="hidden" name="version" value="2">
      <input type="hidden" name="orderreference" value="myorder12345">
      <input type="submit" value="Pay">
    </form>
  </body>
</html>

<html>
  <head>
  </head>
  <body>
    <!--YOUR HTML-->
    <form method="POST" action="<DOMAIN>/process/payments/details">
      <input type="hidden" name="sitereference" value="test_site12345">
      <input type="hidden" name="stprofile" value="birthday">
      <input type="hidden" name="currencyiso3a" value="USD">
      <input type="hidden" name="mainamount" value="100.00">
      <input type="hidden" name="version" value="2">
      <input type="hidden" name="paymenttypedescription" value="VISA">
      <input type="hidden" name="orderreference" value="myorder12345">
      <input type="submit" value="Pay">
    </form>
  </body>
</html>

Vervang <DOMAIN> met een ondersteund domein. Klik hier voor een volledige lijst.

Het uiterlijk van Payment Pages