Posted by Soc Sieng, Developer Advocate
The Google Pay API enables fast, simple checkout for your website.
The Google Pay JavaScript library does not depend on external libraries or frameworks and will work regardless of which framework your website uses (if it uses any at all). While this ensures wide compatibility, we know that it doesn’t necessarily make it easier to integrate when your website uses a framework. We’re doing something about it.
React is one of the most widely-used tools for building web UI's, so we are launching the Google Pay Button for React to provide a streamlined integration experience. This component will make it easier to incorporate Google Pay into your React website whether you are new to React or a seasoned pro, and similarly, if this is your first Google Pay integration or if you’ve done this before.
We’re making this component available as an open source project on GitHub and publishing it to npm. We’ve authored the React component with TypeScript to bring code completion to supported editors, and if your website is built with TypeScript you can also take advantage of type validation to identify common issues as you type.
Get real time code completion and validation as you integrate with supported editors.
The first step is to install the Google Pay button module from npm:
npm install @google-pay/button-react
The Google Pay button can be added to your React component by first importing it:
import GooglePayButton from
'@google-pay/button-react';
And then rendering it with the necessary configuration values:
<GooglePayButton
environment="TEST"
paymentRequest={{ ... }}
onLoadPaymentData={() => {}}
/>
Try it out on StackBlitz.
Refer to component documentation for a full list of supported configuration properties.
Note that you will need to provide a Merchant ID in
paymentRequest.merchantInfo to complete the integration. Your
Merchant ID can be obtained from the Google
Pay Business Console.
Your Merchant ID can be found in the Google Pay Business Console.
For our Angular developers, we’ve also got you covered with the Google Pay Button for Angular. It shares the same features and functionality as the React component, but uses the conventions and idioms that you expect as an Angular developer.
The first step is to install the Google Pay button module from npm:
npm install @google-pay/button-angular
Import and install the GooglePayButtonModule into your Angular
module:
import { GooglePayButtonModule } from
'@google-pay/button-angular';
@NgModule({
// ...
imports: [
// ...
GooglePayButtonModule
],
// ...
})
And add the <google-pay-button /> into your Angular
component:
<google-pay-button
environment="TEST"
[paymentRequest]="paymentRequest"
(loadpaymentdata)="onLoadPaymentData($event)"
></google-pay-button>
Try it out on StackBlitz.
We also want to provide an improved developer experience for our developers using other frameworks, or no framework at all. That’s why we are also releasing the Google Pay button Custom Element.
Custom elements are great because:
Like the React and Angular components, the Google Pay button custom element is hosted on GitHub and published to npm. In fact, all three components share the same repository and large portion of code. This ensures that both versions maintain feature parity and receive the same level of care and attention.
Like the React component, the Google Pay button custom element is hosted on GitHub and published to npm. In fact, the React component and the custom element share the same repository and large portion of code. This ensures that both versions maintain feature parity and receive the same level of care and attention.
Try out the HTML version or the Vue version on StackBlitz.
There's no change to the existing Google Pay JavaScript library, and if you prefer, you can continue to use this directly instead of the React component or custom element. Both of these components provide a convenience layer over the Google Pay JavaScript library and make use of it internally.
This is the first time that we (the Google Pay team) have released a framework specific library. We would love to hear your feedback.
Aside from React, most frameworks can use the Web Component version of the Google Pay Button. We may consider adding support for other frameworks based on interest and demand.
If you encounter any problems with the React component or custom element, please raise a GitHub issue. Alternatively, if you know what the problem is and have a solution in mind, feel free to raise a pull request. For other Google Pay related requests and questions, use the Contact Support option in the Google Pay Business Console.