Are you looking for test card numbers?

Would you like to contact support?

Payment-method icon

Google Pay Component

Add Google Pay to an existing Components integration.

Our Google Pay Component renders Google Pay in your payment form. When shoppers select Google Pay, the Component 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, the Redirect Component 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 Components integration. The Web Components integration works the same way for all payment methods. If you haven't done this integration yet, refer to our Components integration guide.

Before starting your Google Pay integration:

  1. Make sure that you have set up your back end implementation, and created an instance of AdyenCheckout.
  2. Add Google Pay in your Customer Area.

Show Google Pay in your payment form

To present the Google Pay Component in your payment form:

  1. From your server, make a POST /paymentMethods request specifying:

  1. Pass the full response from the /paymentMethods call as the paymentMethodsResponse object when creating an instance of the AdyenCheckout.

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

    <script src=""></script>
    <script src=""></script>
  3. Add the Google Pay Component:

    a. Create a DOM element for Google Pay, placing it where you want the form to be rendered:

    <div id="googlepay-container"></div>

    b. Create an instance of the Google Pay Component using its component name, paywithgoogle, along with the following configuration:

    • 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.
    • If you are using a Google Pay Web Component version earlier than v 3.13.0:
      • configuration.merchantIdentifier: Your Google Merchant ID. Required for accepting live payments.

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

    const googlepay = checkout.create("paywithgoogle", {
        environment: "TEST", //Change this to PRODUCTION when you're ready to accept live Google Pay payments.
        amount: {
          currency: "EUR",
          value: 1000
        configuration: {
            gatewayMerchantId: "YourCompanyOrMerchantAccountName",  //Your Adyen merchant or company account name.
            merchantIdentifier: "12345678910111213141", //Required in PRODUCTION for Component versions earlier than 3.13.0. Remove this field in TEST. Your Google Merchant ID as described in
            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.

    c. Check whether Google Pay is available to the shopper. If it is, mount the Component:

           .then(() => {
           .catch(e => {
               //Google Pay is not available

    Do not mount the Component if Google Pay is not available to the shopper.

Optional Component configuration

With the Google Pay Component, 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.

Configuration object Description
configuration.merchantName The merchant name you want displayed in the 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 The color of the button you want displayed on the payment form.

Payment data

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.
shippingOptionRequired Set to true if you want to present shipping options in the payment sheet.
shippingOptionParameters Set shipping options and a default shipping option to be shown in the payment sheet.

Card parameters

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'].
allowCreditCards Default is true. Set this to false if you don't support credit cards.
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 The expected fields returned if billingAddressRequired is set to true. For more information on the available fields, see Google Pay API documentation on billingAddressParameters.

Payment method support

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

Configuration object Description
existingPaymentMethodRequired Default is true.


The following event handlers are supported for Google Pay.

Event Description
onClick(resolve, reject) Called when the shopper clicks the Google Pay button. Call resolve() or reject() to continue or stop the payment flow.
onChange or onSubmit Called after the shopper approves the payment on the Google Pay form. The first parameter (state) of this function contains all the necessary data to make a payment using the /payments API.
onAuthorized Called after the shopper approves the payment on the Google Pay form. Contains the full response from Google Pay. Use this if you need additional data such as the shipping address or the shopper email.
Optional Google Pay events
  //onSubmit or onChange defined in your AdyenCheckout instance
  const googlepay = checkout.create("paywithgoogle", {
      onAuthorized: (data) => {},

Make a payment

When the shopper selects to pay, the Component calls the onChange event, which contains a

  1. If state.isValid is true, collect the and pass this to your server.

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

    • paymentMethod: The from the onChange event from your front end.

    Here is how you would make a payment request for 10 EUR.

    curl \
    -H "x-API-key: YOUR_X-API-KEY" \
    -H "content-type: application/json" \
    -d '{
      "{ from onChange or onSubmit}paymentMethod{/hint}":{
        "googlePayToken": "QWIwMmI0YzAhQlFBQkFnQjMv.."
    # Set your X-API-KEY with the API key from the Customer Area.
    adyen =
    adyen.api_key = "YOUR_X-API-KEY"
    response = adyen.checkout.payments({
      :amount => {
        :currency => "EUR",
        :value => 1000
      :reference => "YOUR_ORDER_NUMBER",
      :paymentMethod => {
        :type => "paywithgoogle",
        :googlePayToken => "QWIwMmI0YzAhQlFBQkFnQjMv.."
      :returnUrl => "",
      :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";
        Amount amount = new Amount();
        GooglePayDetails googlePayDetails = new GooglePayDetails();
        PaymentsResponse paymentsResponse = checkout.payments(paymentsRequest);
    // Set your X-API-KEY with the API key from the Customer Area.
    $client = new \Adyen\Client();
    $service = new \Adyen\Service\Checkout($client);
    $params = array(
      "amount" => array(
        "currency" => "EUR",
        "value" => 1000
      "reference" => "YOUR_ORDER_NUMBER",
      "paymentMethod" => array(
        "type" => "paywithgoogle",
        "googlePayToken" => "QWIwMmI0YzAhQlFBQkFnQjMv.."
      "merchantAccount" => "YOUR_MERCHANT_ACCOUNT",
      "returnUrl" => ""
    $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': 'QWIwMmI0YzAhQlFBQkFnQjMv..'
       'returnUrl': '',
       '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 paymentRequest = new Adyen.Model.Checkout.PaymentRequest
      Reference = "YOUR_ORDER_NUMBER",
      Amount = amount,
      ReturnUrl = @"",
      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 });
    const checkout = new CheckoutAPI(client);
        amount: { currency: "EUR", value: 1000 },
        paymentMethod: {
            type: 'paywithgoogle',
            googlePayToken: 'QWIwMmI0YzAhQlFBQkFnQjMv..'
        reference: "YOUR_ORDER_NUMBER",
        merchantAccount: config.merchantAccount,
        returnUrl: ""
    }).then(res => res);

    The response contains the result of the payment.

    /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.

    /payments response for a card that requires 3D Secure authentication
       "resultCode": "RedirectShopper",
       "action": {
         "data": {
           "MD": "NGNsQ2QzN3hxMGtVN2lueUV5QWo3UT..",
           "PaReq": "eNpVUttygjAQ/RXrB5CES1..",
           "TermUrl": ""
         "method": "POST",
         "paymentData": "Ab02b4c0!BQABAgA2ndtJW6...==",
         "paymentMethodType": "scheme",
         "type": "redirect",
         "url": ""
       "details": [
           "key": "MD",
           "type": "text"
           "key": "PaRes",
           "type": "text"
  3. If you received an action object, pass the action object to your front end and use the createFromAction method. Otherwise, proceed to present the payment result to your shopper.

Cards with 3D Secure: Handle the redirect result

When a payment requires 3D Secure authentication, the Component redirects the shopper to another page where they can complete the authentication.

Handling the redirect works the same way for all redirect payment methods:

  1. Call createFromAction, passing the action object from the previous step. This will return a new Component that you need to mount:
    The Component redirects the shopper to Google Pay to complete the payment.
  2. After the shopper is redirected back to your website, check the payment result by making a POST /payments/details request, specifying:
    • paymentData: The value from 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 or redirectResult.
    The parameters can vary based on the payment method configuration. To check which parameters you should submit, always check the details array from the /payments response.
    /payments/details request
            "{hint:Verify the parameters from /payments response}payload{/hint}":"Ab02b4c0!BQABAgCW5sxB4e/=="
    The /payments/details response contains:
    • resultCode: Use this to present the payment result to your shopper.
    • pspReference: Our unique identifier for the transaction.
    /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:

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