@google-pay/button-react

# Google Pay React button This is the React component for the Google Pay button. ## Installation ```sh npm install @google-pay/button-react ``` ## Example usage ```jsx import GooglePayButton from '@google-pay/button-react'; <GooglePayButton environment="TEST" paymentRequest={{ apiVersion: 2, apiVersionMinor: 0, allowedPaymentMethods: [ { type: 'CARD', parameters: { allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'], allowedCardNetworks: ['MASTERCARD', 'VISA'], }, tokenizationSpecification: { type: 'PAYMENT_GATEWAY', parameters: { gateway: 'example', gatewayMerchantId: 'exampleGatewayMerchantId', }, }, }, ], merchantInfo: { merchantId: '12345678901234567890', merchantName: 'Demo Merchant', }, transactionInfo: { totalPriceStatus: 'FINAL', totalPriceLabel: 'Total', totalPrice: '100.00', currencyCode: 'USD', countryCode: 'US', }, }} onLoadPaymentData={paymentRequest => { console.log('load payment data', paymentRequest); }} />; ``` More React examples can be found in the [examples folder](https://github.com/google-pay/google-pay-button/tree/main/examples/react/src/examples) of this repository. Try it out on [StackBlitz](https://stackblitz.com/edit/google-pay-react), or see it in action with a [React sample store](https://payments-react-store.web.app/) ([source code](https://github.com/google-pay/react-store/tree/google-pay)). ## Documentation Visit the [Google Pay developer site](https://developers.google.com/pay/api/web/overview) for more information about integrating Google Pay into your website. ### Properties <table> <tr> <th align="left">Property</th> <th align="left">Type</th> <th align="left">Remarks</th> </tr> <tr> <td>buttonColor</td> <td><code>"default" | "black" | "white"</code></td> <td> Optional. <code>"default"</code>/<code>"black"</code> buttons are suitable to be used on light colored backgrounds, with <code>"white"</code> being appropriate for dark colored backgrounds. Default value <code>"default"</code>. </td> </tr> <tr> <td>buttonLocale</td> <td><code>string</code></td> <td> Optional. This <a href="https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes">ISO 639-1</a> code represents the desired button language. Supported locales include <code>en</code>, <code>ar</code>, <code>bg</code>, <code>ca</code>, <code>cs</code>, <code>da</code>, <code>de</code>, <code>el</code>, <code>es</code>, <code>et</code>, <code>fi</code>, <code>fr</code>, <code>hr</code>, <code>id</code>, <code>it</code>, <code>ja</code>, <code>ko</code>, <code>ms</code>, <code>nl</code>, <code>no</code>, <code>pl</code>, <code>pt</code>, <code>ru</code>, <code>sk</code>, <code>sl</code>, <code>sr</code>, <code>sv</code>, <code>th</code>, <code>tr</code>, <code>uk</code>, and <code>zh</code>. Default value is determined by the browser/operating system locale. </td> </tr> <tr> <td>buttonSizeMode</td> <td><code>"static" | "fill"</code></td> <td> Optional. <code>"static"</code> buttons will be sized according to the translated <code>buttonType</code>. <code>"fill"</code> buttons will be styled according the the element's size. Use this mode when resizing the button with CSS <code>width</code> and <code>height</code> properties. Default value <code>"static"</code>. </td> </tr> <tr> <td>buttonType</td> <td><code>"book" | "buy" | "checkout" | "donate" | "order" | "pay" | "plain" | "subscribe" | "long" | "short"</code></td> <td> Optional. Displays their respective prompts (localized based on the user's browser settings) with the Google Pay logo. The <code>"plain"</code> button only displays the Google Pay logo. <code>"long"</code> and <code>"short"</code> button types have been renamed to <code>"buy"</code> and <code>"plain"</code>, but are still valid button types for backwards compatability. Default value <code>"buy"</code>. </td> </tr> <tr> <td>buttonRadius</td> <td><code>number</code></td> <td> 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 <code>buttonRadius</code> is 20. </td> </tr> <tr> <td>buttonBorderType</td> <td><code>"no_border" | "default_border"</code></td> <td> Optional. <code>"no_border"</code> No border is displayed around the button. <code>"default_border"</code> A thin border is displayed around the button. Default value <code>"default_border"</code>. </td> </tr> <tr> <td>className</td> <td><code>string</code></td> <td> Optional. The CSS class name to apply to the element. </td> </tr> <tr> <td>environment</td> <td><code>"TEST" | "PRODUCTION"</code></td> <td> Required. The Google Pay environment to target. Note: in the <code>"TEST"</code> environment, fake payment credentials are returned. In order to use the <code>"PRODUCTION"</code> environment, your website must be registered with Google Pay. This can be done through the <a href="https://pay.google.com/business/console/">Google Pay Business Console</a>. </td> </tr> <tr> <td>existingPaymentMethodRequired</td> <td><code>boolean</code></td> <td> Optional. When set to <code>true</code> (and <code>environment</code> is <code>Production</code>), 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 <code>false</code>. </td> </tr> <tr> <td>paymentRequest</td> <td><a href="https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest"><code>PaymentDataRequest</code></a></td> <td> Required. Request parameters that define the type of payment information requested from Google Pay. See <a href="https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest"><code>PaymentDataRequest</code> reference</a> for more information. </td> </tr> <tr> <td>style</td> <td><code>CSSProperties</code></td> <td> Optional. The CSS style attributes to apply to the element. </td> </tr> </table> ### Callbacks <table> <tr> <th align="left">Callback</th> <th align="left">Arguments</th> <th align="left">Remarks</th> </tr> <tr> <td>onCancel</td> <td>reason</td> <td> Invoked when a user cancels or closes the Google Pay payment sheet. </td> </tr> <tr> <td>onClick</td> <td>event</td> <td> Invoked when the Google Pay button is clicked, before the payment sheet is displayed. Display of the payment sheet can be prevented by calling <code>event.preventDefault()</code>. </td> </tr> <tr> <td>onError</td> <td>reason</td> <td> Invoked when an error is encountered in the process of presenting and collecting payment options from the Google Pay payment sheet. </td> </tr> <tr> <td>onLoadPaymentData</td> <td>paymentData</td> <td> Invoked when a user has successfully nominated payment details. This callback receives the <a href="https://developers.google.com/pay/api/web/reference/response-objects#PaymentData"><code>PaymentData</code> response</a> which includes the <a href="https://developers.google.com/pay/api/web/reference/response-objects#PaymentMethodData"><code>PaymentMethodData</code></a> that can be sent to <a href="https://developers.google.com/pay/api#participating-processors">supported payment processors</a>. </td> </tr> <tr> <td>onPaymentAuthorized</td> <td>paymentData</td> <td> 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 <code>paymentRequest.callbackIntents</code> must include <code>PAYMENT_AUTHORIZATION</code>. See <a href="https://developers.google.com/pay/api/web/reference/client#onPaymentAuthorized">payment authorization reference</a> for more information. </td> </tr> <tr> <td>onPaymentDataChanged</td> <td>intermediatePaymentData</td> <td> 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 <code>transactionInfo</code> when payment details, shipping address, or shipping options change. Note that in order to use this callback <code>paymentRequest.callbackIntents</code> must include either <code>SHIPPING_ADDRESS</code> or <code>SHIPPING_OPTION</code>. See <a href="https://developers.google.com/pay/api/web/reference/client#onPaymentDataChanged">payment data changed reference</a> for more information. </td> </tr> <tr> <td>onReadyToPayChange</td> <td>result</td> <td> Invoked when the user's <code>isReadyToPay</code> 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 <code>existingPaymentMethodRequired</code> is <code>true</code>, you will need to inspect both <code>result.isReadyToPay</code> and <code>result.paymentMethodPresent</code> to determine if the user <code>isReadyToPay</code> and has a <code>paymentMethodPresent</code>. Alternatively, <code>result.isButtonVisible</code> can be used to determine whether or Google Pay button will be displayed. <code>existingPaymentMethodRequired</code> is taken into account with <code>result.isButtonVisible</code>. </td> </tr> </table> ## 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`](../../package.json) file defined in the root of this repository.