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.
Introducing the Google Pay button for React
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.
Getting started
The first step is to install the Google Pay button module from npm:
npm install @google-pay/button-react
Adding and configuring the button
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 for yourself on JSFiddle.
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.
Support for other frameworks
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:
- They are part of the Web Component specification and are supported by most modern browsers
- They work well with other frameworks (see Custom Elements Everywhere for more information)
- They work without a framework
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 it out on JSFiddle.
Google Pay JavaScript library
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.
Your feedback
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.