JavaScript-Webschaltfläche

Mit der Google Wallet API können deine Nutzer ein Objekt aus dem Web zu Google Wallet hinzufügen. Nutzer können ihre Karten direkt über Ihre Website hinzufügen.

Hier findest du Details zum HTML-Element g:savetoandroidpay, mit dem eine Google Wallet API-Schaltfläche gerendert wird, sowie zum JSON-Webtoken, das deinen Webdienst für Google beschreibt.

Google Wallet API-JavaScript

Wenn du g:savetoandroidpay-HTML-Tags beim Laden automatisch parsen möchtest, füge das Standard-JavaScript hinzu

<script src="https://apis.google.com/js/platform.js" type="text/javascript"></script>

Geben Sie für AJAX-Anwendungen und für das explizite Rendern der Google Wallet API-Schaltflächen den Parameter "parsetags": "explicit" an.

<script src="https://apis.google.com/js/platform.js" type="text/javascript">
  {"parsetags": "explicit"}
</script>

g:savetoandroidpay-HTML-Tag

Mit dem g:savetoandroidpay-Namespace-Tag werden die Platzierung und verschiedene Attribute der Schaltfläche „Zu Google Wallet hinzufügen“ definiert. Verwende dieses Tag, wenn du HTML und JWTs serverseitig renderst.

<g:savetoandroidpay jwt="JWT" onsuccess="successHandler" onfailure="failureHandler" />
Feld Typ Erforderlich Beschreibung
height String N Höhe der Schaltfläche, die angezeigt werden soll. Mögliche Werte sind: small (30 Pixel hoch) und standard (38 Pixel hoch). Die Standardeinstellung für height ist small. Unter Google Wallet API-Schaltflächen findest du Beispiele für Schaltflächen mit unterschiedlichen height-Einstellungen.
jwt String J Google Wallet API-JWT.
onsuccess String N Stringname der Callback-Handler-Funktion bei erfolgreichem Speichern.
onfailure String N Stringname der Callback-Handler-Funktion bei Fehlschlagen des Speichervorgangs. Dieser Funktion wird ein Fehlerobjekt übergeben, das den Fehlercode und die Fehlermeldung enthält.
onprovidejwt String N Stringname der Handler-Funktion bei Bereitstellung des JWT. Diese Funktion dient dazu, die JWT-Daten abzufangen und möglicherweise zu ändern, bevor das Objekt in Google Wallet hinzugefügt wird. Diese Funktion akzeptiert keine Parameter und muss das JWT als String zurückgeben. Beim Implementieren des Event-Handlers können die ursprünglichen JWT-Daten unter dem Feld this.getOpenParams().renderData.userParams.jwt abgerufen werden.
size String N Breite der Schaltfläche, die angezeigt werden soll. Sie können size auf matchparent festlegen, damit die Breite der Breite des übergeordneten Elements entspricht. Sie können size auch undefiniert lassen, damit die Breite an die Breite der text-Einstellung angepasst wird. Unter Google Wallet API-Schaltflächen findest du Beispiele für Schaltflächen mit unterschiedlichen size-Einstellungen.
text String N Eingestellt
textsize String N Wenn textsize=large angegeben ist, werden Text- und Schaltflächengröße erheblich erhöht, falls spezielle Anforderungen an die Benutzeroberfläche bestehen.
theme String N Design der angezeigten Schaltfläche. Mögliche Werte sind: dark und light. Das Standarddesign ist dark. Unter Google Wallet API-Schaltflächen findest du Beispiele für Schaltflächen mit unterschiedlichen theme-Einstellungen.

Google Wallet API-JWT

Das Google Wallet API-JWT definiert die zu speichernden Objekte und Klassen.

