Easier Google Pay integration for React and internet builders


Posted by Soc Sieng, Developer Advocate

The Google Pay API allows quick, easy checkout in your web site.

The Google Pay JavaScript library doesn’t rely upon exterior libraries or frameworks and can work no matter which framework your web site makes use of (if it makes use of any in any respect). Whereas this ensures huge compatibility, we all know that it doesn’t essentially make it simpler to combine when your web site makes use of a framework. We’re doing one thing about it.

Introducing the Google Pay button for React

React is without doubt one of the most widely-used instruments for constructing internet UI’s, so we’re launching the Google Pay Button for React to supply a streamlined integration expertise. This part will make it simpler to include Google Pay into your React web site whether or not you might be new to React or a seasoned professional, and equally, if that is your first Google Pay integration or in the event you’ve performed this earlier than.

We’re making this part out there as an open supply undertaking on GitHub and publishing it to npm. We’ve authored the React part with TypeScript to carry code completion to supported editors, and in case your web site is constructed with TypeScript you can too make the most of sort validation to establish widespread points as you sort.

Get actual time code completion and validation as you combine with supported editors.

Getting began

Step one is to put in the Google Pay button module from npm:

npm set up @google-pay/button-react

Including and configuring the button

The Google Pay button might be added to your React part by first importing it:

import GooglePayButton from ‘@google-pay/button-react’;

After which rendering it with the required configuration values:


Strive it out for your self on JSFiddle.

Discuss with part documentation for a full listing of supported configuration properties.

Observe that you will want to supply a Service provider ID in paymentRequest.merchantInfo to finish the combination. Your Service provider ID might be obtained from the Google Pay Enterprise Console.

Your Service provider ID might be discovered within the Google Pay Enterprise Console.

Assist for different frameworks

We additionally need to present an improved developer expertise for our builders utilizing different frameworks, or no framework in any respect. That’s why we’re additionally releasing the Google Pay button Customized Factor.

Customized parts are nice as a result of:

Just like the React part, the Google Pay button customized ingredient is hosted on GitHub and revealed to npm. The truth is, the React part and the customized ingredient share the identical repository and enormous portion of code. This ensures that each variations keep characteristic parity and obtain the identical degree of care and a spotlight.

Strive it out on JSFiddle.

Google Pay JavaScript library

There is not any change to the prevailing Google Pay JavaScript library, and in the event you choose, you’ll be able to proceed to make use of this immediately as a substitute of the React part or customized ingredient. Each of those parts present a comfort layer over the Google Pay JavaScript library and make use of it internally.

Your suggestions

That is the primary time that we (the Google Pay group) have launched a framework particular library. We’d love to listen to your suggestions.

Other than React, most frameworks can use the Net Part model of the Google Pay Button. We might take into account including help for different frameworks primarily based on curiosity and demand.

In case you encounter any issues with the React part or customized ingredient, please increase a GitHub concern. Alternatively, if you realize what the issue is and have an answer in thoughts, be happy to boost a pull request. For different Google Pay associated requests and questions, use the Contact Assist choice within the Google Pay Enterprise Console.

What do you assume?

Do you might have any questions? Tell us within the feedback under or tweet utilizing #AskGooglePayDev.