Bij het initialiseren van de st.js library kun je de standaardtekstwaarden van vertalen:
- Berichten die in de div voor meldingen verschijnen (st-notification-frame)
- Labels kaartonderdelen
- Knop "Betalen
- Kaartonderdelen validatielabels
Voordelen:
- Zorg voor alternatieve bewoordingen voor de standaardzinnen om de stem van je merk beter weer te geven.
- Tekst vertalen in talen die we momenteel niet als ondersteund accepteren locale (zoals beschreven op deze pagina).
Ongewijzigde kaartonderdelen
De tekst vertalen
Tijdens de initialisatie van de st.js library, kun je de standaardtekst bijwerken met behulp van de vertaaleigenschap. De vertaaleigenschap verwacht een woordenboek, waarbij elke sleutel de standaardtekst vertegenwoordigt die moet worden overschreven. Voor elke sleutel in het vertalingenobject moet je een aangepaste tekstwaarde opgeven.
<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',
translations:{'An error occurred': 'INSERT YOUR CUSTOM PHRASE HERE'},
});
st.Components();
})();
</script>
</body>
</html>
Hier is de volledige lijst van zinnen waarvoor aangepaste tekst kan worden opgegeven:
Belangrijk: Deze zijn hoofdlettergevoelig.
- Melding div-berichten:
- “A target element for the input field with id could not be found. Please check your configuration”
- “Amount and currency are not set”
- “An error occurred”
- “Decline”
- “Form is not valid”
- “Invalid field”
- “Invalid request”
- “Invalid response”
- “Merchant validation failure”
- “Method not implemented”
- “Payment has been cancelled”
- “Payment has been successfully processed”
- “Timeout”
- “You are not logged to Apple account”
Voor en na - De meldingen div aanpassen
- Kaart Onderdelen labels:
- “Card number”
- “Expiration date”
- “Security code”
Voor en na - De etiketten aanpassen
- Knop "Betalen" op de kaart:
- “Pay”
- “Processing”
Voor en na - De knop aanpassen
- Kaart Onderdelen validatielabels:
- “Field is required”
- “Value is too short”
- “Value mismatch pattern”
Voor en na - De validatielabels aanpassen
Aangepaste vertalingen na initialisatie van st.js library
Na initialisatie van de st.js library kunnen de waarden die zijn toegewezen aan vertalingen worden overschreven met de methode vertalingen bijwerken(vertalingen: object, vervangen = false): void
- Het eerste argument accepteert een vertalingsobject dat overeenkomt met de specificatie die is verstrekt aan de initiële configuratie.
- Het tweede argument vervangen is optioneel en is standaard false.
- Indien false, behoudt de methode updateTranslations het oorspronkelijke vertalingsobject tijdens initialisatie en wijzigt de berichten en labelsleutels die in het nieuwe object zijn gespecificeerd.
- Als dit waar is, overschrijft de methode updateTranslations de tekstvertalingen in het oorspronkelijke vertalingsobject.
Voorbeeld Use Case
Stel dat je bij het initialiseren van de st.js library de knop "Betalen" wilt vertalen naar een bedrag:
translations: {'Pay': 'Pay £15.99'}Als op enig moment de totale prijs verandert (bijvoorbeeld door verzendkosten), moet je het bedrag dat wordt weergegeven op de knop "Betalen" bijwerken door de methode updateTranslations op deze manier aan te roepen:
st.updateTranslations({'Pay': 'Pay £18.99'}, replace = false);
Door replace=false te gebruiken, wordt alleen de vertaling van de knop "Betalen" beïnvloed en blijven alle andere vertalingen die tijdens de initialisatie zijn opgegeven ongewijzigd.
De methode updateTranslations zoals beschreven in het bovenstaande voorbeeld kan alleen het bedrag bijwerken dat wordt weergegeven aan de klant, niet het werkelijke verwerkte transactiebedrag.
Om het bedrag dat aan de klant in rekening is gebracht bij te werken, moet je een nieuw ondertekend JWT op je server genereren met het nieuwe bedrag en dit als eerste argument van de updateJWT methode.
