npmpackage.info

Gathering detailed insights and metrics for @google-pay/button-element

Other packages similar to @google-pay/button-element

@google-pay/save-button-element

1.0.0

Web component for the Save to Google Pay button

Gathering detailed insights and metrics for @google-pay/button-element

@google-pay/button-element - 3.1.0 | npmpackage.info

@google-pay/button-element

Google Pay button - React, Angular, and custom element

3.1.0

275

Apache-2.0

TypeScript

133.86 kB

3.9

Installations

npm install @google-pay/button-element

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, UMD

Min. Node Version

>=8.0.0

Node Version

16.20.2

NPM Version

8.19.4 Pull Requests

Open

4

Total

207

Closed

66

Merged

137

Issues

Open

7

Total

85

Closed

78

Releases

v3.1.0

Updated on Mar 28, 2024

v3.0.10

Updated on Jul 17, 2023

v3.0.9

Updated on May 02, 2023

v3.0.8

Updated on Apr 24, 2023

v3.0.7

Updated on Apr 21, 2023

v3.0.6

Updated on Feb 28, 2023

View All 68 releases

Languages

TypeScript

JavaScript

Shell

TypeScript (88.45%)

JavaScript (5.96%)

Shell (5.59%)

Developer

google-pay

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

Apache-2.0 License

275 Stars

433 Commits

78 Forks

15 Watchers

7 Branches

10 Contributors

Updated on Jul 11, 2025

Maintainers

View All 10 Contributors

Package Meta Information

Latest Version

3.1.0

Package Id

@google-pay/button-element@3.1.0

Unpacked Size

133.86 kB

Size

29.02 kB

File Count

NPM Version

8.19.4

Node Version

16.20.2

Published on

Mar 28, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@types/googlepay

Google Pay web component button

This is the web component for the 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/button-react and @google-pay/button-angular versions of this component.

Installation

1npm install @google-pay/button-element

Example usage: HTML website

1<div id="buttons">
2  <google-pay-button environment="TEST" button-type="short" button-color="black"></google-pay-button>
3</div>
4<script type="module">
5  import './node_modules/@google-pay/button-element/dist/index.js';
6
7  const button = document.querySelector('google-pay-button');
8  button.paymentRequest = {
9    apiVersion: 2,
10    apiVersionMinor: 0,
11    allowedPaymentMethods: [
12      {
13        type: 'CARD',
14        parameters: {
15          allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
16          allowedCardNetworks: ['MASTERCARD', 'VISA'],
17          billingAddressRequired: true,
18        },
19        tokenizationSpecification: {
20          type: 'PAYMENT_GATEWAY',
21          parameters: {
22            gateway: 'example',
23            gatewayMerchantId: 'exampleGatewayMerchantId',
24          },
25        },
26      },
27    ],
28    merchantInfo: {
29      merchantId: '12345678901234567890',
30      merchantName: 'Demo Merchant',
31    },
32    transactionInfo: {
33      totalPriceStatus: 'FINAL',
34      totalPriceLabel: 'Total',
35      totalPrice: '100.00',
36      currencyCode: 'USD',
37      countryCode: 'US',
38    },
39  };
40
41  button.addEventListener('loadpaymentdata', event => {
42    console.log('load payment data', event.detail);
43  });
44</script>

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

Try it out on StackBlitz.

Example usage: Vue website

1<google-pay-button
2  environment="TEST"
3  button-type="buy"
4  button-color="black"
5  v-bind:paymentRequest.prop="{
6    apiVersion: 2,
7    apiVersionMinor: 0,
8    allowedPaymentMethods: [
9      {
10        type: 'CARD',
11        parameters: {
12          allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
13          allowedCardNetworks: ['AMEX', 'VISA', 'MASTERCARD']
14        },
15        tokenizationSpecification: {
16          type: 'PAYMENT_GATEWAY',
17          parameters: {
18            gateway: 'example',
19            gatewayMerchantId: 'exampleGatewayMerchantId'
20          }
21        }
22      }
23    ],
24    transactionInfo: {
25      totalPriceStatus: 'FINAL',
26      totalPriceLabel: 'Total',
27      totalPrice: '100.00',
28      currencyCode: 'USD',
29      countryCode: 'US'
30    }
31  }"
32  v-on:loadpaymentdata="onLoadPaymentData"
33  v-on:error="onError"
34></google-pay-button>

More Vue examples can be found in the examples folder of this repository.

Try it out on StackBlitz.

Example usage: Svelte website

1<google-pay-button
2  environment="TEST"
3  button-type="buy"
4  button-color="black"
5  paymentRequest={{
6    apiVersion: 2,
7    apiVersionMinor: 0,
8    allowedPaymentMethods: [
9      {
10        type: 'CARD',
11        parameters: {
12          allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
13          allowedCardNetworks: ['AMEX', 'VISA', 'MASTERCARD'],
14        },
15        tokenizationSpecification: {
16          type: 'PAYMENT_GATEWAY',
17          parameters: {
18            gateway: 'example',
19            gatewayMerchantId: 'exampleGatewayMerchantId',
20          },
21        },
22      },
23    ],
24    transactionInfo: {
25      totalPriceStatus: 'FINAL',
26      totalPriceLabel: 'Total',
27      totalPrice: '100.00',
28      currencyCode: 'USD',
29      countryCode: 'US',
30    },
31  }}
32  on:loadpaymentdata={event => {
33    console.log('load payment data', event.detail);
34  }}
35></google-pay-button>

