Konfigurieren Sie die Lösung Apple Pay für JavaScript Library

  Zuletzt aktualisiert: 

 

Vergewissern Sie sich, dass Sie alle Anforderungen erfüllt haben, bevor Sie fortfahren.
Klicken Sie hier für weitere Informationen.

Standard-Prozessablauf

  1. Wenn der Kunde auf die Schaltfläche Apple Pay drückt, wird ihm das Zahlungsformular Apple Pay angezeigt.
  2. Wenn der Kunde der Zahlung zustimmt, wird eine AUTH Anfrage an Trust Payments gesendet.
  3. Trust Payments kontaktiert die akquirierende Bank, um Autorisierung für die Transaktion anzufordern.

 

Aktualisieren Sie Ihr server-seitiges Zahlungsformular

Konfigurieren Sie Ihr JWT

  Über das JWT

JSON Web Tokens (JWT) sind eine offene, dem Industriestandard RFC 7519 entsprechende Methode zur sicheren Übertragung von Daten zwischen zwei Parteien. Es schützt vor der Änderung kritischer Transaktionsdaten (z. B. des abzubuchenden Betrags) durch Unbefugte während der Zahlungssitzung.

Aus diesem Grund ist dieses Feld erforderlich, um Zahlungen mit Trust Payments abzuwickeln.

Klicken Sie hier, um zu erfahren, wie Sie den JWT generieren können.

Je nach Ihrer bevorzugten Konfiguration müssen Sie möglicherweise ein zusätzliches Feld in die payload aufnehmen, wenn Sie das JWT für Ihr Kassenformular generieren.

Um dem Kunden die Möglichkeit zu geben, eine in seinem Apple-Konto gespeicherte Rechnungs- oder Lieferadresse aus dem Zahlungsformular auszuwählen (anstelle einer an der Kasse eingegebenen Adresse), müssen Sie die optionalen Felder billingcontactdetailsoverride bzw. customercontactdetailsoverride mit dem Wert "1" einfügen.

Andernfalls muss der JWT nicht geändert werden, um Apple Pay Transaktionen zu verarbeiten.

 

Apple Pay Bibliothek

Wenn der Kunde auf die Schaltfläche Apple Pay tippt, kontaktiert unser st.js Apple, um den Zahlungsvorgang einzuleiten und das Zahlungsformular anzuzeigen. Um dieses Verhalten zu aktivieren, müssen Sie auf die Bibliothek Apple Pay verweisen, indem Sie zusätzliches Markup in Ihr Zahlungsformular einfügen, wie in den folgenden Registerkarten gezeigt.

Zunächst müssen Sie einen div-Platzhalter in das Zahlungsformular einfügen, etwa so:

<div id="st-apple-pay"></div>

Dann müssen Sie Ihr Javascript aktualisieren, um auch unsere Apple Pay Bibliothek aufzurufen:

st.ApplePay({
buttonStyle: 'white-outline',
buttonText: 'plain',
merchantId: 'your.merchant.id',
paymentRequest: {
countryCode: 'US',
currencyCode: 'USD',
merchantCapabilities: ['supports3DS', 'supportsCredit', 'supportsDebit'],
supportedNetworks: ["visa","masterCard","amex"],
requiredBillingContactFields: ["postalAddress"],
requiredShippingContactFields: ["postalAddress","name", "phone", "email"],
total: {
label: 'Trust Payments Merchant',
amount: '10.00'
}
},
buttonPlacement: 'st-apple-pay'
});

Im obigen Beispiel ist die Schaltfläche Apple Pay so konfiguriert, dass eine Transaktion über 10,00 $ mit einer Kredit- oder Debitkarte durchgeführt wird. Darüber hinaus werden die erforderlichen Felder für die Rechnungsstellung und die Lieferung angegeben. Bei dieser Transaktion muss der Kunde diese Details angeben, um die Zahlung abzuschließen. Erforderliche Felder können nach Ihren Wünschen angepasst oder ganz entfernt werden, wenn sie nicht benötigt werden.

