1️⃣ Konfigurieren Sie die Bibliothek

Bevor Sie fortfahren, vergewissern Sie sich bitte, dass Sie alle Anforderungen erfüllt haben
Klicken Sie hier, um diese Informationen in einer neuen Registerkarte zu öffnen

Aktualisieren Sie Ihr Zahlungsformular

Sie müssen Ihr serverseitiges Zahlungsformular so aktualisieren, dass es unser "st.js" JavaScript Library enthält (wie im Beispiel unten gezeigt). Die JavaScript Library wird die Anfragen verarbeiten und die zurückgegebenen Antworten bearbeiten.

Bitte stellen Sie sicher, dass Ihr System die st.js library auf den Trust Payments Servern referenziert. Dadurch wird sichergestellt, dass Ihre Lösung immer die neueste Version der Bibliothek verwendet.

Wenn der Kunde seine Zahlungsdaten in das Zahlungsformular eingibt und absendet, kontaktiert unser st.js den Kartenaussteller, um festzustellen, ob die Karte registriert ist. Wenn der Kartenaussteller feststellt, dass ein erhöhtes Betrugsrisiko besteht, wird dem Kunden automatisch ein Overlay angezeigt, in dem er zur Authentifizierung aufgefordert wird.

Um dieses Verhalten zu aktivieren, müssen Sie auf die Website JavaScript Library verweisen, indem Sie eine definierte Konfiguration einfügen, die eine bestimmte Methode verwendet ("st.Components") innerhalb von "st.js".

Hinweis: Stellen Sie sicher, dass Sie die anonyme Funktion wie im Beispiel gezeigt einschließen. Dadurch wird verhindert, dass JS ausgeführt wird, bis die st.js geladen wurde.

In diesem einfachen Beispiel wird eine einfache Kasse dargestellt, die den Kunden zur Eingabe seiner Kartendaten auffordert und eine Zahlung verarbeitet:

<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"></div>
      <div id="st-expiration-date"></div>
      <div id="st-security-code"></div>
      <button type="submit">Pay securely</button>
    </form>
    <script src="https://cdn.eu.trustpayments.com/js/latest/st.js"></script>
    <script>
      (function() {
        var st = SecureTrading({
          jwt : 'We explain how to construct this on the next page'
        });
        st.Components();
    })();
    </script>
  </body>
</html>

Bei JavaScript Library handelt es sich um einen verwalteten Dienst, der regelmäßig aktualisiert wird, um neue Funktionen hinzuzufügen und bestehende Funktionen zu verbessern. Aus diesem Grund muss die JavaScript Library für jede Zahlungsanforderung von https://cdn.eu.trustpayments.com/js/latest/st.js abgerufen werden. Andernfalls kann es passieren, dass Ihre Integration nicht korrekt funktioniert und Zahlungsanfragen fehlschlagen.

Wenn Sie Content Delivery Network (CDN) verwenden, um aufjs library zu verweisen, beachten Sie, dass CDN Anfragen von Ihrer localhost/127.0.0.1-Umgebung blockieren wird. Um Ihre Anwendung lokal mit CDN zu testen, müssen Sie Ihre Testanwendung mit Ihrer IPv4-Adresse und nicht mit localhost ausführen. Nachdem Sie Ihre IPv4-Adresse nachgeschlagen haben, müssen Sie localhost in Ihrem Browser durch die ermittelte IP-Adresse ersetzen.

