Wir haben eine neue Version von JavaScript Library eingeführt, die wir als st.js v3 bezeichnen.
Prozessübersicht der Version 3
Was sieht der Kunde während des Bezahlvorgangs?
- Der Kunde stimmt einer Zahlung an Ihrer Kasse zu.
- Wenn der Kunde bei 3-D Secure angemeldet ist, wird im Browser des Kunden ein Overlay angezeigt, in dem er aufgefordert wird, einige grundlegende Aktionen zur Authentifizierung seiner Identität auszuführen.
Zusätzliche Daten über den Zahlungsvorgang und das Gerät des Kunden werden an den Kartenaussteller weitergegeben, so dass risikobasierte Entscheidungen getroffen werden können, ohne dass eine zusätzliche Authentifizierung durch den Kunden erforderlich ist. Der Kunde braucht sich also nicht zu authentifizieren. In diesem Fall wird das Overlay nicht angezeigt und die Autorisierung wird ohne Interaktion verarbeitet.
Im Folgenden wird ein Beispiel für ein Overlay gezeigt, das dem Kunden vor Abschluss einer Zahlung zur Authentifizierung angezeigt werden kann. Das Aussehen des Overlays und die Art der erforderlichen Authentifizierung wird vom Kartenaussteller des Kunden festgelegt. Zum Beispiel:
- Geben Sie einen Code ein, der per SMS an eine Handynummer gesendet wird.
- Biometrische Sicherheit, wie Fingerabdruck-, Gesichts- oder Stimmerkennung.
- Geben Sie eine PIN oder ein Passwort ein.
- Nach der Überprüfung und Authentifizierung durch den Kartenaussteller des Kunden schließt sich das Overlay automatisch, und die Zahlung wird verarbeitet. Anschließend wird dem Kunden an der Kasse eine Erfolgsmeldung angezeigt.
Wenn die Authentifizierung fehlschlägt, zeigt Ihre Kasse eine Fehlermeldung an und bietet dem Kunden die Möglichkeit, eine neue Zahlung mit einer anderen Karte zu versuchen.
Hinter den Kulissen
Zusammenfassung der erforderlichen Entwicklungsänderungen
Die Änderungen, die erforderlich sind, um Ihre Lösung von Version 1 auf Version 3 der JavaScript Library zu aktualisieren, lassen sich wie folgt zusammenfassen:
- Ihr System braucht keine Zahlungsanordnungen mehr zu übermitteln, die den cachetoken über unsere Webservices API.
- Sie müssen sich an unser Support-Team wenden, um einen neuen Benutzer mit der Rolle "Webservices JWT" anzulegen.
- Neu <div> für die Bearbeitung von Antwortmeldungen (d. h. Erfolgs- und Ablehnungsmeldungen).
- Neue Formular-ID für das Zahlungsformular.
- Neu <div> Tags für die Eingabe von Kartendaten in das Formular.
- Neues Markup für die Schaltfläche "Senden" im Formular.
- Ändern Sie den URL-Pfad so, dass die neue Bibliothek von unserer Website aus referenziert wird. CDN
- Die Zahlungsdaten sind in einem signierten JWT (JSON Web Token) enthalten, das von unseren Händlern auf ihrer Serverseite unter Verwendung eines von Trust Payments bereitgestellten gemeinsamen Geheimnisses erzeugt wird. Jegliche nicht autorisierte Änderung des JWT macht die Signatur ungültig und die Anfrage wird von Trust Payments abgelehnt.
Vergleich des Markups für Version 1 und Version 3
Wenn Sie eine einzelne Instanz von st.js v3 erstellen, können Sie die Methode st.Components(), die für die Darstellung des Kartenzahlungsformulars verwendet wird.
Die Konfiguration der Instanz "st" wirkt sich auf den Ablauf der einzelnen Zahlungsarten aus. Zum Beispiel durch die Einstellung submitOnSuccess wahr sein, wird der Kunde zur Formularaktion weitergeleitet url nach Abschluss einer erfolgreichen Kartenzahlung.
Um Sie bei der Migration Ihrer Kartenlösung zu unterstützen, sehen Sie sich bitte die folgenden Beispiele an.
Eine ausführlichere Anleitung zu allen Konfigurationsmöglichkeiten, die unsere st.js v3 Bibliothek bietet, finden Sie in diesem Artikel.
<html>
<head>
<style>
#st-payment input.st-error {
background-color: #ffc6c7;
border: 2px solid #ffb5b5;
}
#st-message .st-error {
background: #ffcdcd;
border: 2px solid #ffb5b5;
padding: 4px 4px 4px 28px !important;
}
</style>
</head>
<body>
<div id="st-message"></div>
<form id="st-payment" action="https://www.example.com">
Pan:
<input type="text" data-st-field="pan" autocomplete="off" /></br>
Expiry Month:
<input type="text" data-st-field="expirymonth" autocomplete="off" /></br>
Expiry Year:
<input type="text" data-st-field="expiryyear" autocomplete="off" /></br>
Security Code:
<input type="text" data-st-field="securitycode" autocomplete="off" /></br>
<input type="submit" name="mybtn" />
</form>
<script src="https://webservices.securetrading.net/js/st.js"></script>
<script>
new SecureTrading.Standard({
sitereference: "test_site12345", locale: "en_gb"
});
</script>
</body>
</html>
<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="<CDN_DOMAIN>"></script>
<script>
(function() {
var st = SecureTrading({
jwt: 'INSERT YOUR JWT HERE',
submitOnSuccess:true,
submitOnError:false,
submitCallback: myCallback,
livestatus: 0 or 1 <!--defaults to 0 (testing) and should be set to 1 when live(production)-->
});
st.Components();
function myCallback(data) { <!--Perform task once payment request is completed -->};
})();
</script>
</body>
</html>
Ersetzen Sie <CDN_DOMAIN> mit einer unterstützten Domäne. Klicken Sie hier für eine vollständige Liste.
Bearbeitung von Nachrichten an den Kunden
Es gibt eine neue <div> für die Bearbeitung von Meldungen an den Kunden (d.h. Fehler- und Erfolgsmeldungen). Sie müssen die unten gezeigte alte Markierung durch die neue Markierung auf der Registerkarte Version 3 ersetzen.
<html>
<body>
<div id="st-message"></div>
</body>
</html>
<html>
<body>
<div id="st-notification-frame"></div>
</body>
</html>
Verweis auf neues Formular id
Sie müssen die alte Formular-ID "st-payment" mit "st-form", wie unten dargestellt.
<html>
<body>
<form id="st-payment" action="https://www.example.com">
</form>
</body>
</html>
<html>
<body>
<form id="st-form" action="https://www.example.com" method="POST">
</form>
</body>
</html>
Sichere Eingabe der Kartendaten
Die <input> Tags im Formular wurden ersetzt durch <div> Tags mit unterschiedlichen IDs für jedes Kartendatenfeld. Ihr Server rendert das Zahlungsformular mit eindeutigen <div> Tags, von denen jeder ein iframe enthält, das von den Servern von Trust Payments gehostet wird und ein anderes Karteneingabefeld enthält. In der Registerkarte "Version 3" müssen Sie die unten gezeigte alte Markierung durch die neue Markierung ersetzen.
<html>
<body>
<form id="st-payment" action="https://www.example.com">
Pan:
<input type="text" data-st-field="pan" autocomplete="off" /></br>
Expiry Month:
<input type="text" data-st-field="expirymonth" autocomplete="off" /></br>
Expiry Year:
<input type="text" data-st-field="expiryyear" autocomplete="off" /></br>
Security Code:
<input type="text" data-st-field="securitycode" autocomplete="off" /></br>
</form>
</body>
</html>
<html>
<body>
<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>
</form>
</body>
</html>
Schaltfläche Bezahlen
Die Schaltfläche "Bezahlen" wird jetzt von einer <button> Tag (anstelle eines <input> Tag). Sie müssen die unten gezeigte alte Markierung durch die neue Markierung auf der Registerkarte Version 3 ersetzen.
<html>
<body>
<form id="st-payment" action="https://www.example.com">
<input type="submit" name="mybtn" />
</form>
</body>
</html>
<html>
<body>
<form id="st-form" action="https://www.example.com" method="POST">
<button type="submit">Pay securely</button>
</form>
</body>
</html>
Verweis auf die neue JavaScript Library
Die Bibliothek der Version 3 hat eine neue URL, auf die man verweisen kann. Die URL hängt von der Plattform ab, auf der Sie Anfragen verarbeiten:
<html>
<body>
<script src="https://webservices.securetrading.net/js/st.js"></script>
</body>
</html>
<html>
<body>
<script src="<CDN_DOMAIN>"></script>
</body>
</html>
Ersetzen Sie <CDN_DOMAIN> mit einer unterstützten Domäne. Klicken Sie hier für eine vollständige Liste.
Wenn Sie Content Delivery Network (CDN) anstelle von webservices verwenden, um aufjs library zu verweisen, beachten Sie bitte, 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 anstelle von localhost ausführen. Nachdem Sie Ihre IPv4-Adresse abgefragt haben, müssen Sie localhost in Ihrem Browser durch die ermittelte IP-Adresse ersetzen.
Umgang mit anderen Daten
Um die Version 3 zu nutzen, müssen Sie bestimmte Daten in einem JWT übermitteln (JSON Web Token).
Die im JWT enthaltenen Daten können von unbefugten Dritten nicht verändert werden.
Klicken Sie hier, um zu erfahren, wie Sie das JWT generieren.
Hier ist ein Beispiel für einen Codeschnipsel, der einen JWT enthält:
<html>
<body>
<script>
new SecureTrading.Standard({
sitereference: "test_site12345", locale: "en_gb"
});
</script>
</body>
</html>
<html>
<body>
<script>
(function() {
var st = SecureTrading({
jwt: 'INSERT YOUR JWT HERE'
});
st.Components();
})();
</script>
</body>
</html>
Optional können Daten, von denen erwartet wird, dass sie vom Kunden an der Kasse geändert werden, nachdem das Formular in seinem Browser gerendert wurde (z. B. die Namen der Rechnungssteller), in das Markup aufgenommen werden, indem <input> Tags, wie im folgenden Beispiel gezeigt.
Das ist wichtig: Um sicherzustellen, dass diese Felder sicher an die Trust Payments -Server gesendet werden, müssen Sie das Attribut data-st-name mit dem Feldnamen, dem die Daten in unserem System zugeordnet sind. Informationen über Felder, die bei der Zahlungsabwicklung übermittelt werden können, finden Sie unter auf dieser Seite.
<html>
<body>
<form id="st-form" action="https://www.example.com" method="POST">
<input type="text" name="title" data-st-field="billingprefixname">Mr</input>
<input type="text" name="forename" data-st-field="billingfirstname">Joe</input>
<input type="text" name="surname" data-st-field="billinglastname">Bloggs</input>
</body>
</html>
<html>
<body>
<form id="st-form" action="https://www.example.com" method="POST">
<input type="text" name="title" data-st-name="billingprefixname">Mr</input>
<input type="text" name="forename" data-st-name="billingfirstname">Joe</input>
<input type="text" name="surname" data-st-name="billinglastname">Bloggs</input>
</body>
</html>
Testen Sie Ihre Lösung
Testen Sie diese Änderungen unbedingt mit einer Testversion von Website-Referenz , bevor Sie Zahlungen im Echtbetrieb abwickeln.
Klicken Sie hier, um Zahlungsanweisungen zu erhalten, mit denen Sie verschiedene Reaktionen unseres Systems simulieren können.