Ihr fertiges Markup sieht wie folgt aus:

<html>
<head>
</head>
<body>
<div id="st-notification-frame"></div>
<form id="st-form" action="https://www.example.com"/>
<div id="st-apple-pay"></div>
<script src="<CDN_DOMAIN>"></script>
<script>
(function() {
var st = SecureTrading({
jwt: 'INSERT YOUR JWT HERE',
});
st.ApplePay({
buttonStyle: 'white-outline',
buttonText: 'plain',
merchantId: 'your.merchant.id',
paymentRequest: {
countryCode: 'US',
currencyCode: 'USD',
merchantCapabilities: ['supports3DS', 'supportsCredit', 'supportsDebit'],
supportedNetworks: ["visa","masterCard","amex"],
requiredBillingContactFields: ["postalAddress"],
requiredShippingContactFields: ["postalAddress","name", "phone", "email"],
total: {
label: 'Trust Payments Merchant',
amount: '10.00'
}
},
buttonPlacement: 'st-apple-pay'
});
})();
</script>
</body>
</html>

Ersetzen Sie <CDN_DOMAIN> mit einer unterstützten Domäne. Klicken Sie hier für eine vollständige Liste.

 

Feldspezifikation

Tastenfelder

  Feld Format Beschreibung
X1-EN.png buttonStyle Alphanumerisch Wird verwendet, um das Aussehen der Schaltfläche Apple Pay zu ändern.
Klicken Sie hier für weitere Informationen (Link zu externer Seite).
X1-EN.png buttonText Alphanumerisch Wird verwendet, um den Text zu ändern, der auf der Schaltfläche Apple Pay erscheint.
Klicken Sie hier für weitere Informationen (Link zu externer Seite).
X2-EN.png buttonPlacement Alphanumerisch

Standardmäßig sucht die Bibliothek nach einem div id genannt. "st-apple-pay" um zu bestimmen, wo die Schaltfläche Apple Pay auf dem Formular platziert werden soll.

Wenn Sie nicht die Standardeinstellungen verwenden div id, müssen Sie Ihre benutzerdefinierte Kennung als Wert für das Feld buttonPlacement Eigenschaft. z.B.

buttonPlacement: 'apple-button'

  Dev note: Eigentum placement ist veraltet und wird nicht mehr unterstützt. Bitte verwenden Sie den Ersatz buttonPlacement Eigenschaft.

  Nützliche Informationen über die Schaltfläche Apple Pay

Sie können die Farbe der Schaltfläche und den angezeigten Text ändern, um sie besser an die Bedürfnisse Ihrer Kasse anzupassen.
Klicken Sie hier, um mehr zu erfahren (Link zu externer Seite).

Apple hat Richtlinien veröffentlicht, wie Sie die Schaltfläche Apple Pay auf Ihrer Kasse am besten positionieren.
Klicken Sie hier, um mehr zu erfahren (Link zu externer Seite).

st.ApplePay({
buttonStyle: 'white-outline',
buttonText: 'plain',
buttonPlacement: 'st-apple-pay'
});

 

Felder des Händlers

  Feld Format Beschreibung
X1-EN.png merchantId Alphanumerisch einschließlich Symbole (26) Sie müssen Ihre Apple Pay Merchant ID angeben.
X1-EN.png paymentRequest Objekt Dieses Objekt enthält Informationen über die Zahlung, die in der ersten Anfrage an Apple gesendet werden (unser Javascript sendet dies).
X1-EN.png   countryCode Alpha (2) Der Ländercode des Händlers im ISO2a-Format.
X1-EN.png   merchantCapabilities Liste Die vom Händler unterstützten Zahlungsmöglichkeiten. Das Feld muss enthalten “supports3DS” (um die Überprüfung von Touch ID / Face ID zu ermöglichen), und mindestens einen der folgenden zusätzlichen Werte:
  • “supportsCredit” - Um Kreditkartenzahlungen zu ermöglichen.
  • “supportsDebit” - Um Debitkartenzahlungen zu ermöglichen.
