Google Pay Drop-in integration

Our Web Drop-in renders Google Pay in your payment form. When shoppers select Google Pay, Drop-in presents the Google Pay payment sheet where shoppers choose a card they want to use. If shoppers select a card that requires 3D Secure authentication, Drop-in also handles redirecting shoppers to another website to complete the verification.

When building your Google Pay integration, you also need to:

• Load the Google Pay API JavaScript library and add the required configuration for Google Pay.
• If the shopper makes a payment with a card that requires 3D Secure authentication,
  handle the redirect result after the shopper completes the verification and returns to your website.

Before you begin

This page explains how to add Google Pay to your existing Web Drop-in integration. The Web Drop-in integration works the same way for all payment methods. If you haven't done this integration yet, refer to our Drop-in integration guide.

Before starting your Google Pay integration:

1. Make sure that you have set up your back end implementation, and added Drop-in to your payments form.
2. Add Google Pay in your test Customer Area.

Show Google Pay in your payment form

1. Drop-in uses the countryCode and the amount.currency from your /paymentMethods request to show the available payment methods to your shopper. From your server, make a /paymentMethods request specifying:
   • countryCode: Country where Google Pay is supported. For example, NL.
   • amount.currency: Any supported currency. For example, EUR.
     
     

2. In your checkout page, load the Google Pay API JavaScript library before the Adyen JS script.

   <script src="https://pay.google.com/gp/p/js/pay.js"></script>
   <script src="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.4.0/adyen.js"></script>

