Bouton Web JavaScript

L'API Google Wallet permet à vos utilisateurs d'ajouter un objet à Google Wallet depuis le Web. Les utilisateurs peuvent ajouter leurs cartes directement depuis votre site Web.

Ce document de référence fournit des détails sur l'élément HTML g:savetoandroidpay, qui affiche un bouton d'API Google Wallet, ainsi que sur le jeton Web JSON qui décrit votre service Web à Google.

API Google Wallet JavaScript

Pour analyser automatiquement les balises HTML g:savetoandroidpay lors du chargement, indiquez le code JavaScript standard.

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

Pour les applications AJAX et l'affichage explicite des boutons de l'API Google Wallet, indiquez le paramètre "parsetags": "explicit".

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

Balise HTML g:savetoandroidpay

La balise d'espace de noms g:savetoandroidpay définit l'emplacement et d'autres attributs du bouton "Ajouter à Google Wallet". Utilisez cette balise si vous affichez le contenu HTML et les jetons JWT côté serveur.

<g:savetoandroidpay jwt="JWT" onsuccess="successHandler" onfailure="failureHandler" />
Champ Type Obligatoire Description
height Chaîne N Hauteur du bouton à afficher. Les valeurs possibles sont small (30 px de haut) et standard (38 px de haut). Le champ height est défini par défaut sur small. Consultez Boutons de l'API Google Wallet pour voir des exemples de boutons avec différents paramètres height.
jwt Chaîne O Jeton JWT de l'API Google Wallet.
onsuccess Chaîne N Nom de chaîne de la réussite de l'enregistrement de la fonction de gestionnaire de rappel.
onfailure Chaîne N Nom de chaîne de l'échec d'enregistrement de la fonction de gestionnaire de rappel. Cette fonction reçoit un objet d'erreur contenant des paramètres "errorCode" et "errorMessage".
onprovidejwt Chaîne N Nom de chaîne de la fonction de gestionnaire de jeton JWT fournie. L'objectif de cette fonction est d'intercepter et potentiellement de manipuler les données JWT avant que l'objet ne soit ajouté à Google Wallet. Cette fonction n'accepte aucun paramètre et doit renvoyer le jeton JWT sous forme de chaîne. Lors de la mise en œuvre du gestionnaire d'événements, les données JWT d'origine peuvent être récupérées sous le champ this.getOpenParams().renderData.userParams.jwt.
size Chaîne N Largeur du bouton à afficher. Vous pouvez définir size sur matchparent pour que la largeur corresponde à la largeur de l'élément parent. Vous pouvez également choisir de ne pas définir size afin que la largeur s'adapte à celle du paramètre text. Consultez Boutons de l'API Google Wallet pour voir des exemples de boutons avec différents paramètres size.
text Chaîne N Obsolète
textsize Chaîne N Lorsque la valeur de textsize=large est spécifiée, la taille du texte et du bouton est beaucoup plus grande en cas d'exigences spécifiques pour l'interface utilisateur.
theme Chaîne N Thème du bouton à afficher. Deux valeurs sont possibles : dark et light. Le thème par défaut est dark. Consultez Boutons de l'API Google Wallet pour voir des exemples de boutons avec différents paramètres theme.

Jeton JWT de l'API Google Wallet

Le jeton JWT de l'API Google Wallet définit les objets et les classes à enregistrer.

Protocole

        {
  "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"]
}

Remarque : Ces jetons JWT sont signés à l'aide de RSA-SHA256. La clé de signature est la clé générée par le compte de service OAuth.

Champ Type Obligatoire Description
iss Chaîne O Adresse e-mail générée par votre compte de service OAuth 2.0.
aud Chaîne O Audience. L'audience des objets de l'API Google Wallet sera toujours google.
typ Chaîne O Type de jeton JWT. L'audience des objets de l'API Google Wallet sera toujours savetoandroidpay.
iat Nombre entier O Temps d'émission en secondes depuis l'epoch.
payload Objet O Objet Charge utile.
payload.eventTicketClasses Tableau N Classe de billets pour des événements à enregistrer.
payload.eventTicketObjects Tableau N Objet Billet pour un événement à enregistrer.
payload.flightClasses Tableau N Classe de vol à enregistrer.
payload.flightObjects Tableau N Objet Vol à enregistrer.
payload.giftCardClasses Tableau N Classe de carte cadeau à enregistrer.
payload.giftCardObjects Tableau N Objet Carte cadeau à enregistrer.
payload.loyaltyClasses Tableau N Classe de fidélité à enregistrer.
payload.loyaltyObjects Tableau N Objet Fidélité à enregistrer.
payload.offerObjects Tableau N Objet Offre à enregistrer.
payload.offerClasses Tableau N Classe d'offre à enregistrer.
payload.transitObjects Tableau N Objet Transports en commun à enregistrer.
payload.transitClasses Tableau N Classe de transports en commun à enregistrer.
origins Tableau O Tableau de domaines à approuver pour la fonctionnalité d'enregistrement JWT. Le bouton de l'API Google Wallet ne s'affiche pas lorsque le champ origins n'est pas défini. Il est possible que les messages "Chargement refusé par X-Frame-Options" ou "Affichage refusé" s'affichent dans la console du navigateur si le champ "origins" n'est pas défini.

Le jeton JWT encodé doit ressembler à l'exemple suivant :

eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJnb29nbGUiLCJvcmlnaW5zIjpbImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MCIsImh0dHA6Ly93d3cuZ29vZ2xlLmNvbSJdLCJpc3MiOiJzMmFwLXRvb2wuZ29vZ2xlLmNvbUBhcHBzcG90LmdzZXJ2aWNlYWNjb3VudC5jb20iLCJpYXQiOjE1NTE5ODcxNTEsInR5cCI6InNhdmV0b3dhbGxldCIsInBheWxvYWQiOnsib2ZmZXJPYmplY3RzIjpbeyJpZCI6IjMyMDI0MTMyNDE4NDM2OTk0MDEuMDFfT2ZmZXJPYmplY3RJZCJ9XX19.maHX40WWT29TC_kEb90EKQBH9AiTYAZR3153K8UI7fznVnfjVdlwsH_GKTECV3PGXdNnKCcmatUbKsONC0bxrnAHYG02kuvA1D3hSctz_amU66ntsvGIDe13mpxTzhI8fPvt9KMP1iaO7uOJuLQIHwipu4uRFAjyFaHGVaSFaP9c53qQyb_Zgyyk50M-MhH2n4kDpstNCqUJKWaadQkOWjrtMjwGzQ_ME04lbR4wb_mfK1A7Rc1UieWkxM9aMl5TOPubBKxKRRk_CqillN8XoTl9MI5RRGPuElVO28zGpYlFS6BarzDaaUfmbRZGvfF8ZiKrHZKxVrJjfZIJ2TCcDw

Fonction gapi.savetoandroidpay.render

Cette fonction vous permet d'afficher explicitement le bouton de l'API Google Wallet.

gapi.savetoandroidpay.render("dom-container",{
  "jwt": "JWT",
  "onsuccess": "successHandler",
  "onfailure": "failureHandler"
});
Champ Type Obligatoire Description
dom-container Chaîne O Identifiant du conteneur dans lequel placer le bouton de l'API Google Wallet.
jwt Chaîne O Jeton JWT définissant le contenu à enregistrer.
onsuccess Chaîne N Nom de chaîne de la réussite de l'enregistrement de la fonction de gestionnaire de rappel.
onfailure Chaîne N Nom de chaîne de l'échec d'enregistrement de la fonction de gestionnaire de rappel. Cette fonction reçoit un objet d'erreur contenant des paramètres "errorCode" et "errorMessage".
onprovidejwt Chaîne N Nom de chaîne de la fonction de gestionnaire de jeton JWT fournie. L'objectif de cette fonction est d'intercepter et potentiellement de manipuler les données JWT avant que l'objet ne soit ajouté à Google Wallet. Cette fonction n'accepte aucun paramètre et doit renvoyer le jeton JWT sous forme de chaîne. Lors de la mise en œuvre du gestionnaire d'événements, les données JWT d'origine peuvent être récupérées sous le champ this.getOpenParams().renderData.userParams.jwt.

Codes et messages d'erreur de l'API Google Wallet

Dans les tableaux suivants, vous trouverez les codes d'erreur et les messages d'erreur par défaut transmis dans l'objet d'erreur à la fonction de rappel d'échec lorsqu'un objet n'est pas correctement enregistré à l'aide du bouton JavaScript.

        {
          "errorCode": "errorCode",
          "errorMessage": "errorMessage"
        }
errorCode errorMessage
SERVICE_FAILURE Une erreur s'est produite sur le serveur Google Wallet.
CLASS_NOT_FOUND La classe référencée dans l'objet est introuvable.
CLASS_MISMATCH L'objet doit être présent, du même type, et doit faire référence à la classe incluse.
ORIGIN_MISMATCH L'origine du bouton ne correspond pas aux paramètres spécifiés dans la liste des origines.
INVALID_NUM_TYPES Vous ne pouvez spécifier qu'un seul type d'objet.
INVALID_SIGNATURE Impossible de vérifier la signature.
INVALID_DUPLICATE_IDS Les objets ou classes en double ne sont pas autorisés.
INVALID_JWT Jeton JWT non valide.
INVALID_EXP_IAT Le jeton JWT a expiré ou a été émis dans le futur.
INVALID_AUD Valeur non valide pour le champ AUD.
INVALID_TYP Valeur non valide pour le champ TYP.
INVALID_NUM_OBJECTS Vous ne pouvez spécifier qu'un seul objet et une seule classe pour les cartes de fidélité, les cartes cadeaux et les offres.
MALFORMED_ORIGIN_URL Format de l'URL d'origine incorrect. L'URL doit contenir un protocole et un domaine.
MISSING_ORIGIN Vous devez spécifier une origine.
MISSING_FIELDS Il manquait des champs obligatoires dans l'objet ou la classe spécifiés.

Localisation

La langue du bouton JavaScript change en fonction des critères suivants :

  1. Si l'utilisateur est connecté à Google, le bouton s'affiche dans la langue préférée spécifiée dans le profil de son compte Google. Pour découvrir comment modifier la langue préférée de son compte Google, l'utilisateur peut consulter Changer de langue.
  2. Si l'utilisateur n'est pas connecté à Google, le bouton utilise la valeur ACCEPT-LANGUAGE de l'en-tête HTTP.

Si vous remarquez que le bouton ne s'affiche pas dans la bonne langue suivant la logique ci-dessus ou si la formulation n'est pas naturelle, contactez notre équipe d'assistance.