st-notification-frame	Optional	A <div> Tag mit Attribut id=“st-notification-frame” kann in das Formular aufgenommen werden, um dem Kunden ungültige Felder und Verbindungsfehler anzuzeigen, so dass er die Zahlung beheben und erneut versuchen kann. Hinweis: Wenn Sie die Bibliothek nicht zur Verarbeitung von AUTH verwenden, empfehlen wir Ihnen, die Option st-notification-frame in Ihr Formular aufzunehmen, da dies dazu führen kann, dass widersprüchliche Bestätigungsmeldungen angezeigt werden. So kann z. B. die Antwort THREEDQUERY Authentication erfolgreich sein, aber die anschließende Autorisierung abgelehnt werden. Klicken Sie hier für weitere Informationen über die Verwendung von JavaScript Library zur Verarbeitung der 3-D Secure Authentifizierung, aber nicht der AUTH.
st-form	Erforderlich	Sie müssen sich vergewissern, dass Ihrem Zahlungsformular die ID "st-form" und ein Name zugewiesen wurde. action Attribut, das eine gültige URL-Adresse enthält, die auf Ihrem Server gehostet wird. Die angegebene Adresse muss in der Lage sein, die im Format application/x-www-form-urlencoded zurückgegebenen Daten zu verarbeiten (siehe das nachstehende Beispiel). Klicken Sie hier für ein Beispiel.
Payment divs	Erforderlich	Die folgenden Felder müssen im Zahlungsformular ausgefüllt werden: "st-card-number " - Die Kartennummer des Kunden. "st-expiration-date " - Das Ablaufdatum der Karte. "st-security-code " - Der Sicherheitscode der Karte. Sie müssen sicherstellen, dass die Kartennummer, das Ablaufdatum und der Sicherheitscode NICHT einen <input> Tag, da dies dazu führen kann, dass sensible Daten direkt auf Ihren Server übertragen werden.
st-animated-card	Optional	Damit wird eine Kartengrafik gerendert, die sich in Echtzeit aktualisiert und eine Vorschau der Karte des Kunden zeigt, während dieser seine Daten eingibt.

Initialisieren der Bibliothek

Sie müssen Ihr serverseitiges Zahlungsformular aktualisieren, um unser "st.js" JavaScript Library einzubinden. JavaScript Library wird die Anfragen verarbeiten und die zurückgegebenen Antworten bearbeiten. Wenn der Kunde seine Zahlungsdaten in Ihr Formular eingibt und es abschickt, kontaktiert unser st.js den Kartenaussteller, um festzustellen, ob die Karte registriert ist. Wenn der Kartenaussteller feststellt, dass ein erhöhtes Betrugsrisiko besteht, wird dem Kunden automatisch ein Overlay angezeigt, in dem er zur Authentifizierung aufgefordert wird.

Um dieses Verhalten zu aktivieren, müssen Sie auf JavaScript Library verweisen, indem Sie eine definierte Konfiguration hinzufügen, die eine bestimmte Methode ("st.Components") innerhalb von "st.js" verwendet.

Anmerkung: Stellen Sie sicher, dass Sie die anonyme Funktion wie im Beispiel gezeigt einschließen. Dadurch wird verhindert, dass JS ausgeführt wird, bis die st.js geladen wurde.

Standardmäßig zielt unsere 3-D Secure -Authentifizierung auf die Sandbox-Umgebung ab. Um diese Einstellung außer Kraft zu setzen und stattdessen die Produktionsumgebung zu verwenden, müssen Sie sicherstellen, dass Ihr Zahlungsformular folgende Angaben enthält
livestatus: 1.

(function() {
  var st = SecureTrading({ 
    jwt: 'INSERT YOUR JWT HERE',
    livestatus: 1
  }); 
  st.Components(); 
})();

Sobald die st.js-Bibliothek für Kartenzahlungen initialisiert wurde, hat der Kunde bis zu 15 Minuten Zeit, um seine Zahlung abzuschließen Schafft er es nicht, seine Sitzung innerhalb dieser Zeit abzuschließen, führt dies zu einem Fehler wegen eines fehlenden Tokens.

