Google Pay Web Integration

Google Pay™, when integrated in a webstore, allows customers to use Google Wallet to pay for their purchases. The Google Pay API enables fast, simple checkout on a retail website. Hundreds of millions of cards are saved to Google Accounts worldwide, and Google Pay integration makes it convenient for customers to use those cards for webstore payments.

How it works

When a user taps the Google Pay payment button, the website displays a payment sheet with the payment methods saved to the user's Google Account. The payment sheet also includes optional fields, such as shipping address. The user can select a payment method quickly, provide a shipping address, if required, and add new information.

Using Google Pay, shoppers don't have to manually enter their payment information on your site. Instead, their payment information, including name, email, and billing and shipping addresses, are pre-entered in a payments selection dialog that's displayed to the shopper. After the shopper selects a payment method, the API returns the payment information through a supported payments gateway, or the payment can be directly processed on your encrypted secure server.

When you integrate with the Google Pay API, you offer a one-touch checkout experience to hundreds of millions of Google users who have their credit or debit card payment information saved in their Google accounts.

To integrate Google Pay Web API with your webstore's checkout, follow the process detailed below.

Prerequisites for Google Pay Web Integration

  • Serve an HTTPS webpage with a latest version of TLS domain-validated certificate.
  • Use one of the following supported web browsers: Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, Opera, or UCWeb UC Browser.

Radial-Supported Card Networks and Auth Methods

Google Pay offers two card authorization methods, PAN_ONLY and CRYPTOGRAM_3DS, and Radial supports both of these methods. Radial accepts four card networks: Amex, Discover, MasterCard, and Visa, for transactions settled in United States and Canada (USD, CAD). To specify these settings for your webstore, follow the instructions below in Step 1: Google Pay API Setup.

Google Pay JS API

Several steps are involved in integrating a web application with the Google Pay JS API and configuring it to accept payment cards. For details of each step, see the following sections.

  1. Set up the Google Pay API.

  2. Load the API, determine the readiness of API, and display the Google Pay button.

  3. Create the payment data request object.

  4. Display the Google Pay button in the browser.

  5. After the shopper clicks the Google Pay button and makes a payment, handle the response from the Google Pay API.

As you add Google Pay to your website, refer to these resources from Google:

Step 1: Google Pay API setup

Step 2: Load the API, determine the readiness of API and display Google Pay web button

Step 3: Create payment data request object

Step 4: Display Google Pay button on browser

Step 5: Click Google Pay button, make a payment and handle the response from the Google Pay API

Example Response from Google Pay API

{
   "signature":"MEUCICx6HeNozaC9OlbQ/auODUSMM3LMbIG6ifR92n1Sg6wsAiEAhMUCzr65DJEaq1kzvYRhqB2OjgUF0KTOfe0J9wE2sUk\u003d",
   "intermediateSigningKey":{
      "signedKey":"{\"keyValue\":\"MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAENmrxs4pIO3t5U69sDzzPuxQBiF8L16Qq7N7ngwaIA8c9MPaU5T28TOtthYZbx5OxmhKxX+ENC7TOv4ctIU8v1Q\\u003d\\u003d\",\"keyExpiration\":\"1583311459742\"}",
      "signatures":[
         "MEYCIQCQaFdqxE5qvi239ARVW08jgN3kd2Mu82mxT71yekL5KAIhANQv5GN8B+ZybzTf+bmmP/nLkVMXZOkVAcpA0xxw/5N/"
      ]
   },
   "protocolVersion":"ECv2",
   "signedMessage":"{\"encryptedMessage\":\"Rv9kJ8ppjdTU75ScLQNl7NrRxCM0rTb/Vrqrv8ojo9E2RKzvcjF7XzXwtWsW19Su0PLcVUViZBQ4hrbdTWzkgvUZt5dUTdlXf5Oc/IiaZXCHhcNJxOOzTdIVQ4z585zAqC75XeE5g/9Nj/LN8gvTt39AyGicTh7sEu4v5Y2/VMqY/LGZSrt7Hrva6kb+Gh0F0CB1+97GWjAb1ocoIQqIP9LyS2ZxZ1gbxqa65r5U8+EfUIrG/KXcmZjjMPeaWsRnp2qR3dLWXz6ERZTvDHwUYUg8q6A5BfAjw7jzxvpWQYA3TduVraIWGuMUG58rHGY86fk4m+4F0dEDHW1wypawFQISinGlkuEiFEHq09oXQ19dRxqqaE0KR6VmFEoUHp3iPcpjhOsC8583STBh8eVMCH49Ws18ZdgSTrZ4lKqDPOYpgblKf1cq5cHQysHGLVvDJULurPy2GvwF1jbC1tZQ26jE0joXlepF\",\"ephemeralPublicKey\":\"BHkCxK41VgmFSyQRozlf7jm0Kqm9S6VbyVwB6UzyS4pWw5oOj9LNrwHRqI2GgUnZ5GUhJmiMCkD89dph+OBXgMg\\u003d\",\"tag\":\"Gv3Y4yyc2w5z3BOqURQWFp7f3sHWzzkET/EnefgAWvY\\u003d\"}"
}

Example combining all code snippets

Subsequent Processing

The main goal of the Google Pay web integration above is to obtain the tokenization data block in JSON format. That block is then parsed and used to create a Radial CreditCardAuthRequest (Credit Card Authorization) using the WalletPaymentInformation data block. More information about mapping json response with Radial CreditCardAuthRequest can be found here: Google Pay Processing

Google Pay Production Setup

Although Google Pay API test configuration doesn't return live and chargeable payment information, it does allow you to test elements of your purchase workflow such as Confirmation pages, Receipts, and Billing and Shipping information. Google Pay API test payloads can be used to test your integration with Radial. Radial's test systems will accept these values since they are syntactically valid.

After your application has been set to Production environment, the payloads returned will match the card information sent to Google Pay and can be used to fully test the Radial integration with non-test values. To set up production access, complete Google's request form. More information can be found here: Request Production Access.

Google does not provide test cards. If you need chargeable test cards, please reach out to your acquiring bank .

For more information on Google Pay Web Integration, see the Google Pay JS API at https://developers.google.com/pay/api/web/guides/tutorial.