3. When creating an instance of Drop-in, specify:

   • environment: TEST. Change this to PRODUCTION when you're ready to accept live payments.
   • amount: the currency and value of the transaction.
   • configuration.gatewayMerchantId: The name of your Adyen merchant or company account.
   • configuration.merchantIdentifier: Your Google Merchant ID. Required for accepting live payments.

   You can also include optional configuration as described in the next section.

     const dropin = checkout
       .create('dropin', {
         paymentMethodsConfiguration: {
           paywithgoogle: { // Example required configuration for Google Pay
             environment: "TEST", // Change this to PRODUCTION when you're ready to accept live Google Pay payments
             amount: {
               currency: "EUR",
               value: 1000
             },
             configuration: {
               gatewayMerchantId: "YourCompanyOrMerchantAccount", // Your Adyen merchant or company account name
               merchantIdentifier: "12345678910111213141", // Required for PRODUCTION. Remove this object in TEST. Your Google Merchant ID as described in https://developers.google.com/pay/api/web/guides/test-and-deploy/deploy-production-environment#obtain-your-merchantID
               merchantName: "YourMerchantName" // Optional. The name that appears in the payment sheet.
             },
             buttonColor: "white" //Optional. Use a white Google Pay button.
             //For other optional configuration, see section below.
           }    
       ...
     })
     .mount('#dropin');

Optional Drop-in configuration

When creating an instance of Drop-in, you can also configure the following Google Pay API parameters:

• The merchant name that appears on the Google Pay payment sheet.
• The Google Pay button appearance.
• Your payment requirements.
• The card types and payment methods that you accept.
• Event handlers to use.

Merchant info

Configure the merchant name rendered in the payment sheet. See MerchantInfo for more details.

Button options

Configure the Google Pay button. See ButtonOptions for more details.

Payment data

Configure your payment requirements. See PaymentDataRequest for more details.

Card parameters V 2.2.0

Configure accepted card types. See Card Parameters for more details.

Payment method support V 2.2.0

Specify which payment methods are supported. See IsReadyToPayRequest for more details.

Events

Google Pay Component supports the following event handlers on the payment form.

{
   ...
    onChange: (state) => {

    },
    onAuthorized: (data) => {

    },
    ...
}

Make a payment

When the shopper selects the Pay button, Drop-in calls the onSubmit event, which contains a state.data.

1. Pass the state.data to your server.

2. From your server, make a /payments request, specifying:

   • paymentMethod: The state.data.paymentMethod from the onSubmit event from your front end.
   https://docs.adyen.com/payment-methods/google-pay/web-drop-in#google-pay-api

   • curl
   • Ruby
   • Java
   • PHP
   • Python
   • C#
   • NodeJS

   curl https://checkout-test.adyen.com/v51/payments \
   -H "x-API-key: YOUR_X-API-KEY" \
   -H "content-type: application/json" \
   -d '{
     "merchantAccount":"YOUR_MERCHANT_ACCOUNT",
     "reference":"YOUR_ORDER_NUMBER",
     "amount":{
       "currency":"EUR",
       "value":1000
     },
     "{hint:state.data.paymentMethod from onSubmit}paymentMethod{/hint}":{
       "type":"paywithgoogle",
       "paywithgoogle.token": "QWIwMmI0YzAhQlFBQkFnQjMv.."
     },
     "returnUrl":"https://your-company.com/checkout?shopperOrder=12xy..",
   }'

   # Set your X-API-KEY with the API key from the Customer Area.
   adyen = Adyen::Client.new
   adyen.api_key = "YOUR_X-API-KEY"
    
   response = adyen.checkout.payments({
     :amount => {
       :currency => "EUR",
       :value => 1000
     },
     :reference => "YOUR_ORDER_NUMBER",
     :paymentMethod => {
       :type => "paywithgoogle",
       :paywithgoogle.token => "QWIwMmI0YzAhQlFBQkFnQjMv.."
     },
     :merchantAccount => "YOUR_MERCHANT_ACCOUNT"
   })

   // Set YOUR_X-API-KEY with the API key from the Customer Area.
   // Change to Environment.LIVE and add the Live URL prefix when you're ready to accept live payments.
       Client client = new Client("YOUR_X-API-KEY", Environment.TEST);
       Checkout checkout = new Checkout(client);
   
       PaymentsRequest paymentsRequest = new PaymentsRequest();
   
       String merchantAccount = "YOUR_MERCHANT_ACCOUNT";
       paymentsRequest.setMerchantAccount(merchantAccount);
   
       Amount amount = new Amount();
       amount.setCurrency("EUR");
       amount.setValue(15000L);
       paymentsRequest.setAmount(amount);
   
       DefaultPaymentMethodDetails paymentMethodDetails = new DefaultPaymentMethodDetails();
       paymentMethodDetails.setType("paywithgoogle");
       paymentMethodDetails.setGooglepayToken("QWIwMmI0YzAhQlFBQkFnQjMv..")
       paymentsRequest.setPaymentMethod(paymentMethodDetails);
   
       paymentsRequest.setReference("YOUR_ORDER_NUMBER");
   
       PaymentsResponse paymentsResponse = checkout.payments(paymentsRequest);

   // Set your X-API-KEY with the API key from the Customer Area.
   $client = new \Adyen\Client();
   $client->setXApiKey("YOUR_X-API-KEY");
   $service = new \Adyen\Service\Checkout($client);
   
   $params = array(
     "amount" => array(
       "currency" => "EUR",
       "value" => 1000
     ),
     "reference" => "YOUR_ORDER_NUMBER",
     "paymentMethod" => array(
       "type" => "paywithgoogle",
       "paywithgoogle.token" => "QWIwMmI0YzAhQlFBQkFnQjMv.."
     ),
     "merchantAccount" => "YOUR_MERCHANT_ACCOUNT"
   );
   $result = $service->payments($params);

   #Set your X-API-KEY with the API key from the Customer Area.
   adyen = Adyen.Adyen()
   adyen.client.xapikey = 'YOUR_X-API-KEY'
   
   result = adyen.checkout.payments({
      'amount': {
         'value': 1000,
         'currency': 'EUR'
      },
      'reference': 'YOUR_ORDER_NUMBER',
      'paymentMethod': {
         'type': 'paywithgoogle',
         'applepay.token': 'QWIwMmI0YzAhQlFBQkFnQjMv..'
      },
      'merchantAccount': 'YOUR_MERCHANT_ACCOUNT'
   })

   // Set your X-API-KEY with the API key from the Customer Area.
   var client = new Client ("YOUR_X-API-KEY", Environment.Test);
   var checkout = new Checkout(client);
   
   var amount = new Model.Checkout.Amount("EUR", 1000);
   var details = new Model.Checkout.DefaultPaymentMethodDetails{
     Type = "paywithgoogle",
     GooglePayToken = "QWIwMmI0YzAhQlFBQkFnQjMv.."
   };
   var paymentsRequest = new Model.Checkout.PaymentRequest
   {
     Reference = "YOUR_ORDER_NUMBER",
     Amount = amount,
     MerchantAccount = "YOUR_MERCHANT_ACCOUNT",
     PaymentMethod = details
   };
   
   var paymentResponse = checkout.Payments(paymentsRequest);

   // Set your X-API-KEY with the API key from the Customer Area.
   const {Client, Config, CheckoutAPI} = require('@adyen/api-library');
   const config = new Config();
   // Set your X-API-KEY with the API key from the Customer Area.
   config.apiKey = '[API_KEY]';
   config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
   const client = new Client({ config });
   client.setEnvironment("TEST");
   const checkout = new CheckoutAPI(client);
   checkout.payments({
       amount: { currency: "EUR", value: 1000 },
       paymentMethod: {
           type: 'paywithgoogle',
           paywithgoogle.token: 'QWIwMmI0YzAhQlFBQkFnQjMv..'
       },
       reference: "YOUR_ORDER_NUMBER",
       merchantAccount: config.merchantAccount
   }).then(res => res);

   The response contains the result of the payment.

   https://docs.adyen.com/payment-methods/google-pay/web-drop-in#-payments-response

   • /payments response

   {
     "pspReference": "881539337151149C",
     "resultCode": "Authorised"
   }

   If the shopper used a card that requires 3D Secure authentication before the payment can be completed, you receive an action.type redirect in the response.

   https://docs.adyen.com/payment-methods/google-pay/web-drop-in#-payments-response-for-a-card-that-requires-3d-secure-authentication

   • /payments response for a card that requires 3D Secure authentication

    {
      "resultCode": "RedirectShopper",
      "action": {
        "data": {
          "MD": "NGNsQ2QzN3hxMGtVN2lueUV5QWo3UT..",
          "PaReq": "eNpVUttygjAQ/RXrB5CES1..",
          "TermUrl": "https://your-company.com/checkout?shopperOrder=12xy.."
        },
        "method": "POST",
        "paymentData": "Ab02b4c0!BQABAgA2ndtJW6...==",
        "paymentMethodType": "scheme",
        "type": "redirect",
        "url": "https://test.adyen.com/hpp/3d/validate.shtml"
      },
      "details": [
        {
          "key": "MD",
          "type": "text"
        },
        {
          "key": "PaRes",
          "type": "text"
        }
      ],
      ...
    }
