Forbes India Leader Recognition
e.preventDefault(); // Prevent form submission input.blur(); // remove focus input.value = ""; // optional: clear the input

Google Pay integration for web applications

Google Pay integration for web applications

Featured Image

In this blog, we are going to integrate the Google Pay payment method in our PHP website using AuthorizeDotNet. We will mainly focus on what to do after generating the payment token. To add a Google Pay button and generate a payment token you can visit the official website.

Google Pay

Google Pay is one of the easiest options available to accept payments. Users can make payments on your website using their credit or debit cards saved in their Google account.

Users don’t have to manually enter their payment information on your site. Instead, their payment data, such as their email, name, billing, and shipping addresses, are already present in a payments selection dialog that is displayed to the user. When the user selects their payment type, the API returns the payment information through a supported payment gateway, or it’s directly processed on your encrypted secure server.

Getting started

To get started you need to have a merchant account on AuthorizeDotNet. Also, you need to request production access from here. More Detailed information can be found in the official docs, https://developers.google.com/pay/api/web/overview.

After your website is approved, you will receive a Google merchant ID that must be included with each Google Pay API request.

Also, you will need a supported payment gateway which you can lookup from supported processors and gateways list. Here we are going to use AuthorizeDotNet as a payment gateway.

The Payment Flow:

  1. User clicks on the Google Payment Button which opens a payment sheet with a list of supported payment methods.
  2. A payment token is generated after the selection of one of the payment methods available.
  3. The payment token gets submitted by your website, along with the details about the purchase, to its backend.
  4. For executing the payment, the processing of purchase is done by the backend and the payment token is sent to the payment service provider.

Google_Pay_integration_for_web_applications_01

Integration:

Follow this tutorial to successfully integrate Google Pay API in your web application.-

  • Step 1: Define the version for Google Pay API.
  • Step 2: Choose a payment tokenization method.
    In step 2, since we are using AuthorizeDotNet, we need to make the following changes. Details can be found here.
    To know how to check your gateway merchant Id visit What Is My Payment Gateway ID?

    const tokenizationSpecification = {
    
                    type: 'PAYMENT_GATEWAY',
    
                    parameters: {
    
                        'gateway': 'authorizenet',
    
                        'gatewayMerchantId': '[your Authorize.Net payment gateway ID]’
    
                    }
    
                };
  • Step 3: Define supported payment card networks.
  • Step 4: Describe your allowed payment methods.
  • Step 5: Load the JavaScript library for Google Pay API.
  • Step 6: Determining the readiness to pay with Google Pay.
  • Step 7: Add a Google Pay payment button.
    Be sure to go through the brand guidelines while adding the Google Pay button.
  • Step 8: Create a PaymentDataRequest object.
  • Step 9: Registering an event handler for user gestures. In this step, a payment token will be generated which we will pass to the payment gateway without any modifications.

After performing the above steps, In the last step, i.e, obtaining the payment token we need to pass it to the gateway without any modifications.

Below is the minimum required configuration to setup and enable transactions using AuthorizeDotNet.

// Common setup for API credentials

$merchantAuthentication = new AnetAPI\MerchantAuthenticationType();

$merchantAuthentication->setName('authorize.net Login Id');

$merchantAuthentication->setTransactionKey('authorize.net Transaction key');

$refId = 'ref'. time();

You can get the required customer information from the form on your website that the customer needs to fill before proceeding to the payment method.

// Customer info

$customer = new AnetAPI\CustomerDataType();

$customer->setId('customer Id');

$customer->setEmail('email');

// Order info

$order = new AnetAPI\OrderType();

$order->setInvoiceNumber('Invoice number');

$order->setDescription('description');

// Bill To

$billTo = new AnetAPI\CustomerAddressType();

$billTo->setFirstName('firstName');

$billTo->setLastName('lastName');

