Save to Google Pay Example

### Install Dependencies and Start Development Server Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/examples/svelte/README.md Install project dependencies using npm and start the development server with Rollup. Changes are reflected on hot reload. ```bash cd svelte-app npm install ``` ```bash npm run dev ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/examples/vue/README.md Run this command in your project's root directory to install all necessary dependencies listed in package.json. ```bash npm install ``` -------------------------------- ### Install Save to Google Pay React Button Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/README.md Install the React-specific package for easier integration into React applications. ```sh npm install @google-pay/save-button-react ``` -------------------------------- ### Deploy Svelte App with Surge Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/examples/svelte/README.md Install the Surge CLI, build your Svelte application, and then deploy the public directory. This is a common method for static site deployment. ```bash npm install -g surge npm run build surge public my-project.surge.sh ``` -------------------------------- ### Install Save to Google Pay Web Component Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/README.md Install the web component package for direct use in HTML or with frameworks. ```sh npm install @google-pay/save-button-element ``` -------------------------------- ### Deploy Svelte App with Vercel Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/examples/svelte/README.md Install the Vercel CLI and deploy your Svelte application's public directory. This command initiates the deployment process. ```bash npm install -g vercel cd public vercel deploy --name my-project ``` -------------------------------- ### Initialize Svelte Project with Degit Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/examples/svelte/README.md Use degit to quickly scaffold a new Svelte project from the official template. Ensure Node.js is installed. ```bash npx degit sveltejs/template svelte-app cd svelte-app ``` -------------------------------- ### Install Save to Google Pay Angular Button Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/README.md Install the Angular-specific package for easier integration into Angular applications, avoiding CUSTOM_ELEMENTS_SCHEMA registration. ```sh npm install @google-pay/save-button-angular ``` -------------------------------- ### Configure Single-Page App Mode for Sirv Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/examples/svelte/README.md Modify the 'start' script in package.json to enable single-page app mode for the sirv server. This allows handling all paths for SPAs. ```json "start": "sirv public --single" ``` -------------------------------- ### Basic and Full Usage of Save to Google Pay Web Component Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Demonstrates minimal and full usage of the `` custom element in plain HTML. Includes examples of setting required JWT, visual properties, and handling success/failure events via DOM listeners or property callbacks. ```html Save to Google Pay Example

``` -------------------------------- ### Generate JWT on Server (Node.js) Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Generate a signed JWT on your server to represent the pass being saved. This example uses the google-auth-library for Node.js. Ensure your service account key file and scopes are correctly configured. ```ts import { GoogleAuth } from 'google-auth-library'; const auth = new GoogleAuth({ keyFile: 'service-account.json', scopes: ['https://www.googleapis.com/auth/wallet_object.issuer'], }); const payload = { iss: 'your-service-account@project.iam.gserviceaccount.com', aud: 'google', typ: 'savetowallet', iat: Math.floor(Date.now() / 1000), origins: ['https://yourdomain.com'], payload: { loyaltyObjects: [{ id: '3388000000010048668.member@example.com-rewards' }], }, }; // Sign with RS256 using your service account private key const client = await auth.getClient(); const jwt = await client.sign(payload); // returns signed JWT string // Pass this jwt string to the button component ``` -------------------------------- ### Build for Production Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/examples/vue/README.md Compiles and minifies the project for production deployment. The output will be in the dist/ folder. ```bash npm run build ``` -------------------------------- ### Run Development Server Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/examples/vue/README.md Compiles and hot-reloads the project for development. Access your application via the provided local URL. ```bash npm run serve ``` -------------------------------- ### Set Up TypeScript Environment Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/examples/svelte/README.md Run the provided script to set up a TypeScript development environment for your Svelte project. Alternatively, remove the script if TypeScript is not needed. ```bash node scripts/setupTypeScript.js ``` ```bash rm scripts/setupTypeScript.js ``` -------------------------------- ### Configure Button Width Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Make the button fill its container using 'size="matchparent"'. Useful for responsive designs. ```html

