Wir haben eine neue Version von JavaScript Library eingeführt, die wir als st.js v3 bezeichnen.
Prozessübersicht der Version 3
In diesem Artikel finden Sie Anweisungen für die Migration Ihrer JavaScript-Integration der Version 1 Apple Pay zu einem der von uns unterstützten Abläufe für Version 3. Es gibt zwei Abläufe:
- Standardablauf - Die Bibliothek erfasst das Wallet-Token und sendet es an die Plattform TRU Connect für Autorisierung . Klicken Sie hier, um zum entsprechenden Abschnitt zu gelangen.
- Alternative Strömung - Für Händler, die lieber die Apple wallettoken Daten und senden eine API-Anfrage, um die AUTH selbst zu verarbeiten, die Eigenschaft merchantUrl sollte in der Methodenkonfiguration st.js st.ApplePay eingestellt werden. Klicken Sie hier, um zum entsprechenden Abschnitt zu gelangen.
Standardflussmigration
Zusammenfassung der Änderungen von Version 1 zu Version 3 (Apple Pay)
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:
- Neu <div> für die Bearbeitung von Nachrichten an den Kunden (d.h. Fehler- und Erfolgsmeldungen).
- Neue Formular-ID für das Zahlungsformular.
- Neu <div> Tag, um anzugeben, wo die Schaltfläche Apple Pay gerendert werden soll
- Ä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 gemeinsamen Geheimnisses erstellt wird. Jede nicht autorisierte Änderung des JWT macht die Signatur ungültig und die Anfrage wird von Trust Payments abgelehnt.
- Mit der Einführung von JSON-Web-Tokens ist es für Apple Pay nicht mehr erforderlich, einen Website-Sicherheitshash anzugeben.
Vergleich des Markups für Version 1 und Version 3
Die folgende Dokumentation ist eine Zusammenfassung der Änderungen, die bei der Migration Ihrer Apple Pay -Konfiguration von JavaScript Library Version 1 auf Version 3 eintreten, und Sie können diese für eine grundlegende Einführung nutzen.
Wenn Sie eine einzelne Instanz von st.js v3 erstellen, können Sie die Methode st.ApplePay(), die für die Darstellung der Schaltfläche Apple Pay und die Anzeige des Zahlungsformulars verwendet wird.
<html>
<head>
</head>
<body>
<div id="st-message"></div>
<form id="st-payment" action="https://www.example.com">
<div class="st-applepay-button"></div>
</form>
<script src="https://webservices.securetrading.net/js/st.js"></script>
<script>
new SecureTrading.ApplePay({
sitereference: "test_site12345",
paymentRequest:{
"total":{
"label":"Pay now",
"amount":"2.00"
},
"countryCode":"GB",
"currencyCode":"GBP",
"merchantCapabilities":["supports3DS", "supportsCredit", "supportsDebit"],
requiredBillingContactFields: ["postalAddress"],
requiredShippingContactFields: ["postalAddress", "name", "phone", "email"],
supportedNetworks:["visa", "masterCard"]
},
"merchantId":"your.merchant.id",
"sitesecurity":"gABC123DEFABC"
});
</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-apple-pay"></div>
</form>
<script src="<CDN_DOMAIN>"></script>
<script>
(function() {
var st = SecureTrading({
jwt: 'INSERT YOUR JWT HERE',
submitOnSuccess:true,
submitOnError:false,
submitOnCancel:false, <!--Set true if you want to redirect on ApplePay wallet screen cancellations (3DS ACS cancel is N/A)-->
submitCallback: myCallback,
livestatus: 0 or 1 <!--defaults to 0 (testing) and should be set to 1 when live(production)-->
});
st.ApplePay({
buttonStyle: 'white-outline',
buttonText: 'pay',
merchantId: 'your.merchant.id',
paymentRequest: {
countryCode: 'GB',
currencyCode: 'GBP',
merchantCapabilities: ['supports3DS', 'supportsCredit', 'supportsDebit'],
supportedNetworks: ["visa","masterCard"],
requiredBillingContactFields: ["postalAddress"],
requiredShippingContactFields: ["postalAddress","name", "phone", "email"],
total: {
label: 'Trust Payments Merchant',
amount: '10.00'
}
},
buttonPlacement: 'st-apple-pay'
});
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>
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.
Erstellen und Konfigurieren einer Instanz der Bibliothek
Wenn Sie JavaScript Library Version 3 verwenden, wird von Ihnen erwartet, dass Sie der Instanz der Bibliothek ein JWT (JSON Web Token) zur Verfügung stellen. Das JWT payload enthält die für die Zahlungsabwicklung erforderlichen Felder.
Die im JWT enthaltenen Daten sind vor Änderungen durch unbefugte Dritte geschützt.
Klicken Sie hier, um zu erfahren, wie Sie das JWT erzeugen.
Nachdem Sie eine Instanz von JavaScript Library erstellt haben, können Sie eine Methode ApplePay aufrufen, die die Übergabe einer Konfiguration erfordert, um die Zahlungsschaltfläche und den Zahlungsbogen einzurichten.
Hier ist ein Beispiel für einen Codeschnipsel, der ein JWT in die Instanzkonfiguration einschließt und die Zahlungsmethode ApplePay aufruft.
<html>
<body>
<script>
new SecureTrading.ApplePay({
<APPLE CONFIG>
});
</script>
</body>
</html>
<html>
<body>
<script>
(function() {
var st = SecureTrading({
jwt: 'INSERT YOUR JWT HERE'
});
st.ApplePay({
<APPLE CONFIG>
});
})();
</script>
</body>
</html>
Alternative Flussmigration
Zusammenfassung der Änderungen von Version 1 zu Version 3 (Apple Pay)
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:
- Neu <div> für die Bearbeitung von Nachrichten an den Kunden (d.h. Fehler- und Erfolgsmeldungen).
- Neue Formular-ID für das Zahlungsformular.
- Neu <div> Tag, um anzugeben, wo die Schaltfläche Apple Pay gerendert werden soll
- Ä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 gemeinsamen Geheimnisses erstellt wird. Jede nicht autorisierte Änderung des JWT macht die Signatur ungültig und die Anfrage wird von Trust Payments abgelehnt.
- Mit der Einführung von JSON-Web-Tokens ist es für Apple Pay nicht mehr erforderlich, einen Website-Sicherheitshash anzugeben.
- Der alternative Fluss erfordert eine merchantUrl angegeben werden. st.ApplePay() Konfiguration.
Vergleich des Markups für Version 1 und Version 3
Die folgende Dokumentation ist eine Zusammenfassung der Änderungen, die bei der Migration Ihrer Apple Pay -Konfiguration von JavaScript Library Version 1 auf Version 3 eintreten, und Sie können diese für eine grundlegende Einführung nutzen.
Wenn Sie eine einzelne Instanz von st.js v3 erstellen, können Sie die Methode st.ApplePay(), die für die Darstellung der Schaltfläche Apple Pay verwendet wird.
<html>
<head>
</head>
<body>
<div id="st-message"></div>
<form id="st-payment" action="https://www.example.com">
<div class="st-applepay-button"></div>
</form>
<script src="https://webservices.securetrading.net/js/st.js"></script>
<script>
new SecureTrading.ApplePay({
sitereference: "test_site12345",
paymentRequest:{
"total":{
"label":"Pay now",
"amount":"2.00"
},
"countryCode":"GB",
"currencyCode":"GBP",
"merchantCapabilities":["supports3DS", "supportsCredit", "supportsDebit"],
requiredBillingContactFields: ["postalAddress"],
requiredShippingContactFields: ["postalAddress", "name", "phone", "email"],
supportedNetworks:["visa", "masterCard"]
},
"merchantId":"your.merchant.id",
"sitesecurity":"gABC123DEFABC",
"merchantUrl":"<payment URL endpoint>"
});
</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-apple-pay"></div>
</form>
<script src="<CDN_DOMAIN>"></script>
<script>
(function() {
var st = SecureTrading({
jwt: 'INSERT YOUR JWT HERE',
submitOnSuccess:true,
submitOnError:false,
submitOnCancel:false, <!--Set true if you want to redirect on ApplePay wallet screen cancellations (3DS ACS cancel is N/A)-->
submitCallback: myCallback,
livestatus: 0 or 1 <!--defaults to 0 (testing) and should be set to 1 when live(production)-->
});
st.ApplePay({
buttonStyle: 'white-outline',
buttonText: 'pay',
merchantId: 'your.merchant.id',
paymentRequest: {
countryCode: 'GB',
currencyCode: 'GBP',
merchantCapabilities: ['supports3DS', 'supportsCredit', 'supportsDebit'],
supportedNetworks: ["visa","masterCard"],
requiredBillingContactFields: ["postalAddress"],
requiredShippingContactFields: ["postalAddress","name", "phone", "email"],
total: {
label: 'Trust Payments Merchant',
amount: '10.00'
}
},
buttonPlacement: 'st-apple-pay',
merchantUrl:'<payment URL endpoint>'
});
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>
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.
Erstellen und Konfigurieren einer Instanz der Bibliothek
Wenn Sie JavaScript Library Version 3 verwenden, wird von Ihnen erwartet, dass Sie der Instanz der Bibliothek ein JWT (JSON Web Token) zur Verfügung stellen. Das JWT payload enthält die für die Zahlungsabwicklung erforderlichen Felder.
Die im JWT enthaltenen Daten sind vor Änderungen durch unbefugte Dritte geschützt.
Klicken Sie hier, um zu erfahren, wie Sie das JWT erzeugen.
Hier ist ein Beispiel für einen Codeschnipsel, der einen JWT enthält:
<html>
<body>
<script>
new SecureTrading.ApplePay({
<APPLE CONFIG>
});
</script>
</body>
</html>
<html>
<body>
<script>
(function() {
var st = SecureTrading({
jwt: 'INSERT YOUR JWT HERE'
});
st.ApplePay({
<APPLE CONFIG>
});
})();
</script>
</body>
</html>