@google-pay/save-button-angular

Angular component for the Save to Google Pay button

Usage no npm install needed!

<script type="module">
  import googlePaySaveButtonAngular from 'https://cdn.skypack.dev/@google-pay/save-button-angular';
</script>

README

Save to Google Pay Angular button

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

Installation

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

Import the module into your application:

import { SaveToGooglePayButtonModule } from '@google-pay/save-button-angular';

@NgModule({
  // ...
  imports: [ /* ... */ SaveToGooglePayButtonModule],
  // ...
})

Example usage: Angular website

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

An Angular 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/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.