save-button-element

Save to Google Pay button web component

This is the web component for the Save to Google Pay button. This component can be used in standard HTML websites as well as websites built with many popular JavaScript frameworks.

Note that React and Angular developers should use the @google-pay/save-button-react and @google-pay/save-button-angular versions of this component.

Installation

npm install @google-pay/save-button-element

Example usage: HTML website

<save-to-google-pay-button jwt="eyJhbGci...7_eD2kT3_IuHxw" height="standard" textsize="large">
</save-to-google-pay-button>

An HTML example can be found in the examples folder of this repository.

Example usage: Vue website

The Vue example is very similar to the HTML version above. An example can be found in the examples folder of this repository.

Other examples

Additional examples included:

• Svelte

Documentation

Properties

Property	Type	Remarks
jwt	string	Required. Google Pay API for Passes Json Web Token (JWT) used to save the loyalty pass to Google Pay. A JWT can be generated by following the instructions at the Save passes to Google Pay page.
height	"small" | "standard"	Optional. Height of button to display. Possible values are: small (30px high) and standard (38px high). The height defaults to small. Refer to Google Pay API for Passes buttons to see samples of buttons with different height settings. Default value "small".
size	"matchparent" | undefined	Optional. Width of button to display. You can set size to matchparent to have the width match the width of the parent element. Refer to Google Pay API for Passes buttons to see samples of buttons with different size settings. Default value undefined.
textsize	"large" | undefined	Optional. When textsize of large is specified, displays dramatically increased text size and button size, for cases with special UI requirements. Default value undefined.
theme	"dark" | "light"	Optional. Theme of button to display. Possible values are: dark and light. The default theme is dark. Refer to Google Pay API for Passes buttons to see samples of buttons with different theme settings. Default value "dark".

Callbacks/events

Callback	Remarks
onSuccess successCallback	A callback function that is invoked when the user successfully saves the pass to their account. Also raised as event "success".
onFailure failureCallback	A callback that is invoked when an error occurs in the process of saving the pass. The first paramemer is a CustomEvent where the detail property describes the details of the error. Also raised as event "failure".
onProvideJwt provideJwtCallback	A callback function that can be used to intercept and potentially manipulate the JWT before the pass is saved to Google Pay. This function must return a string.

Visit the Google Pay API for Passes for Web API Reference for more information about integrating the different button properties.

About this package

Note that this folder does not contain a package.json file. The package.json file is generated during the build process using the package-template.json where the version number is read from the package.json file defined in the root of this repository.