Google Pay™ offers the convenience of using cards stored in your Google Account, delivering a fast and secure payment solution across websites, apps, and in-store purchases. PayEngine currently supports all major card brands—Visa, MasterCard, American Express, and Discover—in the US and Canada for Google Pay™ transactions.
This platform makes it easy to present Google Pay™ during the checkout process in your web application. If you're already using the JS library, it's as simple as calling an extra function to present Google Pay™ button.
To learn more about the JS library, please see our guide.
<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8" /> <metahttp-equiv="X-UA-Compatible"content="IE=edge" /> <metaname="viewport"content="width=device-width, initial-scale=1.0" /> <title>Google Pay Demo</title> <scriptsrc="https://console.payengine.co/js/1.0.0/embed.js?key=<your public key>"async></script> <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/axios/0.22.0/axios.min.js"integrity="sha512-m2ssMAtdCEYGWXQ8hXVG4Q39uKYtbfaJL5QMTbhl2kc6vYyubrKHhr6aLLXW4ITeXSywQLn1AhsAaqrJl8Acfg=="crossorigin="anonymous"referrerpolicy="no-referrer"></script></head><body> <h4>Google Pay</h4> <divid="button"></div> <script>constmerchantId="<Your Merchant ID>";constamount= <Amountyouwanttocharge>; const submit = (token) => { axios.post("<Your Back End Application>/api/charge", { merchantID: merchantId, token: token, amount:String(amount), } ).then((resp) => {//Handle Response from your backend }).catch((err) => {//Handle Error from your backend }); }; window.onload = () => {PayEngine.GooglePay.configure({ merchantId: merchantId, hmac:<YourHMAC>, amount: amount, selector: "#button", buttonType: "pay", buttonColor: 'black', callback: function (response, error) {if (!error) {//Handle Success here. Typically call your backend to call PayEngine ccsale APIsubmit(response.token); } else {//Handle Google Pay Authorization Error } }, }); }; </script></body></html>
// Credit Card Sale// Note that this call is not changed and can pass in Google Pay Token just like Credit card tokensexports.charge=asyncfunction (req, res) {try{constresponse=awaitaxios.post(PayEngine_Server +"/api/payment/sale", {"merchant_id":req.body.merchantID,"data": {"transactionAmount":req.body.amount,"cardToken":req.body.token,"currencyCode":"USD" } }, { headers: {'Content-type':'application/json','Accept':'text/plain','Authorization':'Basic '+ secret_key } })res.json(response.data) }catch(error){res.json({error:error.response?.data ?? error}) }}
Presenting the Google Pay™ button
As shown in the example above, in your client app you just call GooglePay.configure function to present Google Pay™ as an option.
Please note that you need to have provide the amount before you call this method.
PayEngine.GooglePay.configure({ merchantId: <YourMerchantID>, hmac:<YourHMAC>, amount: <AmountYouwanttocharge>, selector: "#button", buttonType: "pay", buttonColor: "default", callback: function (response, error) {if (!error) {//Call Your backend server to execute PayEngine sale API } else {// Handle error here } }, });
Customizing Google Pay™ button
You can customize the label and color of your Google Pay™ Button by providing buttonType and buttonColor attributes in Google Pay™ configuration object.