``` ```tsx // React ``` -------------------------------- ### Configure Button Text Size Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Use 'textsize="large"' for a larger button and text, suitable for specific UI requirements. ```html ``` ```tsx // React ``` -------------------------------- ### Configure Button Theme Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Customize the button's color scheme with 'theme="light"' or 'theme="dark"' (default). ```html ``` ```tsx // React – dynamically toggle theme const [theme, setTheme] = React.useState<'dark' | 'light'>('dark'); ``` -------------------------------- ### Handle Save Success (Web Component) Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Listen for the 'success' DOM event or use the 'onSuccess' property callback to confirm a successful save. ```js // Web component – DOM event const button = document.querySelector('save-to-google-pay-button'); button.addEventListener('success', () => { showConfirmationBanner('Your loyalty card has been saved to Google Pay!'); }); // Web component – property callback (alias: successCallback) button.onSuccess = () => { analytics.track('google_pay_save_success'); }; ``` -------------------------------- ### Provide JWT Callback for Web Components Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Implement the `onProvideJwt` callback to fetch a fresh JWT from your backend on each save attempt. This ensures the JWT is not stale when the button is clicked. The callback must return a string synchronously or the button will use the `jwt` attribute as a fallback. ```javascript // Web component const button = document.querySelector('save-to-google-pay-button'); button.onProvideJwt = async () => { // Fetch a fresh JWT from your backend on every save attempt const response = await fetch('/api/generate-gpay-jwt?userId=123'); const { jwt } = await response.json(); return jwt; }; // Note: the callback must return a string synchronously or the button // will use the jwt attribute value as fallback ``` -------------------------------- ### Commit Message Format Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/CONTRIBUTING.md Follow this format for commit messages to ensure readability and automate release processes. Refer to the Conventional Commits specification for details. ```text [optional scope]: [optional body] [optional footer(s)] ``` -------------------------------- ### Handle Save Success (React) Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Use the 'onSuccess' prop in React to handle successful pass saves and trigger subsequent actions. ```tsx // React { setMessage('Saved to Google Pay!'); analytics.track('gpay_save_success'); }} /> ``` -------------------------------- ### Handle Save Success (Angular) Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Implement the '(success)' event binding in Angular templates and the corresponding component method to manage successful saves. ```html ``` ```ts // Angular component onSuccess(event: CustomEvent): void { this.toastService.show('Loyalty card saved to Google Pay!'); } ``` -------------------------------- ### Basic Save to Google Pay Button Usage Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/src/save-button-react/README.md Render the Save to Google Pay button with a required JWT and optional styling properties. ```jsx ``` -------------------------------- ### Configure Button Height Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Control the button's height using the 'height' attribute. Accepts 'small' (default) or 'standard'. ```html ``` ```tsx // React ``` ```html ``` -------------------------------- ### Handle Save Failure (Web Component) Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Use the 'failure' DOM event or 'onFailure' property callback to catch errors during the save process. The error details are in 'event.detail'. ```js // Web component – DOM event button.addEventListener('failure', event => { const error = event.detail; console.error('Google Pay save failed:', error.message); showErrorDialog(`Could not save to Google Pay: ${error.message}`); }); // Web component – property callback (alias: failureCallback) button.onFailure = error => { Sentry.captureException(error); }; ``` -------------------------------- ### Lint and Fix Files Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/examples/vue/README.md Lints and automatically fixes code style issues in your project files according to configured rules. ```bash npm run lint ``` -------------------------------- ### Save to Google Pay Button Callbacks and Events Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Handle user interactions and outcomes with the Save to Google Pay button using `onSuccess` and `onFailure` events. ```APIDOC ## Callbacks and Events ### `onSuccess` / `success` event Fired when the user successfully saves the pass to their Google Pay account. ### `onFailure` / `failure` event Fired when an error occurs during the save process. The `detail` property of the `CustomEvent` contains the `Error` object. ``` -------------------------------- ### SaveToGooglePay Component Properties Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/src/save-button-react/README.md The SaveToGooglePay component accepts several properties to customize its appearance and behavior. ```APIDOC ## SaveToGooglePay Component ### Description This React component renders a button that allows users to save a pass to their Google Pay wallet. ### Properties #### 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](https://developers.google.com/pay/passes/guides/implement-the-api/save-passes-to-google-pay#generate-jwt-that-represents-object) page. #### height (string) - 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](https://developers.google.com/pay/passes/reference/uxguidelines#s2w) to see samples of buttons with different `height` settings. Default value: `"small"` #### size (string) - 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](https://developers.google.com/pay/passes/reference/uxguidelines#s2w) to see samples of buttons with different `size` settings. Default value: `undefined` #### textsize (string) - 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 (string) - 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](https://developers.google.com/pay/passes/reference/uxguidelines#s2w) to see samples of buttons with different `theme` settings. Default value: `"dark"` ### Callbacks #### 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`. ``` -------------------------------- ### Save to Google Pay Web Component in Svelte Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Integrates the Save to Google Pay web component into a Svelte application. Demonstrates binding component properties and handling events using Svelte's syntax. ```svelte

