Erste Schritte mit Google Pay für JavaScript Library

Trust Payments hostet eine öffentlich zugängliche JavaScript Library , die Sie in Ihre Kasse einbetten können, damit Ihre Web-App-Lösung Zahlungen mit Google Pay akzeptieren kann.

Um mit der Integration zu beginnen, müssen Sie die folgenden Angaben von unserem Support-Team bestätigen/anfordern:

Vergewissern Sie sich, dass Ihre erwerbende Bank Google Pay als Zahlungsoption unterstützt.
Beantragen Sie einen Test- und einen Live-Account Website-Referenz, wobei Google Pay als aktivierte Funktion hinzugefügt wird, und aktivieren Sie 3-D Secure sowohl für Test- als auch für Live-Accounts.
Fordern Sie einen JWT-Benutzernamen und einen geheimen Schlüssel an, der mit Ihrem Test verknüpft ist Website-Referenz.

Richten Sie Ihr Google-Konto für Tests ein

Um mit dem Testen von Google Pay in einer Testumgebung zu beginnen, benötigen Sie ein Google-Konto und müssen einer von Google bereitgestellten Gruppe beitreten, die es Ihnen ermöglicht, eine Reihe von API-Testkarten zum Testen Ihrer Google Pay -Lösung zu verwenden.

Klicken Sie hier, um weitere Informationen über das von Google bereitgestellte Testkartenpaket zu erhalten (Link zu externer Seite).

Sobald Sie ein Google-Konto registriert haben, melden Sie sich in Ihrem Browser bei dem Konto an und navigieren Sie zur folgenden Seite:
https://groups.google.com/g/googlepay-test-mode-stub-data
Klicken Sie dann auf "Gruppe beitreten".
Sobald Sie Ihre Einstellungen vorgenommen haben, klicken Sie auf "Gruppe beitreten".
Es wird eine Seite angezeigt, die bestätigt, dass Sie Zugriff auf die Google-Testsuite erhalten haben:
Um sicherzustellen, dass dies funktioniert, stellt Google eine Demoseite zur Verfügung, auf der Sie auf eine Schaltfläche Google Pay klicken können, um das Zahlungsformular anzuzeigen.
Klicken Sie hier, um die Seite in einem neuen Tab zu öffnen (Link zu externer Seite).

Wenn alles wie erwartet funktioniert, sollten Sie eine der Beispiel-Zahlungsarten auswählen und auf "WEITER" klicken können. Damit wird eine Testzahlung durchgeführt.

Konfigurieren Sie Ihre Zahlungskasse

Vergewissern Sie sich, dass Sie alle oben genannten Schritte ausgeführt haben, bevor Sie fortfahren.

Fügen Sie einen Link zu unserer v3 JS library in Ihre Webseite ein. <script src=<DOMAIN>/js/v3/st.js></script>
Für <DOMAIN>finden Sie Informationen unter der Überschrift JavaScript Library / Webservices API auf diese Seite.
Damit die Schaltfläche Google Pay bei der Initialisierung auf dem Bildschirm erscheint, müssen Sie in Ihrem HTML-Quelltext ein div mit einer id einfügen, die in den folgenden Schritten dieser Anleitung konfiguriert wird <div id="st-google-pay"></div>
Für die Websitejs library benötigen Sie ein Formular mit den folgenden Angaben <form id="st-form"/> - Der Name der id kann durch Setzen der Eigenschaft stform im SecureTrading Konfiguration.
Der Benachrichtigungsrahmen ist ein optionales Div, das Ihrer Seite hinzugefügt werden kann, um dem Kunden bei Abschluss der Zahlung eine Erfolgs-, Fehler- oder Abbruchmeldung anzuzeigen. Wenn Sie die Benachrichtigung für nützlich halten, können Sie den Text ändern. Dies kann mit der Option translations Eigenschaft, die in der SecureTrading Konfiguration. Klicken Sie hier, um mehr zu erfahren.

<html>
  <head>
  </head>
  <body>
    <div id="st-notification-frame"></div>
    <form id="st-form" action="https://www.example.com"/>
    <div id="st-google-pay"></div>
    <script src="<CDN_DOMAIN>"></script>
    <script> 
      (function() {
        var st = SecureTrading({  
          <! -- st.js configuration -->       
        });  
        st.GooglePay({
          <! -- Google Pay configuration -->
        });
      })(); 
    </script>
  </body>
</html>

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

Initialisieren Sie st.js library

