Google Pay

We also support Google Pay as an acceptance method in your application.

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.

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 Mercchant ID>";
      const amount = 10.00;

      //--> Send data to your backend after receving Google Pay Token
      const submit = (token) => {
        axios
          .post(
            "<Your Back End Application>/api/charge",
            {
              merchant_id: merchantId,
              data: {
                cardToken: token,
                transactionAmount: String(amount),
              },
            }
          )
          .then((resp) => {
            //Handle Response from your backend
          })
          .catch((err) => {
            //Handle Error from your backend
          });
      };

      //--> Example of PayEngine library and Google Pay
      window.onload = () => {
        PayEngine.GooglePay.configure({
          merchantId: merchantId,
          hmac: <HMAC>,
          amount: amount,
          selector: "#button",
          buttonType: "buy", 
          buttonColor: 'black',
          // This function called to provide result of Google Pay Authorization
          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
                }
            })
        console.log(response)
        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: <HMAC>,
  amount: <Amount You want to charge i>,
  selector: "#googlePayButton", 
  buttonType: "pay", 
  buttonColor: "default",
  callback: async function (response, error) {
    if (!error) {
        //Call Your backend server to execute PayEngine sale API
      );
      // Process saleResponse as per your business needs
    } 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.

  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 10 days ago