Vollständige Spezifikation der Bibliothek

	Field	Beschreibung
	animatedCard	Durch die Einstellung dieser Eigenschaft auf true wird eine animierte Grafik einer Karte auf dem Formular gerendert, je nachdem, wo Sie die st-animated-card div (wenn dieses div nicht vorhanden ist, wird die Karte nicht angezeigt). Standardmäßig wird die Karte nicht angezeigt (gesetzt auf false).
	buttonId	Standardmäßig setzt das JavaScript die erste Schaltfläche im DOM auf die Schaltfläche "Zahlung senden". Wenn Sie jedoch mehrere Schaltflächen-Tags in Ihrem Zahlungsformular haben, kann die Option buttonId zur Konfiguration von st.js hinzugefügt werden, um eine bestimmte Schaltfläche für die Übermittlung der Anfrage festzulegen. `<html> <body> <form id="st-form" action="https://www.example.com" method="POST"> <div class="example-form__section"> <div class="example-form__group"> <button type="submit" class="example-form__button" id="abcd">this is the pay button</button> </div> </div> </form> <script> (function() { var st = SecureTrading({ buttonId: 'abcd', }); })(); </script> </body> </html>`
	componentIds	Die Standard-Container-IDs für st.Components sind: `<div id="st-card-number"></div> <div id="st-expiration-date"></div> <div id="st-security-code"></div> <div id="st-animated-card"></div> <div id="st-notification-frame"></div>` Es ist z. B. möglich, die Standard-ID für jede Komponente einzeln zu ändern: `componentIds: { animatedCard: "st-animate", cardNumber: "st-card", expirationDate: "st-expiry", notificationFrame: "st-notify", securityCode: "st-cvv" }` Container mit benutzerdefinierten IDs: `<div id="st-card"></div> <div id="st-expiry"></div> <div id="st-cvv"></div> <div id="st-notify"></div> <div id="st-animate"></div>`
	disabledAutoPaymentStart	disabledAutoPaymentStart kann mit einem Array von Zahlungsmittelnamen gesetzt werden. Die vollständige Liste der unterstützten Namen lautet: ["APPLEPAY", "CARD", "GOOGLEPAY"] Wenn der Kunde eine Zahlungsmethode aus dem Array auswählt, wird der eigentliche Zahlungsvorgang aufgeschoben, so dass zuvor weitere Prüfungen und Prozesse durchgeführt werden können. disabledAutoPaymentStart wird in Verbindung mit der Bibliotheksfunktion paymentPreCheck Ereignis, das es ermöglicht, die gewählte Zahlungsmethode zu bestimmen und auch einen Rückruf bereitzustellen, um die Zahlung zu starten, sobald Sie die zusätzlichen Schritte abgeschlossen haben. Das folgende Beispiel zeigt, wie Sie verhindern können, dass GOOGLEPAY Transaktionen sofort gestartet werden, nachdem der Kunde auf die Schaltfläche "Bezahlen" geklickt hat, damit eine zusätzliche Validierung durchgeführt werden kann. Sobald die Validierung abgeschlossen ist, können Sie die Bibliothek benachrichtigen, mit der Zahlung fortzufahren, indem Sie paymentStart(); `<script> (function() { var st = SecureTrading({ jwt, disabledAutoPaymentStart: ['GOOGLEPAY'], }); st.Components(); st.GooglePay(); st.on('paymentPreCheck', (data) => { const {paymentMethod, paymentStart} = data; if (paymentMethod === 'GooglePay') { var validationPass = validateData(); if (validationPass){ paymentStart(); } else { //Notify customer of issue } } }); })(); </script>` Der Hauptzahlungsvorgang wird automatisch gestartet, wenn der Kunde eine Zahlungsmethode auswählt, die nicht in der Liste disabledAutoPaymentStart Array. Klicken Sie hier für weitere Informationen über die paymentPreCheck Ereignis und andere Ereignisoptionen.
	disableNotification	Standardmäßig zeigt das JavaScript nach einem Zahlungsversuch eine Erfolgs- oder Fehlermeldung an der Kasse an. In Fällen, in denen Sie Ihren Kunden nach einer Transaktion auf eine andere Seite auf Ihrer Website weiterleiten, möchten Sie diese Meldung vielleicht lieber ganz ausblenden, um einen reibungslosen Ablauf der Kaufabwicklung zu gewährleisten. Zu diesem Zweck müssen Sie Folgendes einfügen disableNotification mit Wert true. Hinweis: Wenn Sie eine digitale Geldbörsenlösung (wie Apple Pay oder Visa Checkout) implementiert haben, beachten Sie bitte, dass dadurch auch alle von JavaScript Library angezeigten Stornomeldungen ausgeblendet werden, falls der Kunde das Wallet-Overlay vor Abschluss der Transaktion schließt.
	errorReporting	Standardmäßig ist auf ST.js die Fehlerberichterstattung aktiviert, so dass wir Ihre JavaScript Library -Integration auf Fehler überwachen können, die das Zahlungserlebnis des Benutzers während der Kaufabwicklung beeinträchtigen könnten. Dies wird empfohlen und ist standardmäßig aktiviert. Wenn Sie es jedoch vorziehen, die Fehlerberichterstattung zu deaktivieren, können Sie dies tun, indem Sie die Eigenschaft auf false, zum Beispiel: `errorReporting: false`
	fieldsToSubmit	Wenn ein wiederkehrender Kunde mit einer gespeicherten Karte zahlt, bei der nur der Sicherheitscode erfasst werden muss, können Sie die Option SecureTrading Konfig mit: `fieldsToSubmit: ['securitycode']` Damit wird sichergestellt, dass nur die Eingabe des Sicherheitscodes beim Aufruf von st.Components. In diesem Artikel erfahren Sie mehr über die Annahme von Zahlungen mit einer gespeicherten Karte.
	formId	Sie können den Standardwert "st-form" ID an, was für Ihre Anwendung am besten geeignet ist. Zum Beispiel: `formId: 'my-checkout-form'`
	jwt	Ein signiertes JSON Web Token (JWT), das auf Ihrem Server generiert wurde. Um zu erfahren, wie Sie Ihr JWT konfigurieren, lesen Sie bitte diesen Artikel
	livestatus	Hier wird angegeben, ob die Prüfungen von 3-D Secure in der Testumgebung oder in der Produktionsumgebung durchgeführt werden. Es gibt zwei mögliche Werte, die übermittelt werden können - 0 und 1 - und die im Folgenden beschrieben werden: 0 - 3-D Secure Prüfungen werden unter Verwendung der Testumgebung durchgeführt (Standardverhalten, wenn nicht in Ihrem Markup enthalten). 1 - Die Prüfungen von 3-D Secure werden in derProduktionsumgebung durchgeführt (dies ist erforderlich, wenn Live-Zahlungen verarbeitet werden, ansonsten optional). `(function() { var st = SecureTrading({ jwt: 'INSERT YOUR JWT HERE', livestatus: 0 }); st.Components(); })();`
	panIcon	Sie können das Logo der Kartenmarke angeben, das im Feld für die Kartennummer angezeigt wird, wenn der Kunde das Zahlungsformular eingibt. Dazu müssen Sie Ihr serverseitiges Kassenformular aktualisieren und Folgendes einfügen panIcon mit Wert true.
	placeholders	Um den Platzhaltertext zu aktualisieren, der in den Eingabefeldern für die Kartenzahlung angezeigt wird, können Sie die placeholders konfigurieren. Jeder Platzhalter kann einzeln aktualisiert werden. Wenn Sie zum Beispiel keinen Platzhalter in der Karteneingabe wünschen, setzen Sie ihn als leere Zeichenfolge: `placeholders : { 'pan':'', 'expirydate':'Expiry date', 'securitycode':'Security code' }`
	stopSubmitFormOnEnter	Dieses Feld mit Wert übermitteln true um zu verhindern, dass der Kunde das Formular durch Drücken der Return-Taste auf seiner Tastatur abschickt. Stattdessen würde er auf die Schaltfläche "Bezahlen" klicken. Dies kann erforderlich sein, wenn Ihr System darauf angewiesen ist, dass der Kunde auf die Schaltfläche "Zahlung senden" klickt, um Aktualisierungen auf Ihrem Server durchzuführen.
	styles	Sie können die st.Components Eingaben über Stile. Für eine vollständige Palette von styles Optionen, können Sie auf der folgende Artikel. Es ist möglich, die Standard-ID für jede Komponente zu ändern. Zum Beispiel: `styles: { 'background-color-input': '#e71b5a', 'font-size-label': '18px', 'color-input': '#fff' }`
	submitCallback	Wenn Sie einen Rückruf nach Beendigung der Zahlungssitzung durchführen müssen, können Sie angeben submitCallback. Hier würden Sie eine Funktion übergeben, die eine Folge von Aktionen ausführt. Der Browser des Kunden erhält ein Objekt namens data die das Ergebnis der letzten Gateway-Anfrage enthält. Sie sollten die JWT-Antwort überprüfen, bevor Sie sich auf die data zurückgegeben.
	submitFields	Wenn der Kunde versucht, eine Zahlung vorzunehmen, und das Formular an die URL übermittelt wird, die im Feld action Attribut werden die folgenden Felder in ein JWT aufgenommen: baseamount currencyiso3a eci enrolled errorcode errordata errormessage orderreference settlestatus status transactionreference Wenn Sie es jedoch vorziehen, Ihre eigene Liste der zu verbuchenden Felder anzugeben, können Sie das Feld submitFields in Ihr Formular aufnehmen. Zum Beispiel: submitFields: ['errorcode', 'transactionreference'] Sie können zusätzliche Felder angeben, die nicht in der obigen Liste aufgeführt sind. Wir dokumentieren alle unterstützten Felder auf dieser Seite.
	submitOnCancel	Wenn der Kunde die Transaktion vor dem Abschluss abbricht, bleibt er standardmäßig auf derselben Seite und kann es mit einer anderen Zahlungsmethode erneut versuchen, falls er dies wünscht. Wenn es Ihnen lieber ist, dass der Browser des Kunden zu der in der Formularaktion angegebenen URL umgeleitet wird, wenn der Kunde storniert, können Sie das Formular aktualisieren und Folgendes einfügen submitOnCancel: true. Hinweis: Bei dieser alternativen Konfiguration wird auf dem Zahlungsformular keine Fehlermeldung angezeigt, bevor der Browser weitergeleitet wird.
	submitOnError	Wenn ein Fehler auftritt, bleibt der Kunde standardmäßig auf der gleichen Seite, so dass er versuchen kann, das Problem zu beheben und es erneut zu versuchen. Alle Fehlermeldungen werden in der st-notification-frame div. (Sie brauchen das Formular nicht zu ändern, da submitOnError: false wird automatisch übermittelt) Wenn Sie möchten, dass der Browser des Kunden im Fehlerfall an die in der Formularaktion angegebene URL weitergeleitet wird, können Sie das Formular so aktualisieren, dass es Folgendes enthält submitOnError: true. Hinweis: Bei dieser alternativen Konfiguration wird auf dem Zahlungsformular keine Fehlermeldung angezeigt, bevor der Browser weitergeleitet wird.
	submitOnSuccess	Standardmäßig wird der Browser des Kunden nach erfolgreicher Zahlung an die in der Formularaktion angegebene URL weitergeleitet. (submitOnSuccess: true ist die Standardkonfiguration) Hinweis: Bei dieser Standardkonfiguration wird auf dem Zahlungsformular keine Erfolgsmeldung angezeigt, bevor der Browser weitergeleitet wird. Wenn Sie möchten, dass der Browser des Kunden auf der gleichen Seite bleibt, zeigen Sie eine Erfolgsmeldung in der st-notification-frame div können Sie das Formular so aktualisieren, dass es Folgendes enthält submitOnSuccess: false.
	translations	Sie können die translations Eigenschaft, um einen benutzerdefinierten Wortlaut für den Text festzulegen, der in der st.Components Validierung und Beschriftungen. Sie können es auch verwenden, um Benachrichtigungsmeldungen zu aktualisieren, die im Benachrichtigungscontainer dargestellt werden. `translations:{ 'An error occurred': 'INSERT YOUR CUSTOM PHRASE HERE' }` Für eine vollständige Referenz lesen Sie bitte diesen Artikel.

Wenn Sie eine Fehlermeldung in Ihrer init Antwort erhalten, die der folgenden ähnelt:

{“ErrorNumber”:1010,”Message”:”Invalid Signature. Your request contains an invalid signature.”}

Bitte überprüfen Sie Ihre livestatus Konfiguration korrekt ist, d.h. wenn Sie einen Test verwenden Website-Referenzverwenden, stellen Sie sicher, dass livestatus als 0 eingegeben wird (oder lassen Sie dieses Feld ganz weg), und wenn Sie eine Live-Version von Website-Referenz verwenden, stellen Sie sicher, dass es als 1 eingegeben wird.

Ihr Fortschritt

Mit den obigen Informationen können Sie mit dem Aufbau Ihrer Zahlungslösung beginnen. Als Nächstes empfehlen wir Ihnen zu lernen, wie man ein JSON Web Token (JWT) generiert. Diese werden verwendet, um zu überprüfen, dass die gesendeten Daten während der Zahlungssitzung nicht verändert wurden.

Weiter zu Schritt 2

Weitere Lektüre zu diesem Thema