Eine vollständige Spezifikation finden Sie unter Apples eigene Dokumentation (Link zu externer Seite).
X1-EN.png   supportedNetworks Liste Die vom Händler unterstützten Zahlungsnetze. Der Wert muss einer oder mehrere der folgenden sein: "amex", "masterCard" oder "visa".
X3-EN.png   supportedCountries Array von Zeichenketten

Eine Liste von zweistelligen Ländercodes, die Sie angeben (im ISO2a-Format). Apple Pay Transaktionen sind auf Karten beschränkt, die in den in dieser Eigenschaft aufgeführten Ländern ausgestellt wurden.

Die supportedCountries Liste hat keinen Einfluss auf die für die Transaktion verwendete Währung und gilt für alle Zahlungskarten in der Brieftasche.

st.ApplePay({
merchantId: 'your.merchant.id',
paymentRequest: {
countryCode: 'US',
merchantCapabilities: ['supports3DS', 'supportsCredit', 'supportsDebit'],
supportedNetworks: ["visa","masterCard","amex"],
},
});

 

Felder der Transaktion

  Feld Format Beschreibung
X1-EN.png paymentRequest Objekt Dieses Objekt enthält Informationen über die Zahlung, die in der ersten Anfrage an Apple gesendet werden (unser Javascript sendet dies).
X2-EN.png   requiredBillingContactFields Liste Auf dem Zahlungsformular wird dieses Feld verwendet, um den Kunden aufzufordern, seine bevorzugten Rechnungsadressdaten aus seinem Apple Pay Konto vor dem Kauf auszuwählen. Auf dem Zahlungsformular werden KEINE Rechnungsadressdaten angezeigt, die von Ihrer Kasse aus gebucht wurden. Sie können die folgenden Feldwerte eingeben:
  • “postalAddress”

Dies ist erforderlich, wenn der Kunde den Kauf unter Verwendung der in seinem Apple Pay Konto gespeicherten Rechnungsadressfelder abschließen soll.

X2-EN.png   requiredShippingContactFields Liste Auf dem Zahlungsformular wird dieses Feld verwendet, um den Kunden aufzufordern, seine bevorzugten Lieferadressdaten aus seinem Apple Pay Konto vor dem Kauf auszuwählen. Auf dem Bezahlungsformular werden KEINE Details zur Lieferadresse angezeigt, die an der Kasse eingegeben wurden. Sie können die folgenden Feldwerte eingeben:
  • “postalAddress”
  • “name”
  • “phone”
  • “email”

Dies ist erforderlich, wenn der Kunde den Kauf unter Verwendung der in seinem Apple Pay -Konto gespeicherten Lieferadressfelder abschließen soll.

X1-EN.png   currencyCode Alpha (3) Der Code der Transaktion Währung im ISO3a-Format.
X1-EN.png   total K.A. Ein Einzelposten, der den Gesamtbetrag der Zahlung darstellt.
X1-EN.png     amount Numerisch mit Nachkommastelle (14) Der Betrag der Transaktion in Haupteinheiten, wobei ein Dezimalpunkt zur Kennzeichnung von Dezimalwerten verwendet wird, so dass €10 als 10.00 zurückgegeben wird. Dies muss derselbe Betrag sein, der im Rahmen der payload des JWT. Es ist von entscheidender Bedeutung, dass der im JWT angegebene Betrag korrekt ist, da dies der Wert ist, der den Betrag bestimmt, mit dem der Kunde belastet wird.
X1-EN.png     label Alphanumerisch einschließlich Symbole Dies ist ein Kommentar, der auf dem Zahlungsformular Apple Pay neben dem Gesamtbetrag angezeigt wird, bevor der Kunde der Zahlung zustimmt.
st.ApplePay({
paymentRequest: {
currencyCode: 'USD',
requiredBillingContactFields: ["postalAddress"],
requiredShippingContactFields: ["postalAddress","name", "phone", "email"],
total: {
label: 'Trust Payments Merchant',
amount: '10.00'
}
},
});

 

