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