Google Pay on your own checkout page: decryption is done by us

You can implement Google Pay™ directly on your website, by using our client JavaScript SDK. By doing so you directly integrate the Google Pay button on your website. In this case you will be responsible for bringing up the Google Pay payment sheet and retrieving the payment token. Thereafter you can send the payment token to our Create Payment API via the server-to-server SDK to complete the payment. We will handle the decryption for you. This requires more work from your development team, but there are some benefits:

• Implementing the Google Pay button yourself allows you to show the Google Pay button directly on your website. For example on the product detail page of your products to increase conversion.
• You can use the Google Pay API to retrieve your customer's personal details such as their address or e-mail address.

You need to take care of the following steps:

• Enable Google Pay with us
• Follow the setup guidelines provided by Google
• Implement Google Pay on your website
• Apply with Google for production access (on Google's side)

Enabling Google Pay on your account with us

First make sure Google Pay is enabled for the account (merchantId) you have with us. To do so contact your account manager who will work together with your implementation manager. They will be able to set the product up for you. You will also need to have regular card products configured in case you use Google Pay, as Google Pay allows consumers to pay with regular PANs. The transactions which are paid with regular PANS will be processed as regular card payments and it is highly recommended to apply 3-D Secure and fraud validations on these transactions.

Follow the setup guidelines provided by Google

Google has a clear overview of the prerequisites you need to follow before you implement the Google Pay API, which are described on the setup section of the Google documentation. This includes adhering to the Google Pay API Acceptable Use Policy.

Implementing Google Pay on your checkout page

After you have followed the setup guidelines of Google, you can start with the technical integration. Google offers a very clear and concise tutorial on how to implement Google Pay on your website, which you can find here. The technical integration section on this page, explains you the additional steps you need to take to add Google Pay to your checkout page and to send the token to us, which includes:

• Checking whether Google Pay is currently available
• Rendering the Google Pay button
• Initializing the Payment sheet
• And more!

Since you use us for decrypting the sensitive payment data, the tokenizationType as referred to by Google is: PAYMENT_GATEWAY and below steps explain what you need to do additional to the tutorial of Google in order to implement Google Pay on your checkout page and send us the payment details for decryption.

1. Retrieve Google Pay via the payment product(s) API

The easiest way to check whether Google Pay is available, is by using the JavaScript Client SDK. The JavaScript SDK allows you to retrieve the Google Pay payment product via the payment product(s) API. This will retrieve data that is required in the next steps, such as the supported networks. While retrieving the payment product details, the SDK will also perform a call to Google isReadyToPay API, checking whether Google Pay is available with the device and settings your consumer is using. If this check fails, the Google Pay payment product will not be returned by the SDK, indicating that Google Pay is not available for the current transaction.

try {
  // session is an instance of the Session object, which is the main entry point for the SDK
  const paymentRequest = session.getPaymentRequest();

  const paymentProduct = await session.getPaymentProduct(
    320,
    paymentDetails,
    paymentProductSpecificInputs
  );
  paymentRequest.setPaymentProduct(paymentProduct);
} catch (err) {
  // Google Pay is not available, offer your customer another payment option to complete the payment
}

2. Available credit card networks

You have to provide the card networks allowed for the current Google Pay transaction. The available networks are retrieved in the get payment product call of the client-to-server (and the server-to-server) API. The networks will be available in the paymentProduct320SpecificData in the response. The values that are returned are accepted by the Google Pay API directly.

Since we decrypt for you, you must set a specific value for the "gateway" field of the tokenizationSpecification. This value is also available in the paymentProduct320SpecificData. The gatewayMerchantId is your merchantID number you have with us.

• merchantID: this is the merchantID you get from Google after registration with the Google Pay Business Console.
• merchantName: this is the name that is rendered in the payment sheet. It is mandatory to provide this in case you are based in the European Economic Area (EEA) to meet the Strong Customer Authentication (SCA) requirements. The merchantName must be encoded as UTF-8 as per Google's specifications.
• gateway: use the value returned in the product-response paymentProduct.paymentProduct320SpecificData.gateway
• gatewayMerchantId: your merchantID with us, with which you process your payments with us 

Below is an extended code snippet, that also shows how you should initialize the allowedCardNetworks as well as the tokenizationSpecification after having retrieved the Google Pay payment product.

// If you want to use Google Pay in your application, you are required to register
// with Google in order to receive a Google Merchant ID
const paymentProductSpecificInputs = {
  googlePay: {
    merchantId: "<Your google merchant ID>",
    merchantName: "<Your merchant name>",
    gatewayMerchantId: "<Your merchant ID with us>",
  }
};

// Retrieve the Google Pay Payment Product via the client to server API
try {
  const paymentProduct = await session.getPaymentProduct(
    320,
    paymentDetails,
    paymentProductSpecificInputs
  );
  const allowedCardNetworks =
    paymentProduct.paymentProduct320SpecificData.networks;
  const tokenizationSpecification = {
    type: "PAYMENT_GATEWAY",
    parameters: {
      gateway: paymentProduct.paymentProduct320SpecificData.gateway,
      gatewayMerchantId:
        paymentProductSpecificInputs.googlePay.gatewayMerchantId,
    },
  };

  // Store the payment product in the payment request which is required for
  // creating the encryptedCustomerData later on
  const paymentRequest = session.getPaymentRequest();
  paymentRequest.setPaymentProduct(paymentProduct);
} catch (err) {
  // Google Pay is not available, offer your customer another payment option to complete the payment
}

// If you want to use Google Pay in your application, you are required to register
// with Google in order to receive a Google Merchant ID
const paymentProductSpecificInputs = {
  googlePay: {
    merchantId: "<Your google merchant ID>",
    merchantName: "<Your merchant name>",
    gatewayMerchantId: "<Your gateway ID with us>",
  }
};

try {
  //Retrieve the Google Pay Payment Product via the client to server API
  // It is assumed that the session, paymentDetails and paymentProductSpecificInputs objects here are all valid
  const paymentProduct = await session.getPaymentProduct(
    320,
    paymentDetails,
    paymentProductSpecificInputs
  );

  //https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo
  const countryCode = paymentProduct.acquirerCountry;
  const transactionInfo = Object.assign(
    {
      currencyCode: "<Currency code>",
      totalPriceStatus: "<FINAL>",
      totalPrice: "<Amount>",
    },
    countryCode && { countryCode }
  );
} catch (err) {
  // Google Pay is not available, offer your customer another payment option to complete the payment
}

function addGooglePayButton() {
    const paymentsClient = getGooglePaymentsClient();
    const button =
        paymentsClient.createButton({
            onClick: onGooglePaymentButtonClicked
        });
    document.getElementById('container').appendChild(button);
}

async function onGooglePaymentButtonClicked() {
  try {
    const paymentDataRequest = getGooglePaymentDataRequest();
    paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
    
    const paymentsClient = getGooglePaymentsClient();
    const paymentData = await paymentsClient.loadPaymentData(paymentDataRequest);
    
    // handle the response
    processPayment(paymentData);
  } catch(err) {
    // show error in developer console for debugging
    console.error(err);
  }
}

function processPayment(paymentData) {
    const paymentToken = paymentData.paymentMethodData.tokenizationData.token;
    // @todo process the paymentToken as described in the next step
}

{
    "mobilePaymentMethodSpecificInput": {
        "encryptedPaymentData": "{\"signature\":\"MEUCIQCcSASjWu3ax9jQ8qX/+rsNLZ95uiyxamXiKnHlJi8A1QIgZj ...",
        "paymentProductId": "320"
    }
}

const paymentRequest = session.getPaymentRequest();
paymentRequest.setValue("encryptedPaymentData", paymentToken);

try {
  // Send the encryptedString to your backend. This exact String is the expected value for the
  // encryptedCustomerInput in the server to server Create Payment API
  const encryptor = session.getEncryptor();
  const encryptedString = await encryptor.encrypt(paymentRequest);
} catch (err) {
  // Inform the consumer that something went wrong
} 

{
    "order" : {
        "amountOfMoney" : {
            "currencyCode" : "EUR",
            "amount" : 2300
        },
        "customer" : {
           "merchantCustomerId": "<Your ID of the consumer>",
           "billingAddress" : { 
                "countryCode" : "NL"
            }
        }
    },
    "mobilePaymentMethodSpecificInput" : { 
        "paymentProductId" : 320, 
        "encryptedPaymentData": "{\"signature\":\"MEUCIQCcSASjWu3ax9jQ8qX/+rsNLZ95uiyxamXiKnHlJi8A1QIgZj ..."
    } 
}

{
    "order" : {
        "amountOfMoney" : {
            "currencyCode" : "EUR",
            "amount" : 2300
        },
        "customer" : {
           "merchantCustomerId": "<Your ID of the consumer>",
           "billingAddress" : { 
                "countryCode" : "NL"
            }
        }
    },
    "encryptedCustomerInput" : "<Encrypted string>" 
}

{
  "mobilePaymentMethodSpecificInput": {
    "paymentProductId": "320",
    "requiresApproval": true,
    "encryptedPaymentData": "{\"signature\":\"MEUCIQCcSASjWu3ax9jQ8qX/+rsNLZ95uiyxamXiKnHlJi8A1QIgZj ..."
  },
    "paymentProduct320SpecificInput": {
        "threeDSecure": {
          "challengeIndicator": "no-preference",
          "challengeCanvasSize": "600x400",
          "skipAuthentication": false,
          "redirectionData": {
            "returnUrl": "https://hostname.myownwebsite.url",
            "variant": "100"
        }
    }
  },
  "order": {
    "amountOfMoney": {
      "currencyCode": "EUR",
      "amount": 2300
    },
    "customer": {
      "billingAddress": {
        "countryCode": "NL"
      },
      "device": {
        "acceptHeader": "texthtml,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
        "browserData": {
          "colorDepth": 24,
          "javaEnabled": false,
          "screenHeight": "1200",
          "screenWidth": "1920"
        },
        "ipAddress": "123.123.123.123",
        "locale": "en-US",
        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1 Safari/605.1.15",
        "timezoneOffsetUtcMinutes": "420"
      },
      "locale": "en_US",
      "merchantCustomerId": "<Your ID of the consumer>"
    }
  }
}

{
  "mobilePaymentMethodSpecificInput": {
    "paymentProductId": "320",
    "requiresApproval": true
  },
    "paymentProduct320SpecificInput": {
        "threeDSecure": {
          "challengeIndicator": "no-preference",
          "challengeCanvasSize": "600x400",
          "skipAuthentication": false,
          "redirectionData": {
            "returnUrl": "https://hostname.myownwebsite.url",
            "variant": "100"
        }
    }
  },
  "order": {
    "amountOfMoney": {
      "currencyCode": "EUR",
      "amount": 2300
    },
    "customer": {
      "billingAddress": {
        "countryCode": "NL"
      },
      "device": {
        "acceptHeader": "texthtml,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
        "browserData": {
          "colorDepth": 24,
          "javaEnabled": false,
          "javaScriptEnabled": true,
          "screenHeight": "800",
          "screenWidth": "360"
        },
        "ipAddress": "123.123.123.123",
        "locale": "en-US",
        "userAgent": "Mozilla/5.0 (Linux; Android 10; SM-G980F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.101 Mobile Safari/537.36",
        "timezoneOffsetUtcMinutes": "420"
      },
      "locale": "en_US",
      "merchantCustomerId": "<Your ID of the consumer>"
    },
    "encryptedCustomerInput" : "<Encrypted string>" 
  }
}