Simpler Google Pay integration for React and web developers

JUN 22, 2020

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.

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 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.

Angular is also supported

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.

Getting started

The first step is to install the Google Pay button module from npm:

npm install @google-pay/button-angular

Adding and configuring the button

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.

GIF of code block install Angular button

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:

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.

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.

What do you think?

Do you have any questions? Let us know in the comments below or tweet using #AskGooglePayDev.