Gathering detailed insights and metrics for @google-pay/button-element
Gathering detailed insights and metrics for @google-pay/button-element
Gathering detailed insights and metrics for @google-pay/button-element
Gathering detailed insights and metrics for @google-pay/button-element
Google Pay button - React, Angular, and custom element
npm install @google-pay/button-element
Typescript
Module System
Min. Node Version
Node Version
NPM Version
TypeScript (88.51%)
JavaScript (5.93%)
Shell (5.56%)
Total Downloads
351,913
Last Day
216
Last Week
5,233
Last Month
21,067
Last Year
177,553
Apache-2.0 License
278 Stars
444 Commits
79 Forks
15 Watchers
8 Branches
10 Contributors
Updated on Aug 31, 2025
Latest Version
3.2.1
Package Id
@google-pay/button-element@3.2.1
Unpacked Size
135.39 kB
Size
29.24 kB
File Count
9
NPM Version
8.19.4
Node Version
16.20.2
Published on
Aug 14, 2025
Cumulative downloads
Total Downloads
Last Day
45%
216
Compared to previous day
Last Week
14.7%
5,233
Compared to previous week
Last Month
-9.6%
21,067
Compared to previous month
Last Year
118.6%
177,553
Compared to previous year
1
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.
1npm install @google-pay/button-element
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.
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.
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).
Visit the Google Pay developer site for more information about integrating Google Pay into your website.
Property | Type | Remarks |
---|---|---|
buttonColor |
|
Optional.
Default value |
buttonLocale |
|
Optional. This ISO 639-1 code represents the desired button language. Supported locales include Default value is determined by the browser/operating system locale. |
buttonSizeMode |
|
Optional.
Default value |
buttonType |
|
Optional. Displays their respective prompts (localized based on the user's browser settings) with the Google Pay logo. The
Default value |
buttonRadius |
|
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 |
buttonBorderType |
|
Optional.
Default value |
environment |
|
Required. The Google Pay environment to target. Note: in the |
existingPaymentMethodRequired |
|
Optional. When set to Default value |
paymentRequest |
Required. Request parameters that define the type of payment information requested from Google Pay. See |
Callback | Arguments | Remarks |
---|---|---|
onCancel | reason |
Invoked when a user cancels or closes the Google Pay payment sheet. Also raised as event |
onClick | 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 |
onError | 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 |
onLoadPaymentData | paymentData |
Invoked when a user has successfully nominated payment details. This callback receives the Also raised as event |
onPaymentAuthorized | 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 See payment authorization reference for more information. |
onPaymentDataChanged | 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 Note that in order to use this callback See payment data changed reference for more information. |
onReadyToPayChange | result |
Invoked when the user's Note that when
Also raised as event |
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.