3. If you received an action object, pass the action object to your front end. Otherwise, proceed to present the payment result to your shopper.

Cards with 3D Secure: Handle the redirect result

Drop-in usesdropin.handleAction(action) to redirect the shopper to another page where they can complete the 3D Secure authentication. After the shopper is redirected back to your website, check the redirect result.

• From your server, make a POST /payments/details request, specifying:
  • paymentData: Value you received in the /payments response.
  • details: Object that contains the URL-decoded values of the parameters that were returned when the shopper was redirected back to your site. For example, payload. To check the parameters that you should submit, refer to the details.key returned in the /payments response.
  https://docs.adyen.com/payment-methods/online-banking-india/web-drop-in#-payments-details-request

  • /payments/details request

  {
       "paymentData":"Ab02b4c0!BQABAgCJN1wRZuGJmq8dMncmypvknj9s7l5Tj...",
       "details":{
         "{hint:Verify the parameters from /payments response}payload{/hint}":"Ab02b4c0!BQABAgCW5sxB4e/=="
       }
  }

  You receive a response containing:
  • resultCode: Use this to present the result to your shopper.
  • pspReference: Our unique identifier for the transaction.
  https://docs.adyen.com/payment-methods/online-banking-india/web-drop-in#-payments-details-response

  • /payments/details response

   {
     "resultCode": "Authorised",
     "pspReference": "88154795347618C"
   }

Present the payment result

Use the resultCode that you received in the /payments or /payments/details response to present the payment result to your shopper.

The resultCode values you can receive for Google Pay are:

Recurring payments

To make recurring Google Pay payments, you first need to create a shopper token and then make subsequent recurring transactions with the token.

Refer to Tokenization for more information and detailed instructions.

Test and go live

To test Google Pay, you must:

• Login to a Google account.
• Create a Google Pay wallet with valid card details. Google Pay does not accept test cards.

You can check the status of a Google Pay test payment in your Customer Area > Transactions > Payments.

For more information, see Google Pay's test environment setup for Web.

Before you go live

1. Make sure you have the API Clientside Encryption Payments role enabled for your web service user. Check this in your live Customer Area or ask your Admin user to verify.
2. You must complete all of the steps in the Google Pay API deploy to production documentation for Web.
3. Contact our Support Team and submit a request to configure your Google Pay merchantID .

In the live environment, note that Google Pay will only be available if:

• The shopper is logged in to their Google account.
• The shopper has at least one valid payment method on their Google Pay account.

See also