Verständnis des Zahlungsformulars

Vor dem Abschluss des Kaufs wird dem Kunden das Zahlungsformular angezeigt. Hier werden dem Kunden die zuvor auf seinem Konto gespeicherten Karten, die Lieferoptionen, die Kontaktinformationen und der gesamte Kaufbetrag (einschließlich Steuern und Gebühren) angezeigt. Der Kunde kann die Bestellung überprüfen und optional Anpassungen vornehmen, bevor er fortfährt.

Karte

Der Kunde kann aus den Karten auswählen, die in seinem   Apple Wallet (Link zu externer Seite).
Die für die Zahlung unterstützten Karten sind abhängig von der merchantCapabilities Feld auf der Kasse gebucht.
z.B. Wenn “supportsDebit” nicht in das Feld eingetragen ist, kann der Kunde seine Zahlung nicht mit einer Debitkarte abschließen.

Adresse

Die Rechnungs- und Lieferadresse wird auf dem Zahlungsformular nur angezeigt, wenn die Felder requiredBillingContactFields und requiredShippingContactFields mit gültigen Werten übermittelt worden sind. So kann der Kunde aus den in seinem Apple-Konto gespeicherten Rechnungs- und/oder Lieferadressen auswählen.

Die auf dem Zahlungsformular ausgewählte Adresse wird nur dann in die Anfrage AUTH aufgenommen, wenn die Felder billingcontactdetailsoverride und customercontactdetailsoverride eingereicht wurden, mit dem Wert "1".

CJ16-EN.png

Etikett und Menge

Die mainamount Wert wird auf dem Zahlungsverkehrsblatt angezeigt, neben dem label, an der Kasse gebucht. In dem Beispiel hier, die label wurde mit dem Wert “Outstanding balance”.

CJ17-EN.png

Authentifizierung

Die Authentifizierungsmethode unterscheidet sich je nach dem Gerät, das zum Abschluss der Zahlung verwendet wird. Der Kunde kann aufgefordert werden, seinen Finger auf den Touch ID-Sensor zu legen oder auf den Face ID-Sensor zu schauen.
 Klicken Sie hier für weitere Informationen zur Apple Pay-Authentifizierung (Link zu externer Seite).

 

Abschluss der Zahlung

Nachdem der Kunde das Formular an die Datenbank übermittelt hat “st.js”, wird die Authentifizierung durchgeführt, gefolgt von der Zahlung. Die Antwort wird in Form eines neuen JWTs direkt an Ihren Webserver gesendet. Wenn die Zahlung erfolgreich war, wird der Browser des Kunden zu der in dem Formular angegebenen URL umgeleitet action Attribut.

Das Zahlungsformular Apple Pay wird aktualisiert und zeigt je nach Ergebnis der Zahlung entweder eine Erfolgs- oder eine Fehlermeldung an. Im Erfolgsfall wird das Zahlungsformular geschlossen, um anzuzeigen, dass die Zahlung abgeschlossen ist.

CJ18-EN.png

 

MyST

Wie bei regulären Kartenzahlungen können die Aufzeichnungen aller AUTH Transaktionen, die über Apple Pay abgewickelt wurden, in MyST eingesehen werden. Bei der Anzeige von Apple Pay Transaktionen in MyST wird die "Quelle der Brieftasche" wie folgt angezeigt “APPLEPAY”. Klicken Sie hier, um unsere MyST-Dokumentation anzusehen.

CJ19-EN.png

 

Prüfung

