@google-pay/save-button-react

Save to Google Pay React button

This is the React component for the Save to Google Pay button.

Installation

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

Example usage

<SaveToGooglePay jwt="eyJhbGci...7_eD2kT3_IuHxw" height="standard" textsize="large" />

A React example can be found in the examples folder of this repository.

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

Callback	Remarks
onSuccess	A callback function that is invoked when the user successfully saves the pass to their account.
onFailure	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.
onProvideJwt	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.