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

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

`Example usage: HTML website`

`html`

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`

`$3`

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"`.

`$3`

Callback Remarks

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`.

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.jsonfile is generated during the build process using thepackage-template.json where the version number is read from the package.json`
file defined in the root of this repository.

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

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

`Example usage: HTML website`

`html`

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`

`$3`

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"`.

`$3`

Callback Remarks

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`.

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.