Search

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

These instructions explain 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 yet done this integration, 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 test Customer Area.

Show Google Pay in your payment form

To show Google Pay Component in your payment form, you need to:

  1. Specify in your /paymentMethods request:

    Pass the full response to 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="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. 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, and mount it. You can also include optional configuration as described in the next section.

    const googlepay = checkout.create("paywithgoogle", {
        environment: "TEST",
        currencyCode: "EUR",
        amount: 1000,
        configuration: {
            gatewayMerchantId: "YourCompanyOrMerchantAccountName",  //Your Adyen merchant or company account name
            merchantIdentifier: "12345678910111213141", // Required for 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. 
    });

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

       googlepay
           .isAvailable()
           .then(() => {
               googlepay.mount("#googlepay-container");
           })
           .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.

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 to pay, the Component calls the onChange event, which contains a state.data.

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

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

    • paymentMethod: The state.data.paymentMethod from the onChange 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 onChange or 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 and use the createFromAction method. Otherwise, proceed to present the payment result to your shopper.

Cards with 3D Secure: Handle the redirect result

The Redirect Component 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