Ihr Test Website-Referenz wird mit der Apple Pay Test-Sandbox verbunden. Um Zahlungen über Ihren Test Website-Referenz zu verarbeiten, müssen Sie daher die Details der Testkarte zur Apple Wallet auf Ihren unterstützten Geräten hinzufügen.

Sie müssen die von Apple bereitgestellten Testkartendaten verwenden. Bitte besuchen Sie die folgende URL:
https://developer.apple.com/support/apple-pay-sandbox/ (Link zu externer Seite)

Die obigen Angaben setzen voraus, dass Sie auf Ihrem Gerät mit einem Apple-Sandbox-Konto angemeldet sind.

  Bitte beachten Sie, dass die Testkartendaten, die wir in unserer Testdokumentation angeben, nicht für die Abwicklung von Apple Pay Testtransaktionen verwendet werden können.

Wenn Sie benutzerdefinierte Regeln (UDR) auf Website-Referenz aktiviert haben, müssen Sie sicherstellen, dass Sie verstehen, wie sich diese auf Ihre Apple Pay-Transaktionen auswirken können.
Wenn Sie Hilfe benötigen, wenden Sie sich bitte an unser Support-Team.

 

Alternativer Prozessablauf

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 Datei st.js st.ApplePay Methode config.

  1. Wenn der Kunde auf die Schaltfläche Apple Pay drückt, wird ihm das Zahlungsformular Apple Pay angezeigt.
  2. Der Kunde genehmigt die Zahlung mit Touch ID, Face ID oder seinem Passcode.
  3. merchantUrl erhält eine Anfrage von JavaScript mit den Details der Brieftasche.
  4. Eine AUTH Anfrage wird von der merchantUrl auf Trust Payments unter Verwendung unserer Webservices API.
  5. Sobald das Zahlungsergebnis von Trust Payments an die merchantUrl, sollte eine JWT-Antwort an die Websitejs library zurückgeschickt werden, um das Apple Payment Sheet zu aktualisieren.

Zunächst fügen wir die merchantUrl Eigenschaft zum ApplePay Methode config:

st.ApplePay({
  buttonStyle: 'white-outline',
  buttonText: 'plain',
  merchantId: 'your.merchant.id',
  paymentRequest: {
    countryCode: 'US',
    currencyCode: 'USD',
    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>'
});

Nachfolgend ein Beispiel für eine Anfrage, die von JavaScript an merchantUrl sobald der Kunde die Transaktion mit Touch ID, Face ID oder einem Passcode authentifiziert hat:

{​​​​​​​​​​​​​​
"request": [
{​​​​​​​​​​​​​​
"walletsource": "APPLEPAY",
"wallettoken": "<json encoded string>",
}​​​​​​​​​​​​​​
],
"jwt": "<jwt token>",
"acceptcustomeroutput": "2.00",
"version": "1.00",
"versioninfo": "STJS::N/A::3.2.0::N/A"
}​​​​​​​​​​​​​​

An dieser Stelle wird davon ausgegangen, dass die merchantUrl wird eine API-Anfrage an Trust Payments stellen, um die Autorisierung zu verarbeiten.

Ein Beispiel für das Senden von AUTH mit unserer webservices API finden Sie im Abschnitt "AUTH request" in diesem Artikel.

Die merchantUrl response to the st.js should be a JWT response. You will need to parse the AUTH response and include the returned fields in the payload of the response <JWT Token>, as shown below.

{
  jwt:<JWT Token>
}

Die payload der JWT token sollte mit dem folgenden Objekt verschlüsselt werden:

{​​​​​​​​​​​​​​'version': '1.00',
'response': [{
'walletsource': 'APPLEPAY',
'errormessage': 'Ok',
'sitereference': '<test or live sitereference>',
'errorcode': '0',
'requesttypedescription': 'AUTH'
}​​​​​​​​​​​​​​]
}​​​​​​​​​​​​​​
War dieser Artikel hilfreich?
0 von 0 Personen fanden dies hilfreich