<p>Elavon downloads and stores cookies on your device when you visit our website. We use these cookies to better understand and improve your browsing experience by identifying most visited pages, personalising content, and measuring site performance.</p>


Essential cookies enable core functionality such as page navigation and access to secure areas. The website cannot function properly without these cookies; they can only be disabled by changing your browser preferences.

Performance cookies help us to improve our website by collecting and reporting information on its usage (for example, which of our pages are most frequently visited).

Cookie Settings

<p>Elavon Financial Services DAC. Registered in Ireland – Number 418442.</p>
<p>Registered Office: Block F1, Cherrywood Business Park, Dublin 18, D18 W2X7, Ireland.</p>
<p>Elavon Financial Services DAC, trading as Elavon Merchant Services, is regulated by the Central Bank of Ireland.</p>
<p> </p>
<p>Elavon Financial Services DAC. Registered in Ireland with Companies Registration Office. The liability of the member is limited. United Kingdom branch registered in England and Wales under the number BR022122.</p>
<p>Elavon Financial Services DAC, trading as Elavon Merchant Services, is a credit institution authorised and regulated by the Central Bank of Ireland.  Authorised by the Prudential Regulation Authority.  Subject to regulation by the Financial Conduct Authority and limited regulation by the Prudential Regulation Authority.  Details about the extent of our regulation by the Prudential Regulation Authority are available from us on request.</p>


:::::notice{info}
**Important:** This functionality is coming soon.  Please contact your account manager to register your interest.
:::::

## Preparing your Google account

You will need to prepare your Google account in order to take payments using Google Pay<sup>TM</sup>. These instructions assume you already have a Google account.