Protokoll

        {
  "iss": "example_service_account@developer.gserviceaccount.com",
  "aud": "google",
  "typ": "savetoandroidpay",
  "iat": 1368029586,
  "payload": {
    "eventTicketClasses": [{
      ... //Event ticket Class JSON
    }],
    "eventTicketObjects": [{
      // Event ticket Object JSON
    }],
    "flightClasses": [{
      // Flight Class JSON
    }],
    "flightObjects": [{
      // Flight Object JSON
    }],
    "giftCardClasses": [{
      // Gift card Class JSON
    }],
    "giftCardObjects": [{
      // Gift card Object JSON
    }],
    "loyaltyClasses": [{
      // Loyalty Class JSON
    }],
    "loyaltyObjects": [{
      // Loyalty Object JSON
    }],
    "offerClasses": [{
      // Offer Class JSON
    }],
    "offerObjects": [{
      // Offer Object JSON
    }],
    "transitClasses": [{
      // Transit Class JSON
    }],
    "transitObjects": [{
      // Transit Object JSON
    }]
  },
  "origins": ["http://baconrista.com", "https://baconrista.com"]
}

Hinweis: Diese JWTs sind mit RSA-SHA256 signiert. Der Signaturschlüssel ist der vom OAuth-Dienstkonto generierte Schlüssel.

Feld Typ Erforderlich Beschreibung
iss String J Die E‑Mail-Adresse, die von Ihrem OAuth 2.0-Dienstkonto erstellt wurde.
aud String J Zielgruppe. Die Zielgruppe für Google Wallet API-Objekte ist immer google.
typ String J JWT-Typ. Die Zielgruppe für Google Wallet API-Objekte ist immer savetoandroidpay.
iat Ganzzahl J In Zeit in Sekunden seit der Epoche erstellt.
payload Objekt J Nutzlastobjekt.
payload.eventTicketClasses Array N Zu speichernde Klasse des Veranstaltungstickets
payload.eventTicketObjects Array N Zu speicherndes Veranstaltungsticketobjekt
payload.flightClasses Array N Zu speichernde Flugklasse
payload.flightObjects Array N Zu speicherndes Flight-Objekt
payload.giftCardClasses Array N Zu speichernde Geschenkkarten-Klasse
payload.giftCardObjects Array N Zu speicherndes Geschenkkartenobjekt
payload.loyaltyClasses Array N Zu speichernde Treueklasse
payload.loyaltyObjects Array N Zu speicherndes Treueobjekt
payload.offerObjects Array N Zu speicherndes Angebotsobjekt
payload.offerClasses Array N Zu speichernde Angebotsklasse
payload.transitObjects Array N Zu speicherndes Verkehrsobjekt
payload.transitClasses Array N Zu speichernde Verkehrsklasse
origins Array J Array der Domains, die für die JWT-Speicherung genehmigt werden sollen. Die Schaltfläche der Google Wallet API wird nicht gerendert, wenn das Feld origins nicht definiert ist. Wenn das Feld „Ursprünge“ nicht definiert ist, wird in der Browserkonsole möglicherweise die Meldung „Load durch X‑Frame-Options verweigert“ oder „Anzeige abgelehnt“ angezeigt.

Das codierte JWT sollte in etwa so aussehen:

eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJnb29nbGUiLCJvcmlnaW5zIjpbImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MCIsImh0dHA6Ly93d3cuZ29vZ2xlLmNvbSJdLCJpc3MiOiJzMmFwLXRvb2wuZ29vZ2xlLmNvbUBhcHBzcG90LmdzZXJ2aWNlYWNjb3VudC5jb20iLCJpYXQiOjE1NTE5ODcxNTEsInR5cCI6InNhdmV0b3dhbGxldCIsInBheWxvYWQiOnsib2ZmZXJPYmplY3RzIjpbeyJpZCI6IjMyMDI0MTMyNDE4NDM2OTk0MDEuMDFfT2ZmZXJPYmplY3RJZCJ9XX19.maHX40WWT29TC_kEb90EKQBH9AiTYAZR3153K8UI7fznVnfjVdlwsH_GKTECV3PGXdNnKCcmatUbKsONC0bxrnAHYG02kuvA1D3hSctz_amU66ntsvGIDe13mpxTzhI8fPvt9KMP1iaO7uOJuLQIHwipu4uRFAjyFaHGVaSFaP9c53qQyb_Zgyyk50M-MhH2n4kDpstNCqUJKWaadQkOWjrtMjwGzQ_ME04lbR4wb_mfK1A7Rc1UieWkxM9aMl5TOPubBKxKRRk_CqillN8XoTl9MI5RRGPuElVO28zGpYlFS6BarzDaaUfmbRZGvfF8ZiKrHZKxVrJjfZIJ2TCcDw