console.log('saved!')} on:failure={e => console.error('error', e.detail)} >

``` -------------------------------- ### Handle Save Failure (Angular) Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Use the '(failure)' event binding in Angular templates and the component's 'onFailure' method to manage and display save errors. ```html ``` ```ts // Angular component onFailure(event: CustomEvent): void { console.error('Google Pay error:', event.detail); this.errorMessage = event.detail.message; } ``` -------------------------------- ### Provide JWT Callback for React Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt In React, use the `onProvideJwt` prop to provide a function that synchronously returns the latest JWT. This function should typically access the latest JWT from your component's state or context. ```jsx // React { // Synchronously return the latest JWT (update via state/context) return latestJwt; }} /> ``` -------------------------------- ### Handle Save Failure (React) Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Implement the 'onFailure' prop in React to gracefully handle errors during the save operation and inform the user. ```tsx // React { console.error('Save failed:', error.message); setErrorMessage(error.message); }} /> ``` -------------------------------- ### Angular: Component Usage Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Use the save-to-google-pay-button directive in your Angular component's template. Bind properties for configuration and listen to output events for success and failure callbacks. ```ts // app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', }) export class AppComponent { jwt = 'eyJhbGci...7_eD2kT3_IuHxw'; height: 'small' | 'standard' = 'small'; size: 'matchparent' | '' = ''; textsize: 'large' | '' = ''; theme: 'dark' | 'light' = 'dark'; onSuccess(event: CustomEvent): void { console.log('Pass saved successfully!'); } onFailure(event: CustomEvent): void { console.error('Save failed:', event.detail); } onProvideJwt(): string { // Return a freshly generated JWT from your server return this.jwt; } } ``` ```html

``` -------------------------------- ### Provide JWT Callback for Angular Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt For Angular components, define a method that returns the current JWT string. This method can then be passed to the `provideJwtCallback` input property of the save-to-google-pay-button directive. ```typescript // Angular component provideJwtCallback = (): string => { return this.jwtService.getCurrentJwt(); }; ``` ```html ``` -------------------------------- ### Save to Google Pay Button Properties Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Customize the Save to Google Pay button using various properties like JWT, height, size, text size, and theme. ```APIDOC ## Save to Google Pay Button Properties ### `jwt` (required) A signed Google Pay API for Passes JWT that encodes the loyalty object, gift card, offer, or other pass to save. Generate this JWT on your server by following the [Save passes to Google Pay](https://developers.google.com/pay/passes/guides/implement-the-api/save-passes-to-google-pay#generate-jwt-that-represents-object) guide. ### `height` (optional) Controls the button height. Accepts `"small"` (30 px, default) or `"standard"` (38 px). ### `size` (optional) When set to `"matchparent"`, the button stretches to fill its container's width. ### `textsize` (optional) When set to `"large"`, renders a dramatically larger button and text for special UI requirements. ### `theme` (optional) Controls the button color scheme. Accepts `"dark"` (default, Google-branded dark) or `"light"`. ``` -------------------------------- ### Import SaveToGooglePayButtonModule in Angular Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/src/save-button-angular/README.md Import the SaveToGooglePayButtonModule into your Angular application's NgModule to make the button component available. ```ts import { SaveToGooglePayButtonModule } from '@google-pay/save-button-angular'; @NgModule({ // ... imports: [ /* ... */ SaveToGooglePayButtonModule], // ... }) ``` -------------------------------- ### React: Usage of Save to Google Pay Button Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Use the SaveToGooglePayButton component in your React application. It supports minimal and full usage with various props for customization and event handling. ```tsx // App.tsx import SaveToGooglePayButton from '@google-pay/save-button-react'; import React, { useState } from 'react'; const MY_JWT = 'eyJhbGci...7_eD2kT3_IuHxw'; const App: React.FC = () => { const [height, setHeight] = useState<'small' | 'standard'>('small'); const [theme, setTheme] = useState<'dark' | 'light'>('dark'); const [size, setSize] = useState<'matchparent' | undefined>(undefined); const handleSuccess = () => { console.log('Pass saved to Google Pay!'); }; const handleFailure = (error: Error) => { console.error('Could not save pass:', error); }; // Intercept save and supply a fresh JWT (e.g. from your backend) const handleProvideJwt = (): string => { return MY_JWT; // replace with a live fetch for production }; return (

