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:
- Make sure that you have set up your back end implementation, and added Drop-in to your payments form.
- Add Google Pay in your test Customer Area.
Show Google Pay in your payment form
- Drop-in uses the
countryCode
and theamount.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.
-
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.18.2/adyen.js"></script>
-
When creating an instance of Drop-in, specify:
environment
: TEST. Change this to PRODUCTION when you're ready to accept live payments.amount
: thecurrency
andvalue
of the transaction.configuration.gatewayMerchantId
: The name of your Adyen merchant or company account.- If you are using a Google Pay Web Drop-in 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 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 in PRODUCTION for Drop-in versions earlier than 3.13.0. 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');
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.
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. |
Events
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. |
{
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) => {},
...
}
Make a payment
When the shopper selects the Pay button, Drop-in calls the onSubmit
event, which contains a state.data
.
-
Pass the
state.data
to your server. -
From your server, make a /payments request, specifying:
paymentMethod
: Thestate.data.paymentMethod
from theonSubmit
event from your front end.
curl https://checkout-test.adyen.com/v66/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": "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", :googlePayToken => "QWIwMmI0YzAhQlFBQkFnQjMv.." }, :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.."); 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" => "QWIwMmI0YzAhQlFBQkFnQjMv.." ), "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': 'QWIwMmI0YzAhQlFBQkFnQjMv..' }, '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 = "QWIwMmI0YzAhQlFBQkFnQjMv.." }; 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 }; 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: 'QWIwMmI0YzAhQlFBQkFnQjMv..' }, 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.
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" } ], ... }
- If you received an
action
object, pass theaction
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. Handling the redirect works the same way for all redirect payment methods.
Drop-in uses dropin.handleAction(action)
to redirect the shopper to Google Pay. After the shopper is redirected back to your website, check the payment result by making a POST /payments/details request, specifying:
-
paymentData
: The value your 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.
The /payments/details response contains:
-
resultCode
: Use this to present the payment result to your shopper. -
pspReference
: Our unique identifier for the transaction.
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
- 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.
- You must complete all of the steps in the Google Pay API deploy to production documentation for Web.
- 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.