More Svelte examples can be found in the examples folder of this repository.

Try it out on StackBlitz (note: limited browser support).

Documentation

Visit the Google Pay developer site for more information about integrating Google Pay into your website.

Properties

Property	Type	Remarks
buttonColor	`"default" \| "black" \| "white"`	Optional. `"default"`/`"black"` buttons are suitable to be used on light colored backgrounds, with `"white"` being appropriate for dark colored backgrounds. Default value `"default"`.
buttonLocale	`string`	Optional. This ISO 639-1 code represents the desired button language. Supported locales include `en`, `ar`, `bg`, `ca`, `cs`, `da`, `de`, `el`, `es`, `et`, `fi`, `fr`, `hr`, `id`, `it`, `ja`, `ko`, `ms`, `nl`, `no`, `pl`, `pt`, `ru`, `sk`, `sl`, `sr`, `sv`, `th`, `tr`, `uk`, and `zh`. Default value is determined by the browser/operating system locale.
buttonSizeMode	`"static" \| "fill"`	Optional. `"static"` buttons will be sized according to the translated `buttonType`. `"fill"` buttons will be styled according the the element's size. Use this mode when resizing the button with CSS `width` and `height` properties. Default value `"static"`.
buttonType	`"book" \| "buy" \| "checkout" \| "donate" \| "order" \| "pay" \| "plain" \| "subscribe" \| "long" \| "short"`	Optional. Displays their respective prompts (localized based on the user's browser settings) with the Google Pay logo. The `"plain"` button only displays the Google Pay logo. `"long"` and `"short"` button types have been renamed to `"buy"` and `"plain"`, but are still valid button types for backwards compatability. Default value `"buy"`.
buttonRadius	`number`	Optional. Specifies the button corner radius in pixels. The minimum is 0 and the maximum depends on the height of the button. If the height is 40px (default height) then the maximum value for the `buttonRadius` is 20.
environment	`"TEST" \| "PRODUCTION"`	Required. The Google Pay environment to target. Note: in the `"TEST"` environment, fake payment credentials are returned. In order to use the `"PRODUCTION"` environment, your website must be registered with Google Pay. This can be done through the Google Pay Business Console.
existingPaymentMethodRequired	`boolean`	Optional. When set to `true` (and `environment` is `Production`), the Google Pay button will only be displayed if the user already has an existing payment that they can use to make a purchase. Default value `false`.
paymentRequest	`PaymentDataRequest`	Required. Request parameters that define the type of payment information requested from Google Pay. See `PaymentDataRequest` reference for more information.

Callbacks/events

Callback	Arguments	Remarks
onCancel cancelCallback	reason	Invoked when a user cancels or closes the Google Pay payment sheet. Also raised as event `"cancel"`.
onClick clickCallback	event	Invoked when the Google Pay button is clicked, before the payment sheet is displayed. Display of the payment sheet can be prevented by calling `event.preventDefault()`.
onError errorCallback	reason	Invoked when an error is encountered in the process of presenting and collecting payment options from the Google Pay payment sheet. Also raised as event `"error"`.
onLoadPaymentData loadPaymentDataCallback	paymentData	Invoked when a user has successfully nominated payment details. This callback receives the `PaymentData` response which includes the `PaymentMethodData` that can be sent to supported payment processors. Also raised as event `"loadpaymentdata"`.
onPaymentAuthorized paymentAuthorizedCallback	paymentData	Invoked when a user chooses a payment method. This callback should be used to validate whether or not the payment method can be used to complete a payment. This would be typically used to perform pre-authorization to ensure that the card is valid and has sufficient funds. Note that in order to use this callback `paymentRequest.callbackIntents` must include `PAYMENT_AUTHORIZATION`. See payment authorization reference for more information.
onPaymentDataChanged paymentDataChangedCallback	intermediatePaymentData	Invoked when payment the user changes payment data options including payment method, shipping details, and contact details. This callback can be used to dynamically update `transactionInfo` when payment details, shipping address, or shipping options change. Note that in order to use this callback `paymentRequest.callbackIntents` must include either `SHIPPING_ADDRESS` or `SHIPPING_OPTION`. See payment data changed reference for more information.
onReadyToPayChange readyToPayChangeCallback	result	Invoked when the user's `isReadyToPay` state changes. This callback can be used to change the application's behaviour based on whether or not the user is ready to pay. Note that when `existingPaymentMethodRequired` is `true`, you will need to inspect both `result.isReadyToPay` and `result.paymentMethodPresent` to determine if the user `isReadyToPay` and has a `paymentMethodPresent`. Alternatively, `result.isButtonVisible` can be used to determine whether or Google Pay button will be displayed. `existingPaymentMethodRequired` is taken into account with `result.isButtonVisible`. Also raised as event `"readytopaychange"`.

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.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

Security-Policy

Determines if the project has published a security policy.

5

SAST

Determines if the project uses static code analysis.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.9

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More