{/* Minimal usage */} {/* Full usage with all props */} {/* Controls */}

); }; export default App; ``` -------------------------------- ### Save to Google Pay Button Element Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/src/save-button-element/README.md The `` element allows users to add a customizable button to their website for saving passes to Google Pay. It accepts various properties to control its appearance and behavior. ```APIDOC ## save-to-google-pay-button Element ### Description This is the web component for the Save to Google Pay button. It can be used in standard HTML websites as well as websites built with many popular JavaScript frameworks. For React and Angular, use the respective framework-specific versions. ### Properties #### `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](https://developers.google.com/pay/passes/guides/implement-the-api/save-passes-to-google-pay#generate-jwt-that-represents-object) page. #### `height` (string) - 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](https://developers.google.com/pay/passes/reference/uxguidelines#s2w) to see samples of buttons with different `height` settings. Default value: `"small"` #### `size` (string) - 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](https://developers.google.com/pay/passes/reference/uxguidelines#s2w) to see samples of buttons with different `size` settings. Default value: `undefined` #### `textsize` (string) - 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` (string) - 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](https://developers.google.com/pay/passes/reference/uxguidelines#s2w) to see samples of buttons with different `theme` settings. Default value: `"dark"` ### Example Usage (HTML) ```html ``` ``` -------------------------------- ### Angular: Module Registration Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Register the SaveToGooglePayButtonModule in your Angular application's AppModule. This makes the save-to-google-pay-button directive available throughout your app. ```ts // app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { SaveToGooglePayButtonModule } from '@google-pay/save-button-angular'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, FormsModule, SaveToGooglePayButtonModule], bootstrap: [AppComponent], }) export class AppModule {} ``` -------------------------------- ### Vue Integration with Save Button Element Source: https://context7.com/google-wallet/save-to-google-pay-button/llms.txt Integrate the Save to Google Pay button in a Vue application by importing the `@google-pay/save-button-element` web component. Register the element before mounting your Vue app and use it within your templates, binding props and listening for events. ```vue ``` -------------------------------- ### Angular Usage of Save to Google Pay Button Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/src/save-button-angular/README.md Use the save-to-google-pay-button component in your Angular templates. Provide the required 'jwt' and optional 'height' and 'textsize' properties. ```html ``` -------------------------------- ### Save to Google Pay Button Component Source: https://github.com/google-wallet/save-to-google-pay-button/blob/main/src/save-button-angular/README.md The `` component allows users to save passes to Google Pay directly from an Angular application. It accepts various properties to customize its appearance and behavior. ```APIDOC ## save-to-google-pay-button Component ### Description This is the Angular component for the Save to Google Pay button. It allows users to save loyalty passes to their Google Pay account. ### Properties #### Path Parameters * **jwt** (string) - Required - Google Pay API for Passes Json Web Token (JWT) used to save the loyalty pass to Google Pay. * **height** (string) - Optional - Height of button to display. Possible values are: `"small"` (30px high) and `"standard"` (38px high). Defaults to `"small"`. * **size** (string) - Optional - Width of button to display. Possible values are: `"matchparent"` or `undefined`. Defaults to `undefined`. * **textsize** (string) - Optional - When `"large"` is specified, displays dramatically increased text size and button size. Defaults to `undefined`. * **theme** (string) - Optional - Theme of button to display. Possible values are: `"dark"` and `"light"`. Defaults to `"dark"`. ### Callbacks/Events #### 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 parameter 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`. ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.