Überschreiben des Standardtextes der Bibliothek

  Zuletzt aktualisiert: 

 

Bei der Initialisierung der Websitejs library können Sie die Standardtextwerte von übersetzen:

  • Meldungen, die innerhalb des Benachrichtigungsbereichs erscheinen (st-notification-frame)
  • Etiketten der Kartenkomponenten
  • Taste "Bezahlen" der Karte
  • Karte Komponenten Validierungsetiketten

 

  Vorteile:

  • Geben Sie alternative Formulierungen zu den Standardphrasen an, um die Stimme Ihrer Marke besser wiederzugeben.
  • Übersetzen von Text in Sprachen, die wir derzeit nicht als unterstützte Sprachen akzeptieren locale (wie beschrieben auf diese Seite).

CJ10-EN.png
Unveränderte Kartenkomponenten

 

Übersetzen des Textes

Während der Initialisierung der Websitejs library können Sie den Standardtext mithilfe der Eigenschaft Übersetzungen aktualisieren. Die Eigenschaft translation erwartet ein Wörterbuch, in dem jeder Schlüssel den zu überschreibenden Standardtext darstellt. Für jeden Schlüssel, der im Objekt translations angegeben ist, müssen Sie einen benutzerdefinierten Textwert angeben.

<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 ist die vollständige Liste der Phrasen, für die benutzerdefinierter Text angegeben werden kann:
Wichtig: Es wird zwischen Groß- und Kleinschreibung unterschieden.

  • Benachrichtigung über Nachrichten:
    • “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”

CJ7-EN.png     CJ9-EN.png
Vorher und nachher - Anpassung der Benachrichtigungen

  • Karte Komponenten Etiketten:
    • “Card number”
    • “Expiration date”
    • “Security code”

CJ10-EN.png     CJ11-EN.png
Vorher und nachher - Individuelle Gestaltung der Etiketten

  • Karte Schaltfläche "Bezahlen":
    • “Pay”
    • “Processing”

CJ10-EN.png     CJ13-EN.png
Vorher und nachher - Anpassen der Schaltfläche

  • Karte Komponenten Validierungsetiketten:
    • “Field is required”
    • “Value is too short”
    • “Value mismatch pattern”

CJ14-EN.png     CJ15-EN.png
Vorher und nachher - Anpassen der Validierungsetiketten

 

Benutzerdefinierte Übersetzungen nach der Initialisierung von st.js library

Nach der Initialisierung von st.js library können die den Übersetzungen zugewiesenen Werte mit der Methode updateTranslations(translations: object, replace = false): void

  • Das erste Argument akzeptiert ein Übersetzungsobjekt, das der Spezifikation entspricht, die in der ursprünglichen Konfiguration angegeben wurde.
  • Das zweite Argument ersetzen. ist optional und steht standardmäßig auf false.
    • Bei false behält die updateTranslations-Methode das ursprüngliche translations-Objekt während der Initialisierung bei und ändert die im neuen Objekt angegebenen Nachrichten und Label-Schlüssel.
    • Wenn der Wert "true" ist, überschreibt die updateTranslations-Methode die Textübersetzungen, die im ursprünglichen Übersetzungsobjekt enthalten sind.

 

Beispiel für einen Anwendungsfall

Wenn Sie die Websitejs library initialisieren, nehmen wir an, dass Sie die Schaltfläche "Bezahlen" so übersetzen möchten, dass sie einen Betrag enthält:

translations: {'Pay': 'Pay £15.99'}

Wenn sich der Gesamtpreis zu irgendeinem Zeitpunkt ändert (z. B. aufgrund von Versandkosten), müssen Sie den auf der Schaltfläche "Bezahlen" angezeigten Betrag aktualisieren, indem Sie die Methode updateTranslations wie folgt aufrufen:

st.updateTranslations({'Pay': 'Pay £18.99'}, replace = false);

Durch die Verwendung von replace=false wird sichergestellt, dass nur die Übersetzung der Schaltfläche "Bezahlen" betroffen ist und alle anderen bei der Initialisierung angegebenen Übersetzungen unverändert bleiben.

Die updateTranslations-Methode, wie im obigen Beispiel beschrieben, kann immer nur den Betrag aktualisieren, der dem Kunden angezeigt wird, nicht den tatsächlich verarbeiteten Transaktionsbetrag.

Um den dem Kunden in Rechnung gestellten Betrag zu aktualisieren, müssen Sie auf Ihrem Server ein neu signiertes JWT mit dem neuen Betrag erzeugen und dieses als erstes Argument der updateJWT Methode übergeben.

Klicken Sie hier und erfahren Sie mehr über die updateJWT Methode.

War dieser Artikel hilfreich?
0 von 0 Personen fanden dies hilfreich