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.
paymentRequest.merchantInfo
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.
npm install @google-pay/button-angular
Import and install the GooglePayButtonModule into your Angular module:
GooglePayButtonModule
import { GooglePayButtonModule } from '@google-pay/button-angular'; @NgModule({ // ... imports: [ // ... GooglePayButtonModule ], // ... })
And add the <google-pay-button /> into your Angular component:
<google-pay-button />
<google-pay-button environment="TEST" [paymentRequest]="paymentRequest" (loadpaymentdata)="onLoadPaymentData($event)" ></google-pay-button>
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.
Email remains at the heart of how companies operate. That's why earlier this year, we previewed Gmail Add-ons—a way to help businesses speed up workflows. Since then, we've seen partners build awesome applications, and beginning today, we're extending the Gmail add-on preview to include all developers. Now anyone can start building a Gmail add-on.
Gmail Add-ons let you integrate your app into Gmail and extend Gmail to handle quick actions.
They are built using native UI context cards that can include simple text dialogs, images, links, buttons and forms. The add-on appears when relevant, and the user is just a click away from your app's rich and integrated functionality.
Gmail Add-ons are easy to create. You only have to write code once for your add-on to work on both web and mobile, and you can choose from a rich palette of widgets to craft a custom UI. Create an add-on that contextually surfaces cards based on the content of a message. Check out this video to see how we created an add-on to collate email receipts and expedite expense reporting.
Per the video, you can see that there are three components to the app's core functionality. The first component is getContextualAddOn()—this is the entry point for all Gmail Add-ons where data is compiled to build the card and render it within the Gmail UI. Since the add-on is processing expense reports from email receipts in your inbox, the createExpensesCard() parses the relevant data from the message and presents them in a form so your users can confirm or update values before submitting. Finally, submitForm()takes the data and writes a new row in an "expenses" spreadsheet in Google Sheets, which you can edit and tweak, and submit for approval to your boss.
getContextualAddOn()
createExpensesCard()
submitForm()
Check out the documentation to get started with Gmail Add-ons, or if you want to see what it's like to build an add-on, go to the codelab to build ExpenseIt step-by-step. While you can't publish your add-on just yet, you can fill out this form to get notified when publishing is opened. We can't wait to see what Gmail Add-ons you build!