Bei der Initialisierung der Websitejs library müssen Sie die Eigenschaft jwt, mit einem JSON-Web-Token, das auf Ihrer Serverseite generiert wird.

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.

Wenn Sie noch keinen JWT-Benutzernamen und geheimen Schlüssel erhalten haben, wie im Abschnitt "Erste Schritte" beschrieben, setzen Sie sich bitte mit unserem Support-Team in Verbindung.

<html>
  <head>
  </head>
  <body>
    <div id="st-notification-frame"></div>
    <form id="st-form" action="https://www.example.com"/>
    <div id="st-google-pay"></div>
    <script src="<CDN_DOMAIN>"></script>
    <script> 
      (function() {
        var st = SecureTrading({  
          jwt : 'INSERT YOUR JWT HERE'      
        });  
        st.GooglePay({
          <! -- Google Pay configuration -->
        });
      })(); 
    </script>
  </body>
</html>

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

Konfigurieren der JSON Web Token (JWT)

Sie müssen sich auf unsere Anleitung JSON Web Token beziehen, um den erforderlichen Inhalt für den JWT zu bestätigen.

Klicken Sie hier, um Informationen in einer neuen Registerkarte zu öffnen

Initialisieren Google Pay

Das folgende Beispiel zeigt eine Grundkonfiguration von Google Pay , die die erforderlichen Felder enthält.

Das unten stehende Beispiel enthält zwar alles, was Sie für den Anfang brauchen, aber Sie können die Google Pay Kasse mit optionalen Feldern besser an Ihre Bedürfnisse anpassen. Eine vollständige Liste der von Google Pay bereitgestellten Eigenschaften finden Sie in der API-Dokumentation:

st.GooglePay({
  "buttonOptions": {
    "buttonRootNode": "st-google-pay"
  },
  "paymentRequest": {
    "allowedPaymentMethods": [{
      "parameters": {
        "allowedAuthMethods": ["PAN_ONLY", "CRYPTOGRAM_3DS"],
        "allowedCardNetworks": ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"]
      },
      "tokenizationSpecification": {
        "parameters": {
          "gateway": "trustpayments",
          "gatewayMerchantId": "test_site12345"
        },
        "type": "PAYMENT_GATEWAY"
      },
      "type": "CARD"
    }],
    "environment":"TEST",
    "apiVersion": 2,
    "apiVersionMinor": 0,
    "merchantInfo": {
      "merchantId": "<e.g. 1234567890>"
    },
    "transactionInfo": {
      "countryCode": "US",
      "currencyCode": "USD",
      "checkoutOption": "COMPLETE_IMMEDIATE_PURCHASE",
      "totalPriceStatus": "FINAL",
      "totalPrice": "10.00",
      "totalPriceLabel": "Total",
      "displayItems": [{
        "label": "Example item",
        "price": "10.00",
        "type": "LINE_ITEM",
        "status": "FINAL"
      }]
    }
  }
});

Nachfolgend finden Sie zusätzliche Überlegungen, die speziell für Ihr Trust Payments Konto gelten:

Eigentum	Format	Beschreibung
allowedCardNetworks	Liste	Die unterstützten Werte für diese Eigenschaft hängen von den Zahlungsmethoden ab, die auf Ihrem Trust Payments Konto unterstützt werden. Bitte wenden Sie sich zur Bestätigung an unser Support-Team.
gatewayMerchantId	Zeichenfolge	Die Trust Payments Website-Referenz , die in der Google Pay Manager-Instanz konfiguriert ist, fungiert als Ihre Gateway-Händler-ID. Wenn Sie bereit sind, in die PRODUKTIONSUMGEBUNG zu wechseln, wird die gatewayMerchantId muss auf Ihre Live-Seite Website-Referenz eingestellt werden.
gateway	Zeichenfolge	In Ihrer Konfiguration setzen Sie bitte die Eigenschaft mit dem Wert “trustpayments”.

Bearbeitung einer Zahlung

Nachdem Sie die oben genannten Schritte durchgeführt haben, sollte der Aufbau Ihrer Kassenseite dem folgenden Beispiel entsprechen, so dass Sie eine Google Pay Zahlung in der TEST-Umgebung durchführen können.

