Google Pay™

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.

Note: By integrating Google Pay, you agree to Google’s terms of service and Google Pay™ API's Acceptable Use Policy

Enabling Google Pay™ for your account

Please contact your support representative to enable Google Pay™ for your account.

Using Google Pay™ in your Web Application

For native app integration, please contact your assigned solution engineer for further implementation details. Also review Google Pay Android developer documentation, Google Pay Android integration checklist and Google Pay Android brand guidelines.

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.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Google Pay Demo</title>
    <script src="https://console.payengine.co/js/1.0.0/embed.js?key=<your public key>" async></script>
    <script src="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>
  <div id="button"></div>
  <script>
    const merchantId = "<Your Merchant ID>";
    const amount = <Amount you want to charge>;
      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:<Your HMAC>,
        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 API
              submit(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 tokens
exports.charge = async function (req, res) {
    try{
        const response = await axios.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: <Your Merchant ID>,
  hmac:<Your HMAC>,
  amount: <Amount You want to charge>,
  selector: "#button",
  buttonType: "pay", 
  buttonColor: "default", 
  billingAddressRequired: true,
  shippingAddressRequired: true,
  callback: function (response, error) {
    if (!error) {
      //Call Your backend server to execute PayEngine sale API
    } else {
      // Handle error here  
    }
  },
});

To request billing and/or shipping address set the billingAddressRequired and shippingAddressRequired properties to true. You can also include extra billing and shipping address parameters if default response is not sufficient. Please see Google Pay documentation here

Sample Token Response with metadata

{
    "token": "pe_sandbox_***************",
    "metadata": {
        "shippingAddress": {
            "address3": "",
            "sortingCode": "",
            "address2": "",
            "countryCode": "US",
            "address1": "123 Main Street",
            "postalCode": "90245",
            "name": "John Doe",
            "locality": "Los Ageles",
            "administrativeArea": "CA"
        },
        "billingAddress": {
            "address3": "",
            "sortingCode": "",
            "address2": "",
            "countryCode": "US",
            "address1": "123 Main Street",
            "postalCode": "90245",
            "name": "John Doe",
            "locality": "Los Angeles",
            "administrativeArea": "CA"
        }
    },
    "merchantId": "<Your Merchant ID>"
}

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.

  buttonType: 'pay', // "book" | "buy" | "checkout" | "donate" | "order" | "pay" | "plain" | "subscribe" | "long" | "short"
  buttonColor: 'default', // "default" | "black" | "white"

PreviousApple Pay in your native app NextLevel 2 and Level 3 Data

Last updated 23 days ago