$billTo->setAddress('billingAddress’);

$billTo->setCity('billingCity');

$billTo->setZip('billingPostcode');

$billTo->setState('billingState');

$billTo->setCountry('billingCountry');

$billTo->setEmail('email');

$billTo->setPhoneNumber('billingPhone');

Here we will receive the payment token that is generated in step 9 when the user clicks on the Google Pay button. We need to encode the token into base64. This encoding is done in order to transmit the data without loss or modification of the contents itself.

// Google Pay Token Request

$token = 'token';

$op = new AnetAPI\OpaqueDataType();

$op->setDataDescriptor("COMMON.GOOGLE.INAPP.PAYMENT");

$paymentToken = (base64_encode($token));

$op->setDataValue($paymentToken);

$payment = new AnetAPI\PaymentType();

$payment->setOpaqueData($op);

Then the data is sent to the AuthorizeDotNet after a successfully completed transaction.

//create a transaction

$transactionRequestType = new AnetAPI\TransactionRequestType();

$transactionRequestType->setTransactionType("authCaptureTransaction");

$transactionRequestType->setAmount("total amount");

$transactionRequestType->setPayment($payment);

$transactionRequestType->setBillTo($billto);

$transactionRequestType->setCustomer($customer);

$transactionRequestType->setOrder($order);

$request = new AnetAPI\CreateTransactionRequest();

$request->setMerchantAuthentication($merchantAuthentication);

$request->setRefId($refId);

$request->setTransactionRequest($transactionRequestType);

// Create the controller and get the response

$controller = new AnetController\CreateTransactionController($request);

$response = $controller->executeWithApiResponse($transactionMode);

if ($response != null) {

   if ($response->getMessages()->getResultCode() == "Ok") {

       ...

       if ($tResponse != null && $tResponse->getMessages() != null) {

           ...

           return true;

       } else {

           if ($tResponse->getErrors() != null) {

               ...

           }

       }

       ...

   }

   ...

}

Things to keep in mind

  • Follow the Brand guidelines while adding the Google Pay button.
  • Accepting Google Pay Terms and services.
  • After obtaining a payment network token from Google Pay, encode the token’s blob with base64.
  • Don’t forget to go through the Integration checklist available on the official docs before deploying on the production server to avoid any kind of errors.

Related Posts

Latest Posts

  • All Posts
  • AI Powered Knowledge
  • ai/ml
  • CEO India Magazine
  • CMMI level 5 Certification
  • e-learning
  • Fintech
  • gaming
  • Generative AI
  • healthcare
  • manufacturing
  • News
  • OTT
  • Portfolio
  • supply chain
  • travel and hospitality
  • Tudip's AI Hackathon
  • Voxlearn Enterprises
    •   Back
    • Android
    • iOS
    • Java
    • PHP
    • MEAN
    • Ruby
    • DotNet
    • IoT
    • Cloud
    • Testing
    • Roku
    • CMS
    • Python
The Future of Workplace Learning: AI-Powered Knowledge on Demand

The Future of Workplace Learning: AI-Powered Knowledge on Demand

June 12, 2026

A few months ago, I was sitting in a meeting with a team lead who looked genuinely frustrated. Not because…

Read More
We Built VoXlearn Because Enterprise Training Was Broken: Here’s What We Did About It

We Built VoXlearn Because Enterprise Training Was Broken: Here’s What We Did About It

June 12, 2026

If you’ve ever sat through an end-of-quarter training report and thought, “We spent all that time and money, and this…

Read More
We Did It Again: Tudip Successfully Renews Its CMMI Level 5 Certification

We Did It Again: Tudip Successfully Renews Its CMMI Level 5 Certification

June 9, 2026

Nobody around here needed a memo to know something worth celebrating had happened. The message from the CMMI Institute said…

Read More

India

Plot No. 11/2, Phase 3, Hinjewadi Rajiv Gandhi Infotech Park, Pune, India – 411057.
info@tudip.com
+91-96-8990-0537

United States

1999 S. Bascom Ave Suite 700, Campbell CA. 95008, USA.
info@tudip.com
+1-408-216-8162

Canada

64 Caracas Road North York, Toronto Ontario M2K 1B1, Canada.
info@tudip.com

Mexico

Calle Amado Nervo #785 Interior B Colonia Ladron De Guevara 44600 Guadalajara, Jalisco, Mexico.
info@tudip.com

Singapore

77 High Street, #10-12B High Street Plaza, Singapore 179433.
info@tudip.com

Colombia

Cra. 9 # 113-53 Of. 1405 Bogotá D.C., Colombia.
info@tudip.com

UAE

Tudip Information Technologies L.L.C Office No 109, ABU HAIL BUILDING 13, Abu Hail, Dubai, UAE.
info@tudip.com

Nigeria

22 Kumasi Crescent, Wuse 2, Abuja, Nigeria.
info@tudip.com