JavaScript web button

  • Google Wallet API enables users to save passes to Google Wallet directly from a website.

  • Websites integrate the API by including a JavaScript library and using the g:savetoandroidpay HTML tag or the gapi.savetoandroidpay.render function.

  • Pass data is defined in a JSON Web Token (JWT) that includes information about the issuer, the pass type, and the pass data itself.

  • The Google Wallet button automatically adjusts its language based on user preferences or browser settings.

  • Developers can find detailed documentation and resources, including brand guidelines and error codes, to assist with implementation.

Google Wallet API enables your users to add an object to Google Wallet from the web. Users can add their cards directly from your website.

This reference provides details about the HTML element g:savetoandroidpay that renders a Google Wallet API button as well as the JSON Web Token that describes your web service to Google.

Google Wallet API JavaScript

To automatically parse g:savetoandroidpay HTML tags on load include the standard JavaScript

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

For AJAX applications and explicit rendering of Google Wallet API buttons, include the "parsetags": "explicit" parameter.

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

g:savetoandroidpay HTML tag

The g:savetoandroidpay namespace tag defines the placement and various attributes of the Add to Google Wallet button. Use this tag if you're rendering HTML and JWTs server side.

<g:savetoandroidpay jwt="JWT" onsuccess="successHandler" onfailure="failureHandler" />
Field Type Required Description
height String N Height of button to display. Possible values are: small (30px high) and standard (38px high). The height defaults to small. Refer to Google Wallet API buttons to see samples of buttons with different height settings.
jwt String Y Google Wallet API JWT.
onsuccess String N String name of the save success callback handler function.
onfailure String N String name of the save failure callback handler function. This function is passed an error object containing an errorCode and errorMessage.
onprovidejwt String N String name of the provide JWT handler function. The purpose of this function is to intercept and potentially manipulate the JWT data before the object is added to Google Wallet. This function takes in no parameters and must return the JWT as String. When implementing the event handler, the original JWT data can be retrieved under field this.getOpenParams().renderData.userParams.jwt.
size String N Width of button to display. You can set size to matchparent to have the width match the width of the parent element. Or, leave size undefined so that the width stretches to fit the width of the text setting. Refer to Google Wallet API buttons to see samples of buttons with different size settings.
text String N Deprecated
textsize String N When textsize=large is specified, displays dramatically increased text size and button size, for cases with special UI requirements.
theme String N Theme of button to display. Possible values are: dark and light. The default theme is dark. Refer to Google Wallet API buttons to see samples of buttons with different theme settings.

Google Wallet API JWT

The Google Wallet API JWT defines the objects and classes to save.

JSON representation

{
  "iss": "example_service_account@developer.gserviceaccount.com",
  "aud": "google",
  "typ": "savetowallet",
  "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"]
}

Fields

Field Type Required Description
iss String Y Your Google Cloud service account generated email address.
aud String Y Audience. The audience for Google Wallet API Objects will always be google.
typ String Y Type of JWT. The audience for Google Wallet API Objects will always be savetowallet.
iat Integer Y Issued at time in seconds since epoch.
payload Object Y Payload object.
payload.eventTicketClasses Array N Event Ticket Class to save.
payload.eventTicketObjects Array N Event Ticket Object to save.
payload.flightClasses Array N Flight Class to save.
payload.flightObjects Array N Flight Object to save.
payload.giftCardClasses Array N Gift Card Class to save.
payload.giftCardObjects Array N Gift Card Object to save.
payload.loyaltyClasses Array N Loyalty Class to save.
payload.loyaltyObjects Array N Loyalty Object to save.
payload.offerObjects Array N Offer Object to save.
payload.offerClasses Array N Offer Class to save.
payload.transitObjects Array N Transit Object to save.
payload.transitClasses Array N Transit Class to save.
origins Array Y Array of domains to approve for JWT saving functionality. The Google Wallet API button will not render when the origins field is not defined. You could potentially get a "Load denied by X-Frame-Options" or "Refused to display" messages in the browser console when the origins field is not defined.

Your encoded JWT should look similar to the following example:

eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJnb29nbGUiLCJvcmlnaW5zIjpbImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MCIsImh0dHA6Ly93d3cuZ29vZ2xlLmNvbSJdLCJpc3MiOiJzMmFwLXRvb2wuZ29vZ2xlLmNvbUBhcHBzcG90LmdzZXJ2aWNlYWNjb3VudC5jb20iLCJpYXQiOjE1NTE5ODcxNTEsInR5cCI6InNhdmV0b3dhbGxldCIsInBheWxvYWQiOnsib2ZmZXJPYmplY3RzIjpbeyJpZCI6IjMyMDI0MTMyNDE4NDM2OTk0MDEuMDFfT2ZmZXJPYmplY3RJZCJ9XX19.maHX40WWT29TC_kEb90EKQBH9AiTYAZR3153K8UI7fznVnfjVdlwsH_GKTECV3PGXdNnKCcmatUbKsONC0bxrnAHYG02kuvA1D3hSctz_amU66ntsvGIDe13mpxTzhI8fPvt9KMP1iaO7uOJuLQIHwipu4uRFAjyFaHGVaSFaP9c53qQyb_Zgyyk50M-MhH2n4kDpstNCqUJKWaadQkOWjrtMjwGzQ_ME04lbR4wb_mfK1A7Rc1UieWkxM9aMl5TOPubBKxKRRk_CqillN8XoTl9MI5RRGPuElVO28zGpYlFS6BarzDaaUfmbRZGvfF8ZiKrHZKxVrJjfZIJ2TCcDw

gapi.savetoandroidpay.render function

This function allows you to explicitly render the Google Wallet API button.

gapi.savetoandroidpay.render("dom-container",{
  "jwt": "JWT",
  "onsuccess": "successHandler",
  "onfailure": "failureHandler"
});
Field Type Required Description
dom-container String Y ID of container to place Google Wallet API button.
jwt String Y JWT defining content to save.
onsuccess String N String name of the save success callback handler function.
onfailure String N String name of the save failure callback handler function. This function is passed an error object containing an errorCode and errorMessage.
onprovidejwt String N String name of the provide JWT handler function. The purpose of this function is to intercept and potentially manipulate the JWT data before the object is added to Google Wallet. This function takes in no parameters and must return the JWT as String. When implementing the event handler, the original JWT data can be retrieved under field this.getOpenParams().renderData.userParams.jwt.

Google Wallet API error codes and messages

The following tables list the error codes and default error messages passed in the error object to the failure callback function, when an object doesn't save successfully using the JavaScript button.

        {
          "errorCode": "errorCode",
          "errorMessage": "errorMessage"
        }
errorCode errorMessage
SERVICE_FAILURE An error occurred on the Google Wallet server.
CLASS_NOT_FOUND Class referenced in object was not found.
CLASS_MISMATCH Object must be present, of the same type, and must reference the enclosed class.
ORIGIN_MISMATCH Origin of button does not match those specified in the origins list.
INVALID_NUM_TYPES Exactly one type of object can be specified.
INVALID_SIGNATURE Signature could not be verified.
INVALID_DUPLICATE_IDS Duplicates objects or classes are not allowed.
INVALID_JWT Invalid JWT.
INVALID_EXP_IAT JWT expired or was issued in the future.
INVALID_AUD Invalid value for AUD field.
INVALID_TYP Invalid value for TYP field.
INVALID_NUM_OBJECTS Exactly one object and at most one class can be specified for loyalty cards, gift cards, and offers.
MALFORMED_ORIGIN_URL Malformed origin url. Url must contain a protocol and domain.
MISSING_ORIGIN Origin must be specified.
MISSING_FIELDS Enclosed object or class was missing required fields.

Localization

The language in the JavaScript button changes based on the following criteria:

  1. If the user is logged into Google, the button renders in the preferred language given in the user's Google account profile. A user can read Change language to learn how to change their Google account's preferred language.
  2. If the user isn't logged into Google, the button uses the ACCEPT-LANGUAGE value in the HTTP header.

If you notice the button doesn't render in the correct language based on the logic above, or if the wording is unnatural, contact our support team.