gapi.savetoandroidpay.render-Funktion

Mit dieser Funktion können Sie die Google Wallet API-Schaltfläche explizit rendern.

gapi.savetoandroidpay.render("dom-container",{
  "jwt": "JWT",
  "onsuccess": "successHandler",
  "onfailure": "failureHandler"
});
Feld Typ Erforderlich Beschreibung
dom-container String J ID des Containers, in dem die Google Wallet API-Schaltfläche platziert werden soll.
jwt String J JWT, mit dem die zu speichernden Inhalte definiert werden.
onsuccess String N Stringname der Callback-Handler-Funktion bei erfolgreichem Speichern.
onfailure String N Stringname der Callback-Handler-Funktion bei Fehlschlagen des Speichervorgangs. Dieser Funktion wird ein Fehlerobjekt übergeben, das den Fehlercode und die Fehlermeldung enthält.
onprovidejwt String N Stringname der Handler-Funktion bei Bereitstellung des JWT. Diese Funktion dient dazu, die JWT-Daten abzufangen und möglicherweise zu ändern, bevor das Objekt in Google Wallet hinzugefügt wird. Diese Funktion akzeptiert keine Parameter und muss das JWT als String zurückgeben. Beim Implementieren des Event-Handlers können die ursprünglichen JWT-Daten unter dem Feld this.getOpenParams().renderData.userParams.jwt abgerufen werden.

Fehlercodes und Fehlermeldungen in der Google Wallet API

In den folgenden Tabellen sind die Fehlercodes und Standardfehlermeldungen aufgeführt, die im Fehlerobjekt an die Fehler-Callback-Funktion übergeben werden, wenn ein Objekt nicht mit der JavaScript-Schaltfläche gespeichert werden kann.

        {
          "errorCode": "errorCode",
          "errorMessage": "errorMessage"
        }
errorCode errorMessage
SERVICE_FAILURE Auf dem Google Wallet-Server ist ein Fehler aufgetreten.
CLASS_NOT_FOUND Die Klasse, auf die im Objekt verwiesen wird, wurde nicht gefunden.
CLASS_MISMATCH Objekt muss vorhanden sein, denselben Typ haben und auf die eingeschlossene Klasse verweisen.
ORIGIN_MISMATCH Der Ursprung der Schaltfläche stimmt nicht mit dem in der Ursprungsliste angegebenen Ursprung überein.
INVALID_NUM_TYPES Es kann genau ein Objekttyp angegeben werden.
INVALID_SIGNATURE Die Signatur konnte nicht verifiziert werden.
INVALID_DUPLICATE_IDS Doppelte Objekte oder Klassen sind nicht zulässig.
INVALID_JWT Ungültiges JWT.
INVALID_EXP_IAT JWT ist abgelaufen oder wurde in der Zukunft ausgestellt.
INVALID_AUD Ungültiger Wert für das Feld „AUD“.
INVALID_TYP Ungültiger Wert für das Feld „TYP“.
INVALID_NUM_OBJECTS Für Kundenkarten, Geschenkkarten und Angebote müssen genau ein Objekt und höchstens eine Klasse angegeben werden.
MALFORMED_ORIGIN_URL Fehlerhafte Ursprungs-URL. Die URL muss ein Protokoll und eine Domain enthalten.
MISSING_ORIGIN Der Ursprung muss angegeben werden.
MISSING_FIELDS Bei den eingeschlossenen Objekten oder Klassen fehlten Pflichtfelder.

Lokalisierung

Die Sprache auf der JavaScript-Schaltfläche wird anhand der folgenden Kriterien geändert:

  1. Wenn der Nutzer bei Google angemeldet ist, wird die Schaltfläche in der Sprache angezeigt, die im Google-Kontoprofil des Nutzers angegeben ist. Informationen dazu, wie Nutzer die Sprache ihres Google-Kontos ändern können, finden Sie unter Sprache ändern.
  2. Wenn der Nutzer nicht bei Google angemeldet ist, verwendet die Schaltfläche im HTTP-Header den Wert ACCEPT-LANGUAGE.

Wenn die Schaltfläche nicht gemäß der oben genannten Logik in der richtigen Sprache gerendert wird oder der Wortlaut unnatürlich ist, solltest du dich an unser Supportteam wenden.