<html>
  <head>
  </head>
  <body>
    <div id="st-notification-frame"></div>
    <form id="st-form" action="https://www.example.com"/>
    <div id="st-google-pay"></div>
    <script src="<CDN_DOMAIN>"></script>
    <script> 
      (function() {
        var st = SecureTrading({  
          jwt: 'INSERT YOUR JWT HERE',          
        });  
        st.GooglePay({
          "buttonOptions": {
            "buttonRootNode": "st-google-pay"
          },
          "paymentRequest": {
            "allowedPaymentMethods": [{
              "parameters": {
                "allowedAuthMethods": ["PAN_ONLY", "CRYPTOGRAM_3DS"],
                "allowedCardNetworks": ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"]
              },
              "tokenizationSpecification": {
                "parameters": {
                  "gateway": "trustpayments",
                  "gatewayMerchantId": "test_site12345"
                },
                "type": "PAYMENT_GATEWAY"
              },
              "type": "CARD"
            }],
            "environment":"TEST",
            "apiVersion": 2,
            "apiVersionMinor": 0,
            "merchantInfo": {
              "merchantId": "<e.g. 1234567890>"
            },
            "transactionInfo": {
              "countryCode": "US",
              "currencyCode": "USD",
              "checkoutOption": "COMPLETE_IMMEDIATE_PURCHASE",
              "totalPriceStatus": "FINAL",
              "totalPrice": "10.00",
              "totalPriceLabel": "Total",
              "displayItems": [{
                "label": "Example item",
                "price": "10.00",
                "type": "LINE_ITEM",
                "status": "FINAL"
              }]
            }
          }
        });
      })(); 
    </script>
  </body>
</html>

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

Dynamische Preisaktualisierungen

Optional können Sie auch dynamisch arbeiten:

Aktualisieren Sie die Transaktionsinformationen auf dem Zahlungsformular auf der Grundlage der von Ihrem Kunden gewählten Versandoption.
Aktualisieren Sie die Versandoptionen und Transaktionsinformationen auf dem Zahlungsformular auf der Grundlage der vom Kunden gewählten Versandadresse.

Um mit der dynamischen Preisaktualisierung zu beginnen, müssen Sie die Konfiguration ändern, die an die Methode st.js GooglePay übergeben wird:

Konfigurieren der callbackIntents.
Abonnieren von onPaymentDataChanged Callback, um das Zahlungsformular zu aktualisieren, wenn der Kunde seine Versandadresse oder Versandoption ändert.
Abonnieren von onPaymentAuthorized Rückruf, um sicherzustellen, dass der autorisierte Betrag mit dem Betrag übereinstimmt, der auf dem Zahlungsformular Google Pay angezeigt und vereinbart wurde.