Sign in to the [Google business console](https://pay.google.com/business/console/). You'll first need to enter your business name.



::image{id="/content/dam/developer-portal-solutions/en-gb/elavon/media/images/products/opayo/googlepay_img/GoogleBusConsole.png" alt="Google Business Console"}

You then need to complete the Business profile pages with some basic information about your business.



::image{id="/content/dam/developer-portal-solutions/en-gb/elavon/media/images/products/opayo/googlepay_img/GoogleProfile.png" alt="Google Business Profile"}

Once this page is completed, select 'Google Pay API' from the menu. At this point, the terms and conditions will then need to be accepted.



::image{id="/content/dam/developer-portal-solutions/en-gb/elavon/media/images/products/opayo/googlepay_img/GoogleTandC.png" alt="Google TandC"}

For a web integration you’ll need to select 'Integrate with your website' and add your website domain, including the full path of labels up to the DNS root. For example, www.example.com, not example.com.

Select the integration type as 'Gateway':



::image{id="/content/dam/developer-portal-solutions/en-gb/elavon/media/images/products/opayo/googlepay_img/GoogleWebIintegration.png" alt="Google Pay API Web Integration"}

You will also need to provide screenshots of your checkout flow and payment process. Once you have uploaded these images, click 'Submit for approval'. Your account will need to be viewed and approved by Google. This process may take up to 24 hours.

Make a note of your Google MerchantID from the top right-hand corner. You will need to supply this information whenever you call Google.

## Preparing your Opayo account

To prepare your vendor account to accept Google Pay, you'll need to do the following:

1. Log into MyOpayo as an administrative user
2. Navigate to the Settings tab and select 'Pay Methods' from the left sidebar
3. Select 'Add Google Pay'





::image{id="/content/dam/developer-portal-solutions/en-gb/elavon/media/images/products/opayo/googlepay_img/MyOpayoAdmin.png" alt="MyOpayo Admin" max-width="640" max-height="420"}

4. Your Gateway Merchant ID will be displayed. You will need to add this identifier to your code (see the example below)

::image{id="/content/dam/developer-portal-solutions/en-gb/elavon/media/images/products/opayo/googlepay_img/MyOpayoGatewayID.png" alt="MyOpayo Gateway ID" max-width="940" max-height="270"}

## Implementing Google Pay

Refer to the following links for help when integrating with Google Pay:

Android
-   [Google Pay Android developer documentation](https://developers.google.com/pay/api/android/)
-   [Google Pay Android integration checklist](https://developers.google.com/pay/api/android/guides/test-and-deploy/integration-checklist)
-   [Google Pay Android brand guidelines](https://developers.google.com/pay/api/android/guides/brand-guidelines)

Web
-   [Google Pay Web developer documentation](https://developers.google.com/pay/api/web/)
-   [Google Pay Web integration checklist](https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist)
-   [Google Pay Web Brand Guidelines](https://developers.google.com/pay/api/web/guides/brand-guidelines)

All contain code examples, however, for a web implementation your code will broadly resemble:

```html
<html>
   <head>
      <script>
         /**
          * Define the version of the Google Pay API referenced when creating your
          * configuration
          *
          * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|apiVersion in PaymentDataRequest}
          */
         const baseRequest = {
           apiVersion: 2,
           apiVersionMinor: 0
         };
         
         /**
          * Card networks supported by your site and your gateway
          *
          * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
          * @todo confirm card networks supported by your site and gateway
          */
         const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"];
         
         /**
          * Card authentication methods supported by your site and your gateway
          *
          * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
          * @todo confirm your processor supports Android device tokens for your
          * supported card networks
          */
         const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];
         
         /**
          * Identify your gateway and your site's gateway merchant identifier
          *
          * The Google Pay API response will return an encrypted payment method capable
          * of being charged by a supported gateway after payer authorization
          *
          * @todo check with your gateway on the parameters to pass
          * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway|PaymentMethodTokenizationSpecification}
          */
         const tokenizationSpecification = {
           type: 'PAYMENT_GATEWAY',
           parameters: {
             'gateway': 'opayoelavon',
             'gatewayMerchantId': '<gateway merchant ID from MyOpayo>' 
           }
         };
         
         /**
          * Describe your site's support for the CARD payment method and its required
          * fields
          *
          * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
          */
         const baseCardPaymentMethod = {
           type: 'CARD',
           parameters: {
             allowedAuthMethods: allowedCardAuthMethods,
             allowedCardNetworks: allowedCardNetworks
           }
         };
         
         /**
          * Describe your site's support for the CARD payment method including optional
          * fields
          *
          * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
          */
         const cardPaymentMethod = Object.assign(
           {},
           baseCardPaymentMethod,
           {
             tokenizationSpecification: tokenizationSpecification
           }
         );
         
         /**
          * An initialized google.payments.api.PaymentsClient object or null if not yet set
          *
          * @see {@link getGooglePaymentsClient}
          */
         let paymentsClient = null;
         
         /**
          * Configure your site's support for payment methods supported by the Google Pay
          * API.
          *
          * Each member of allowedPaymentMethods should contain only the required fields,
          * allowing reuse of this base request when determining a viewer's ability
          * to pay and later requesting a supported payment method
          *
          * @returns {object} Google Pay API version, payment methods supported by the site
          */
         function getGoogleIsReadyToPayRequest() {
           return Object.assign(
               {},
               baseRequest,
               {
                 allowedPaymentMethods: [baseCardPaymentMethod]
               }
           );
         }
         
         /**
          * Configure support for the Google Pay API
          *
          * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|PaymentDataRequest}
          * @returns {object} PaymentDataRequest fields
          */
         function getGooglePaymentDataRequest() {
           const paymentDataRequest = Object.assign({}, baseRequest);
           paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
           paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
           paymentDataRequest.merchantInfo = {
             // @todo a merchant ID is available for a production environment after approval by Google
             // See {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist|Integration checklist}
             merchantId: '<Google merchant ID from the business console> ',
             merchantName: '<merchant name>'
           };
           return paymentDataRequest;
         }
         
         /**
          * Return an active PaymentsClient or initialize
          *
          * @see {@link https://developers.google.com/pay/api/web/reference/client#PaymentsClient|PaymentsClient constructor}
          * @returns {google.payments.api.PaymentsClient} Google Pay API client
          */
         function getGooglePaymentsClient() {
           if ( paymentsClient === null ) {
             paymentsClient = new google.payments.api.PaymentsClient({environment: '<TEST or PRODUCTION>'});
           }
           return paymentsClient;
         }
         
         /**
          * Initialize Google PaymentsClient after Google-hosted JavaScript has loaded
          *
          * Display a Google Pay payment button after confirmation of the viewer's
          * ability to pay.
          */
         function onGooglePayLoaded() {
           const paymentsClient = getGooglePaymentsClient();
           paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
               .then(function(response) {
                 if (response.result) {
                   addGooglePayButton();
                   // @todo prefetch payment data to improve performance after confirming site functionality
                   // prefetchGooglePaymentData();
                 }
               })
               .catch(function(err) {
                 // show error in developer console for debugging
                 console.error(err);
               });
         }
         
         /**
          * Add a Google Pay purchase button alongside an existing checkout button
          *
          * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ButtonOptions|Button options}
          * @see {@link https://developers.google.com/pay/api/web/guides/brand-guidelines|Google Pay brand guidelines}
          */
         function addGooglePayButton() {
           const paymentsClient = getGooglePaymentsClient();
           const button =
               paymentsClient.createButton({onClick: onGooglePaymentButtonClicked});
           document.getElementById('container').appendChild(button);
         }
         
         /**
          * Provide Google Pay API with a payment amount, currency, and amount status
          *
          * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo}
          * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest
          */
         function getGoogleTransactionInfo() {
           return {
             countryCode: 'GB',
             currencyCode: 'GBP',
             totalPriceStatus: 'FINAL',
             // set to cart total
             totalPrice: '0.10'
           };
         }
         
         /**
          * Prefetch payment data to improve performance
          *
          * @see {@link https://developers.google.com/pay/api/web/reference/client#prefetchPaymentData|prefetchPaymentData()}
          */
         function prefetchGooglePaymentData() {
           const paymentDataRequest = getGooglePaymentDataRequest();
           // transactionInfo must be set but does not affect cache
           paymentDataRequest.transactionInfo = {
             totalPriceStatus: 'NOT_CURRENTLY_KNOWN',
             currencyCode: 'GBP'
           };
           const paymentsClient = getGooglePaymentsClient();
           paymentsClient.prefetchPaymentData(paymentDataRequest);
         }
         
         /**
          * Show Google Pay payment sheet when Google Pay payment button is clicked
          */
         function onGooglePaymentButtonClicked() {
           const paymentDataRequest = getGooglePaymentDataRequest();
           paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
         
           const paymentsClient = getGooglePaymentsClient();
           paymentsClient.loadPaymentData(paymentDataRequest)
               .then(function(paymentData) {
                 // handle the response
                 processPayment(paymentData);
               })
               .catch(function(err) {
                 // show error in developer console for debugging
                 console.error(err);
               });
         }
         
         //to post data to Opayo
         function post(url, header, contenttype, content){
         	
         	var xhr = new XMLHttpRequest();
         	xhr.open("POST", url, false);
         	xhr.setRequestHeader('Authorization', header );
         	xhr.setRequestHeader('Content-Type', contenttype );
         	xhr.send(content);
         	return(xhr.responseText);
         	
         }
         
         /**
          * Process payment data returned by the Google Pay API
          *
          * @param {object} paymentData response from Google Pay API after user approves payment
          * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentData|PaymentData object reference}
          */
         function processPayment(paymentData) {
           // show returned data in developer console for debugging
             console.log(paymentData);
           // @todo pass payment token to your gateway to process payment
         
         
         post("https://www.opayolabs.co.uk/OpayoDemo/googlepay_transaction" , "", "", paymentData.paymentMethodData.tokenizationData.token);
         
         }
      </script>
   </head>
   <body >
      <div id="container"></div>
      <script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script>
   </body>
</html>
```

:::::notice{note}
For the **gatewayTokenizationSpecification()** parameters, you'll need to specify the **gateway** as 'opayoelavon', and the **merchantId** as provided by Opayo in the above steps.
:::::

:::::notice{note}
For the **paymentDataRequest.merchantInfo** merchantId parameter, you'll need to specify the **merchantId** as provided by Google.
:::::

## Perform Transaction

Once you have implemented Google Pay, you will be presented with a payment token (**paymentData.paymentMethodData.tokenizationData.token**). You will need to base64 encode this, and send it as the contents of the payload field in your call to Opayo in the **paymentMethod.googlePay** object.

## Payment Call to Opayo

To carry out the Google Pay transaction, you will need to send the following Google Pay-specific fields in the **googlePay** object:

| Name | Description |
|---|---|
| merchantSessionKey | For information related to a merchantSessionKey, refer to the [Merchant Session Keys](https://developer.elavon.com/products/opayo/v1/api-reference#tag/Merchant-Session-Keys) section of the Opayo API Reference. |
| clientIPAddress | The IPv4 or IPv6 IP address of your customer connecting to your server making the payment returned by the HTTP headers.  This must be the full IP address which you can obtain from your server scripts. We will attempt to Geolocate the IP address in your reports and fraud screening. | 
| payload | The encrypted payment token provided by Google. | 


### Sample call:

```json
{
   "transactionType": "Payment",
   "vendorTxCode": "{{VENDOR_TX_CODE}}",
   "amount": 1,
   "currency": "GBP",
   "description": "my transaction",
   "paymentMethod": {
     "googlePay": {
       "merchantSessionKey": "{msk}",
       "clientIpAddress": "10.10.10.10",
       "payload": "{{encryptedPayload}}"
     }
   },
   "customerFirstName": "Firstname",
   "customerLastName": "Lastname",
   "customerEmail": "mail.mail.com",
   "customerPhone": "12345678901",
   "billingAddress": {
     "address1": "34 Billing AddLine",
     "address2": "BillAddress+Line+2",
     "city": "BilCity",
     "state": "BilState",
     "country": "GB",
     "postalCode": "233 ODE"
   }
 }
```

Refer to the [Opayo API Reference](https://developer.elavon.com/products/opayo/v1/api-reference) for a full list of the fields which may be sent.

## 3D Secure

We recommend setting both PAN_ONLY and CRYPTOGRAM_3DS in the **allowedAuthMethods** (as in the Google Pay web example provided above). 

- `const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];`

If possible, you should submit the **strongCustomerAuthentication** object in the transaction call to Opayo. This will allow the shopper to go through the 3D Secure process if their device does not support biometric authentication.

## Additional Information

-   The billing address is retrieved from outside the Google Payload like with all other payment requests. The address checks are performed, and the result will be shown in the Gateway response and MyOpayo portal. The transaction will not use the rules set by the Vendor and will not be automatically reverted due to Address check failure.

-   Google Pay payment requests do not support CV2, so any CV2 value provided will be ignored.

-   The Google Pay button must follow Google's [guidelines](https://developers.google.com/pay/api/android/guides/brand-guidelines).