Google Pay

PayEngine supports partners to enable Google Pay as an acceptance method in their application.

Enabling Google Pay for your account

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

Using Google Pay in your Web Application

For native app integration, please contact your PayEngine assigned solution engineer for further implementation details.

PayEngine makes it easy to present Google Pay during the checkout process in your web application. If you're already using PayEngine's JS library it's as simple as calling an extra function to present Google Pay button.

To learn more about PayEngine 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>

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"

Last updated