Eigentum	Format	Beschreibung
callbackIntents	String[]	SHIPPING_ADDRESS - Erhalten Sie einen Rückruf, wenn der Kunde die Lieferadresse im Zahlungsformular ändert. SHIPPING_OPTION - Erhalten Sie einen Rückruf, wenn der Kunde die Versandoption im Zahlungsformular ändert. PAYMENT_AUTHORIZATION - Sie erhalten einen Rückruf, sobald der Kunde auf "Bezahlen" klickt. OFFER - Sie erhalten einen Rückruf, sobald der Kunde versucht, einen Aktionscode anzuwenden. Die PAYMENT_AUTHORIZATION muss enthalten sein, wenn SHIPPING_ADDRESS oder SHIPPING_OPTION in der Liste der Absichten enthalten ist.
shippingOptionRequired	Boolesche	Muss eingestellt werden auf true wenn SHIPPING_OPTION wird in der Datei callbackIntents.
shippingAddressRequired	Boolesche	Muss eingestellt werden auf true wenn SHIPPING_ADDRESS wird in der Datei callbackIntents.
onPaymentDataChanged	Funktion	Die onPaymentDataChanged Callback wird aufgerufen, wenn: callbackIntents enthält SHIPPING_ADDRESS und der Kunde seine Adresse ändert. callbackIntents enthält SHIPPING_OPTION und der Kunde ändert seine Versandoption. callbackIntents enthält SHIPPING_ADDRESS und/oder SHIPPING_OPTION wenn dem Kunden zum ersten Mal der Zahlschein vorgelegt wird. callbackIntents enthält OFFER und der Kunde wendet einen Aktionscode auf dem Zahlschein an. Bei der Initialisierung des Zahlungsverzeichnisses. onPaymentDataChanged gibt ein Objekt namens intermediatePaymentData. Die intermediatePaymentData Objekt umfasst welche Adresse und Versandart der Kunde gewählt hat. Bitte beachten: Bei der Initialisierung des Zahlungsverzeichnisses wird die INITIALIZE Absicht wird automatisch in der intermediatePaymentData Dies ermöglicht es Ihnen, die Lieferadresse des Kunden und die verfügbaren Versandoptionen sofort zu überprüfen und das Blatt bei Bedarf zu aktualisieren. Lösen Sie auf. onPaymentDataChanged mit einem Objekt ( PaymentDataRequestUpdate (externer Link)) die die neuen Transaktionsinformationen enthält, die dem Kunden auf dem Zahlungsformular Google Pay angezeigt werden sollen. Ein Beispiel für einen Anwendungsfall ist, wenn der Kunde eine Expressversandoption auswählt und der Gesamtbetrag auf dem Zahlungsformular aktualisiert werden muss, um diese Wahl widerzuspiegeln. Wenn ein Fehler auftritt, wird die PaymentDataRequestUpdate (externer Link) Objekt kann mit einer Fehlereigenschaft konfiguriert werden, die es Ihnen ermöglicht, den Kunden über den Fehlergrund auf dem Zahlungsformular zu benachrichtigen, z.B. wenn die Lieferadresse des Kunden nicht zustellbar ist oder der angewandte Aktionscode abgelaufen ist. `error: { reason: "OFFER INVALID", message: "Promotional code has expired.", intent: "OFFER" }` Bitte beachten Sie Dokumentation von Google (externer Link) für alle Aktualisierungseigenschaften, die zu den PaymentDataRequestUpdate -Objekt aufgenommen werden können. Ein vollständiges Referenzhandbuch für die onPaymentDataChanged Rückruf, lesen Sie bitte die Google-Dokumentation (externer Link).
onPaymentAuthorized	Funktion	Wenn callbackIntents enthält PAYMENT_AUTHORIZATION und der Kunde auf Google Pay auf "Bezahlen" klickt, wird die onPaymentAuthorized Callback wird aufgerufen und Sie müssen ein Versprechen zurückgeben, das erfolgreich aufgelöst und das Zahlungsformular geschlossen wird oder mit einem Fehler aufgelöst wird und eine Fehlermeldung auf dem Zahlungsformular anzeigt. Die transactionState muss sein "SUCCESS" oder "ERROR": SUCCESS Erstellen Sie eine neue JWT auf Ihrem Server, um den Endbetrag, den der Kunde zu zahlen bereit ist, in den Zahlungsbeleg aufzunehmen. Aktualisieren Sie das JWT durch Aufrufen der updateJWT Funktion auf der SecureTrading Instanz. ERROR Wenn bei der Erstellung oder Aktualisierung des JWT ein Fehler auftritt, stellen Sie sicher, dass Sie diesen mit einem "ERROR", um sicherzustellen, dass nur der richtige Betrag genehmigt wird. Die "error" mit der Eigenschaft "message" ist optional, wird aber empfohlen. function onPaymentAuthorized(paymentData) { return new Promise(function(resolve, reject){ /Generate a newJWT with the final amount to pay final amount must match the displayed amount on the payment sheet call st.updateJWT(newJWT) to ensure the correct amount is authorised resolve with SUCCESS to trigger a closure of the payment sheet and for the payment authorisation to proceed/ resolve({transactionState: 'SUCCESS'}); /If an issue occurs when updating the JWT return an error to the payment sheet to notify the customer/ resolve({ transactionState: 'ERROR', error: { message: 'An error occurred, please try again.' } }); }); }

Die Callback-Implementierungen für onPaymentDataChanged (externer Link) und onPaymentAuthorized (externer Link) stehen im Einklang mit den von Google festgelegten Verträgen, wie in der offiziellen Dokumentation beschrieben. Obwohl die technischen Aspekte dieser Rückrufe konsistent sind, berücksichtigt die Anleitung von Google keine benutzerdefinierten Integrationen über Gateways von Drittanbietern. Bitte beachten Sie diese Unterscheidung, wenn Sie externe Dokumentationen konsultieren.

Beispiel für eine dynamische Preisaktualisierung

