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/{VERSION}/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.
   • countryCode: The shopper's country code.
   • configuration: Object that contains your Google Pay configuration.
     • For version 3.13.0 and later
       You no longer need to specify values for required fields like gatewayMerchantId and merchantId. Drop-in takes the values from the /paymentMethods response. However, if you specify the optional field merchantName, then you must also specify merchantId and gatewayMerchantId.
     • For versions earlier than 3.13.0, then the following are required:
       • configuration.gatewayMerchantId: The name of your Adyen merchant or company account.
       • configuration.merchantId: Your Google Merchant ID. Required for accepting live payments.
   • Version 3.13.0 and later
   • Earlier than 3.13.0

      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
              },
              countryCode: "NL",
              configuration: { //Provide this only if you need to send a merchantName
                gatewayMerchantId: "YourCompanyOrMerchantAccountName",  // Must be provided if you send a merchantName.
                merchantId: "12345678910111213141", // Must be provided if you send a merchantName. Remove this field 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');

     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
             },
             countryCode: "NL",
             configuration: {
               gatewayMerchantId: "YourCompanyOrMerchantAccount", //Your Adyen merchant or company account name.
               merchantId: "12345678910111213141", //Required in PRODUCTION. Remove this field 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');

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

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

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

Payment method support

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

Events

The following event handlers are supported for Google Pay.

    const dropin = checkout
        .create('dropin', {
          paymentMethodsConfiguration: {
            paywithgoogle:{
              onChange: (state) => {
              //Called after the shopper approves the payment on the Google Pay form
              },
              onSubmit: (state) => {
              //Called after the shopper approves the payment on the Google Pay form
              },
              onAuthorized: (data) => {},
          }
        }
    })
    .mount('#dropin');

Make a payment

When the shopper selects to pay, 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.
   • browserInfo: Required if you want to trigger 3D Secure authentication.
   • returnUrl: URL where the shopper will be redirected back to after completing a 3D Secure authentication. The URL should include the protocol: http:// or https://. For example, https://your-company.com/checkout/. You can also include your own additional query parameters, for example, shopper ID or order reference number.
   https://docs.adyen.com/payment-methods/google-pay/web-drop-in#google-pay-api

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

   curl Ruby Java PHP Python C# NodeJS

   curl https://checkout-test.adyen.com/v67/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",
       "googlePayToken": "{\"signature\":\"MEUCIFNbi10fa\\u003d\",\"protocolVersion\":\"ECv1\",\"signedMessage\":\"{\\\"encryptedMessage\\\":\\\"u4YsMQ4i56lTS..D+2m9vYwY\\\",\\\"ephemeralPublicKey\\\":\\\"BIwdzX4a+rC1DiKY6/8Y\\\\u003d\\\",\\\"tag\\\":\\\"pe0MF+z7\\\\u003d\\\"}\"}"
     },
      "{hint:Required for 3D Secure}browserInfo{/hint}":{
         "userAgent":"Mozilla\/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/70.0.3538.110 Safari\/537.36",
         "acceptHeader":"text\/html,application\/xhtml+xml,application\/xml;q=0.9,image\/webp,image\/apng,*\/*;q=0.8",
         "language":"nl-NL",
         "colorDepth":24,
         "screenHeight":723,
         "screenWidth":1536,
         "timeZoneOffset":0,
         "javaEnabled":true
      },
     "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",
       :googlePayToken => "{\"signature\":\"MEUCIFNbi10fa\\u003d\",\"protocolVersion\":\"ECv1\",\"signedMessage\":\"{\\\"encryptedMessage\\\":\\\"u4YsMQ4i56lTS..D+2m9vYwY\\\",\\\"ephemeralPublicKey\\\":\\\"BIwdzX4a+rC1DiKY6/8Y\\\\u003d\\\",\\\"tag\\\":\\\"pe0MF+z7\\\\u003d\\\"}\"}"
     },
     :browserInfo => {
       :userAgent => "Mozilla\/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/70.0.3538.110 Safari\/537.36",
       :acceptHeader => "text\/html,application\/xhtml+xml,application\/xml;q=0.9,image\/webp,image\/apng,*\/*;q=0.8",
       :language => "nl-NL",
       :colorDepth => 24,
       :screenHeight => 723,
       :screenWidth => 1536,
       :timeZoneOffset => 0,
       :javaEnabled => "true"
     },
     :merchantAccount => "YOUR_MERCHANT_ACCOUNT",
     :returnUrl => "https://your-company.com/checkout?shopperOrder=12xy..",
   })

   // 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);
   
       GooglePayDetails googlePayDetails = new GooglePayDetails();
   
       googlePayDetails.setGooglePayToken(state.data.paymentMethod.googlePayToken);
       paymentsRequest.setPaymentMethod(googlePayDetails);
   
       paymentsRequest.setReference("YOUR_ORDER_NUMBER");
       paymentsRequest.setReturnUrl("https://your-company.com/checkout?shopperOrder=12xy..");
   
       BrowserInfo browserInfo = new BrowserInfo();
       browserInfo.setUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36");
       browserInfo.setAcceptHeader("text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8");
       browserInfo.setLanguage("nl-NL");
       browserInfo.setColorDepth(24);
       browserInfo.setScreenHeight(723);
       browserInfo.setScreenWidth(1536);
       browserInfo.setTimeZoneOffset(0);
       browserInfo.setJavaEnabled(true);
   
       paymentsRequest.setBrowserInfo(browserInfo);
   
       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",
       "googlePayToken" => "{\"signature\":\"MEUCIFNbi10fa\\u003d\",\"protocolVersion\":\"ECv1\",\"signedMessage\":\"{\\\"encryptedMessage\\\":\\\"u4YsMQ4i56lTS..D+2m9vYwY\\\",\\\"ephemeralPublicKey\\\":\\\"BIwdzX4a+rC1DiKY6/8Y\\\\u003d\\\",\\\"tag\\\":\\\"pe0MF+z7\\\\u003d\\\"}\"}"
     ),
     "browserInfo" => [
       "userAgent" => "Mozilla\/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/70.0.3538.110 Safari\/537.36",
       "acceptHeader" => "text\/html,application\/xhtml+xml,application\/xml;q=0.9,image\/webp,image\/apng,*\/*;q=0.8",
       "language" => "nl-NL",
       "colorDepth" => 24,
       "screenHeight" => 723,
       "screenWidth" => 1536,
       "timeZoneOffset" => 0,
       "javaEnabled" => true
     ],
     "merchantAccount" => "YOUR_MERCHANT_ACCOUNT",
     "returnUrl" => "https://your-company.com/checkout?shopperOrder=12xy.."
   );
   $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',
         'googlePayToken': '{\"signature\":\"MEUCIFNbi10fa\\u003d\",\"protocolVersion\":\"ECv1\",\"signedMessage\":\"{\\\"encryptedMessage\\\":\\\"u4YsMQ4i56lTS..D+2m9vYwY\\\",\\\"ephemeralPublicKey\\\":\\\"BIwdzX4a+rC1DiKY6/8Y\\\\u003d\\\",\\\"tag\\\":\\\"pe0MF+z7\\\\u003d\\\"}\"}''
      },
     'browserInfo': {
         'userAgent': 'Mozilla\/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/70.0.3538.110 Safari\/537.36',
         'acceptHeader': 'text\/html,application\/xhtml+xml,application\/xml;q=0.9,image\/webp,image\/apng,*\/*;q=0.8',
         'language': 'nl-NL',
         'colorDepth': 24,
         'screenHeight': 723,
         'screenWidth': 1536,
         'timeZoneOffset': 0,
         'javaEnabled': 'true'
      },
      'returnUrl': 'https://your-company.com/checkout?shopperOrder=12xy..',
      '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 = "{\"signature\":\"MEUCIFNbi10fa\\u003d\",\"protocolVersion\":\"ECv1\",\"signedMessage\":\"{\\\"encryptedMessage\\\":\\\"u4YsMQ4i56lTS..D+2m9vYwY\\\",\\\"ephemeralPublicKey\\\":\\\"BIwdzX4a+rC1DiKY6/8Y\\\\u003d\\\",\\\"tag\\\":\\\"pe0MF+z7\\\\u003d\\\"}\"}"
   };
   
   var browserInfo = new Model.Checkout.BrowserInfo
   {
       UserAgent = @"Mozilla\/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/70.0.3538.110 Safari\/537.36",
       AcceptHeader = @"text\/html,application\/xhtml+xml,application\/xml;q=0.9,image\/webp,image\/apng,*\/*;q=0.8",
       Language = "nl-NL",
       ColorDepth = 24,
       ScreenHeight = 723,
       ScreenWidth = 1536,
       TimeZoneOffset = 0,
       JavaEnabled = true
   };
   
   var paymentRequest = new Adyen.Model.Checkout.PaymentRequest
   {
     Reference = "YOUR_ORDER_NUMBER",
     Amount = amount,
     ReturnUrl = @"https://your-company.com/checkout?shopperOrder=12xy..",
     MerchantAccount = "YOUR_MERCHANT_ACCOUNT",
     PaymentMethod = details
     BrowserInfo = browserInfo
   };
   
   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',
           googlePayToken: '{\"signature\":\"MEUCIFNbi10fa\\u003d\",\"protocolVersion\":\"ECv1\",\"signedMessage\":\"{\\\"encryptedMessage\\\":\\\"u4YsMQ4i56lTS..D+2m9vYwY\\\",\\\"ephemeralPublicKey\\\":\\\"BIwdzX4a+rC1DiKY6/8Y\\\\u003d\\\",\\\"tag\\\":\\\"pe0MF+z7\\\\u003d\\\"}\"}'
       },
       browserInfo:{
           userAgent: 'Mozilla\/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/70.0.3538.110 Safari\/537.36',
           acceptHeader: 'text\/html,application\/xhtml+xml,application\/xml;q=0.9,image\/webp,image\/apng,*\/*;q=0.8',
           language: 'nl-NL',
           colorDepth: 24,
           screenHeight: 723,
           screenWidth: 1536,
           timeZoneOffset: 0,
           javaEnabled: true
       },
       reference: "YOUR_ORDER_NUMBER",
       merchantAccount: config.merchantAccount,
       returnUrl: "https://your-company.com/checkout?shopperOrder=12xy.."
   }).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-component#-payments-response-for-a-card-that-requires-3d-secure-authentication

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

     {
       "resultCode": "RedirectShopper",
       "action": {
         "paymentMethodType": "scheme",
         "url": "https://test.adyen.com/hpp/3d/validate.shtml",
         "data": {
           "MD": "OEVudmZVMUlkWjd0MDNwUWs2bmhSdz09...",
           "PaReq": "eNpVUttygjAQ/RXbDyAXBYRZ00HpTH3wUosPfe...",
           "TermUrl": "https://example.com/checkout?shopperOrder=12xy..."
         },
         "method": "POST",
         "type": "redirect"
       }
     }
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. To learn how to handle the redirect, follow our Redirect 3D Secure guide.

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 have two different options:

• Login to a Google account and create a Google Pay wallet with valid card details.
• Use a sample card from Google's test card suite .

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 your API credential has the API Clientside Encryption Payments role. 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