Getting started with Google Pay™

Datacap's Wallet client enables a merchant website to accept payment through a third party wallet like Google Pay™, offering customers a quick and familiar payment option. Tokenized card data is returned to the merchant in the same format as our WebToken and Hosted WebToken clients. The Google Pay Web Integration has been done and wrapped into Datacap's DatacapGooglePay library to closely match the integration to Datacaps other tokenization methods.

Before you begin

1. See if your processor of choice is supported by Google and Datacap.
2. Review Google Pay's Acceptable Use Policy.
3. Refer to the following documentation to see how the Google Pay button is utilized by Datacap. Google Pay Web developer documentation, Google Pay Web integration checklist, and Google Pay Brand Guidelines.
4. To set up a merchant account you have to register with Google Pay Business Console.

Supported Card Types

The following card networks are supported when utilizing Google Pay through Datacap's Pay API.
1. Mastercard
2. Visa
3. Discover
4. American Express

The following authorization methods are supported by Datacap
1. PAN_ONLY
2. CRYPTOGRAM_3DS

The definitions for allowedCardNetworks and allowedCardAuthMethods methods are shown below:

const allowedCardNetworks = ["AMEX", "DISCOVER", "MASTERCARD", "VISA"];
const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];

Datacap Google Pay Token

The following Google Pay tokenization parameters are specific to Datacap and are set to the values described below:

Field	Type	Description
`gateway`	String	datacapsystems is the required value that allows Datacap to process the payment
`gatewayMerchantId`	String	the merchants Datacap token key will be used for this value

        const tokenizationSpecification = {
          type: 'PAYMENT_GATEWAY',
          parameters: {
            'gateway': 'datacapsystems',
            'gatewayMerchantId': 'tokenkeyxxxxx'
          }
        };

Address Verification

Datacap integrators are responsible for collecting and supplying the (optional) customer address to Pay API for address verification. Google Pay supports returning the billing address however that is a flow that is currently not supported by Datacap's software.

Where to place the Google Pay button

The Google Pay button can be displayed on a POS checkout form, allowing the customer to use Google Pay instead of entering card details.

See Google's guidelines for more details on Google Pay button placement.

Include the Wallet client on your page

Add the secure, hosted JavaScript client in the `<head>` of your page:

Production:
<script src="https://wallet.dcap.com/v1/client/googlepay"></script>
<script src="https://pay.google.com/gp/p/js/pay.js"></script>

Certification:
<script src="https://wallet-cert.dcap.com/v1/client/googlepay"></script>
<script src="https://pay.google.com/gp/p/js/pay.js"></script>

Show the Google Pay button

Create a DIV with the ID: `<google-pay-button>`

<div id="google-pay-button">

Note: The Google Pay button is generated dynamically from the JavaScript client, including all styling. The Google Pay button is supported in most modern browsers.

Note: The Google Pay button will only be displayed if the merchant's processor supports Google Pay transactions. Currently supported processors are Worldpay Core (Vantiv) and EVO, with other processors coming soon.

Define required JavaScript

Define a JavaScript callback method that:
1. Handles token events
2. Sends the token to the POS server for payment processing

var tokenCallback = function(tokenResponse)
{
  return new Promise(function(resolve, reject)
  {
    // Token error!
    if (tokenResponse.Error)
    {
      alert("Token error: " + tokenResponse.Error);
      return;
    }

    // Good token! Send it to POS server for payment processing
    fetch("https://your-server-for-receiving-order-info/",
      {
        method: "POST",
        body: JSON.stringify(tokenResponse)
      })
      .then(function(paymentResponse)
      {
        paymentResponse.json().then(function(json)
        {
          // Use Datacap's Pay API HTTP status 
          // to determine how to return promise 
          if (payApiResponse.status != 200)
          {
            reject("Error" + json.Message);
          }
          else
          {
            resolve("Approved" + json.Message);
          }
        });
      });
  });
};

Note: For the best user experience, the callback should return a promise to the Wallet client. A successful return dismisses the Google Pay sheet with a successful message. Rejecting the promise dismisses the Google Pay sheet with a "Payment not complete" message.

If the merchant's website is unable to fulfill the promise, the Google Pay sheet disappears without providing feedback to the customer.

Initialize!

Call `init` with your token callback method, token key, merchant name to display, Google Pay merchant ID, and amount to display :

DatacapGooglePay.init(tokenCallback, "[Token Key]", "[Merchant Name]", "[Google Pay Merchant ID]", "[Amount]");

The response object received by your callback method looks like this:

On Success

{
  "Brand": "VISA",
  "ExpirationMonth": "12",
  "ExpirationYear": "20",
  "Last4": "1234",
  "Token": "DC4:vEyLV7sH5F-me8BnK1nwwHesAWJQTRNK8",
  }
}

On Failure

{
  Error: "Failed to create token"
}

Use your tokens!

Now that you've got a Datacap token, you can use it for payment processing with Pay API. Do this by asynchronously calling your server with the token, and return the result as a JavaScript promise to the Wallet client. This cleanly dismisses the Google Pay sheet and lets the customer know the result of their Google Pay transaction.