<html>
  <head>
  </head>
  <body>
    <div id="st-notification-frame"></div>
    <form id="st-form" action="https://www.example.com"/>
    <div id="st-google-pay"></div>
    <script src="<CDN_DOMAIN>"></script>
    <script> 
      (function() {
        var st = SecureTrading({  
          jwt: 'INSERT YOUR JWT HERE',          
        });  
        st.GooglePay({
	  "buttonOptions": {
	    "buttonRootNode": "st-google-pay"
	  },
	  "paymentRequest": {
	    "allowedPaymentMethods": [{
	      "parameters": {
		  "allowedAuthMethods": ["PAN_ONLY", "CRYPTOGRAM_3DS"],
		  "allowedCardNetworks": ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"]
	      },
	    "tokenizationSpecification": {
	      "parameters": {
	        "gateway": "trustpayments",
	        "gatewayMerchantId": "test_site12345"
	      },
	      "type": "PAYMENT_GATEWAY"
	    },
	    "type": "CARD"
	    }],
	    "environment": "TEST",
	    "apiVersion": 2,
	    "apiVersionMinor": 0,
	    "merchantInfo": {
	      "merchantId": "<e.g. 1234567890>"
	    },
	    "shippingAddressRequired": true,
	    "shippingAddressParameters": {
	      "phoneNumberRequired": true,
	    },
	    "callbackIntents": [
	      "SHIPPING_ADDRESS",
	      "SHIPPING_OPTION",
	      "PAYMENT_AUTHORIZATION",
	    ],
	    "paymentDataCallbacks": {
	      "onPaymentAuthorized": onPaymentAuthorized,
	      "onPaymentDataChanged": onPaymentDataChanged
	    },
	    "shippingOptionRequired": true,
            "shippingOptionParameters": {
              defaultSelectedOptionId: "shipping-001",
              shippingOptions: [
                {
                  "id": "shipping-001",
                  "label": "$0.00: Free shipping",
                  "description": "Free Shipping delivered in 5 business days."
                },
                {
                  "id": "shipping-002",
                  "label": "$1.99: Standard shipping",
                  "description": "Standard shipping delivered in 3 business days."
                },
                {
                  "id": "shipping-003",
                  "label": "$10: Express shipping",
                  "description": "Express shipping delivered in 1 business day."
                }
              ]
            },
	    "transactionInfo": {
	      "countryCode": "US",
	      "currencyCode": "USD",
	      "totalPriceStatus": "ESTIMATED",
	      "totalPrice": "10.00",
	      "totalPriceLabel": "Total",
	      "displayItems": [{
	        "label": "Total Goods",
	        "price": "10.00",
	        "type": "LINE_ITEM",
	        "status": "FINAL"
	      }]
	    }
          }
       });
    })();
    </script>
  </body>
</html>

Erfassen der Rechnungsdaten des Kunden Google Pay Wallet

Um die Rechnungsdaten aus der Google Pay Wallet des Kunden zu erfassen und diese Daten bei der Zahlungsabwicklung zu verwenden, sind folgende Schritte erforderlich:

In Ihrem signierten jwt payload müssen Sie das Feld billingcontactdetailsoverride mit dem Wert 1 enthalten.
Die billingAddressRequired muss in der Konfiguration der GooglePay-Methode auf true gesetzt werden.
Um optional die E-Mail-Adresse zu erfassen, fügen Sie"emailRequired":true in die paymentRequest ein.

billingAddressParameters bietet optionale Eigenschaften, die die Kontrolle über die Menge an Rechnungsinformationen ermöglichen, die aus der Brieftasche des Kunden benötigt werden, bevor er mit der Zahlung fortfahren kann.

Eigentum

Format

Beschreibung

format

Zeichenfolge

Das Format der Rechnungsadresse ist für den Abschluss der Transaktion erforderlich.

MIN: Name, Ländercode und Postleitzahl (Standard).
FULL: Name, Straße, Ort, Region, Ländercode und Postleitzahl.

phoneNumberRequired

Boolesche

Setzen auf true wenn eine Telefonnummer für die Bearbeitung der Transaktion erforderlich ist.

<html>
  <head>
  </head>
  <body>
    <div id="st-notification-frame"></div>
    <form id="st-form" action="https://www.example.com"/>
    <div id="st-google-pay"></div>
    <script src="<CDN_DOMAIN>"></script>
    <script> 
      (function() {
        var st = SecureTrading({  
          jwt: 'INSERT YOUR JWT HERE',          
        });  
        st.GooglePay({
          "buttonOptions": {
            "buttonRootNode": "st-google-pay"
          },
          "paymentRequest": {

            "emailRequired":true,

            "allowedPaymentMethods": [{
              "parameters": {
                "allowedAuthMethods": ["PAN_ONLY", "CRYPTOGRAM_3DS"],
                "allowedCardNetworks": ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"],
                "billingAddressRequired":true,
                "billingAddressParameters":{
                    "format":"FULL",
                    "phoneNumberRequired":true
                }
                ...

Weitere Lektüre zu diesem Thema