Search

Are you looking for test card numbers?

Would you like to contact support?

Payment-method icon

Google Pay Drop-in integration

Add Google Pay to an existing 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:

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:
  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.2.0/adyen.js"></script>
  3. When creating an instance of Drop-in, add the required Google Pay configuration.
      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
              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.

Merchant info

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

Configuration object Description
configuration.merchantName The merchant name you want to appear on the Google Pay payment sheet.

Button options

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

Configuration object Description
buttonType The type of button you want displayed on your payments form. 
buttonColor Specify the color of the button you want displayed on the payment form.

Payment data request

Configure your payment requirements. See PaymentDataRequest for more details.

Configuration object Description
emailRequired Set this to true if you want to collect the shopper's email address.
shippingAddressRequired Set to true to request the shopper's full shipping address.
shippingAddressParameters Set any shipping restrictions.

Card parameters V 2.2.0

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

Configuration object Description
allowedAuthMethods Specify supported authentication methods. Default value is ['PAN_ONLY', 'CRYPTOGRAM_3DS'].
allowedCardNetworks Specify allowed card networks. Default value is ['AMEX', 'DISCOVER', 'JCB', 'MASTERCARD', 'VISA'].
allowPrepaidCards Default is true. Set this to false if you don't support prepaid cards.
billingAddressRequired Set this to true if you require a billing address.
billingAddressParameters he expected fields returned if billingAddressRequired is set to true. For more information on the available fields, see Google Pay API billingAddressParameters documentation.

Payment method support V 2.2.0

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

Configuration object Description
existingPaymentMethodRequired Default is true.

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.
    curl https://checkout-test.adyen.com/v50/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.

    {
      "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.

     {
       "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 uses the action object to redirect the shopper to another page where they can complete the 3D Secure authentication. After the shopper is redirected back to your website, you need to check the payment result by making a /payments/details request.

For more information and detailed instructions, refer to Handling the redirect result.

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:

resultCode Description Action to take
Authorised The payment was successful. Inform the shopper that the payment has been successful.
Error There was an error when the payment was being processed. Inform the shopper that there was an error processing their payment. The response contains a refusalReason, indicating the cause of the error.
Refused The payment was refused by the shopper's bank. Ask the shopper to try the payment again using a different payment method.

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 real 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