Google Pay Browser Payments

Google Pay enables fast, simple and convenient payment experiences for millions of customers globally using a compatible registered device or browser. By calling on Google Pay APIs, you can reduce payment frictions for your customers by allowing them to check out without having to enter any payment information themselves.

How to use this guide

This guide walks you through the steps required to implement the Google Pay browser payment experience and includes:

The end-to-end workflow to successfully process a Google Pay browser payment transaction, Tyro eCommerce payment gateway specific code and instructions, Guidance on when and how to refer to the Google Pay developer documentation. Google Pay’s own developer documentation complements this guide and must be used in conjunction with these implementation instructions and whenever you are prompted with a link.

The full Google Pay documentation can be found here: Google Pay Web

Prerequisites

Before you implement Google Pay digital wallet and start sending requests, you will have to perform some initial integration steps: creating a merchant ID, configuring your profile correctly, etc.

1. Register with Google and get your merchant ID.

You can use this link.

If you are prompted to create a new Google (Gmail) account first, you may do so. Alternatively, you can log into an existing Gmail account.

Next, head to the business console (linked above) and register your business. You will be KYC’d, then issued with a merchant ID.

The Google terms and conditions for developers are available here.

2. Make sure that your HTTPS webpage is secured with a domain-validated SSL certificate.

3. Check your browser and upgrade if necessary.

Make sure you are using one of the supported web browsers: Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, Opera, or UCWeb UC Browser.

Workflow

Google Pay implementation

  • The Google Pay library (pay.js) is needed to create a Google Pay button.
  • The transaction amount, merchant details and token options are configured.
  • The user will select their stored card or enter new details.
  • The payment token (DPAN) is then returned by Google Pay

Tyro gateway implementation

  • The payment token is sent from the browser to your merchant server.
  • Transaction request is sent to Tyro with payment token included.
  • Transaction result is sent back eg. APPROVED or DECLINED.

Implementing Google Pay button and retrieving token

Use the Google Pay tutorial (available here: Google Pay Tutorial ) to complete your integration. Below is a summary of the steps you’ll need to perform and the changes you will need to make to be compatible with the Tyro eCommerce gateway.

At a minimum steps 1-9 will need to be completed

Configure transaction and merchant info

Steps 1-5 will guild you through configuring the required parameters prior to rendering the Google Pay button. It is here where you will need to include some Tyro specific values.

Configuring Tyro Merchant:

In Step 2 when initializing the tokenisation specification you will need to set the payment gateway and Tyro merchant ID.

Set gateway to “mpgs”

Set gatewayMerchantId to the MID issued to you by Tyro

Example:

const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    'gateway': 'mpgs',
    'gatewayMerchantId': 'TYRO_MID'
  }
};

Configuring payment card networks:

In step 3-4 you will need to configure which payment card networks you wish to support.

For Digital Wallet eCommerce transactions Tyro supports Amex, MasterCard and Visa.

const allowedCardNetworks = ["AMEX", "MASTERCARD", "VISA"];

Load Google Pay JS library and check if Google pay available

Step 5 details how to load the Google Pay API JavaScript library which is available at https://pay.google.com/gp/p/js/pay.js

Step 6 will walk you through how to check if the browser or device is ready to accept google pay payments using the paymentsClient.isReadyToPay() function.

If the browser or devise is not ready then the Google Pay button will not appear.

Add Google Pay payment button

Step 7 details how to render the Google Pay button

Use the paymentsClient.createButton() function to render the Google Pay payment button. The Google Pay pay.JS library will render the Google Pay for you in a div element you specify.

There are Brand guidelines and UX best practices that advise the best placement and implementation for the button:

There is also some live demo examples here: Demos

Send transaction info and register call backs

Step 8-9 detail how to send the transaction info configured in steps 1-4 using the paymentsClient.loadPaymentData(paymentDataRequest) function.

Sending Payment Request to Tyro

On completion of the payer’s interaction with the Google Pay API, you will be provided with a payload that contains an encrypted payment token (DPAN) signed by Google.

The payment token (DPAN) will be issued for either a device payment or a card payment. It will be returned in a JSON object: paymentData.paymentMethodData.tokenizationData.token

Example:

{"apiVersionMinor":0,"apiVersion":2,"paymentMethodData":{"description":"Visa •••• 1111","tokenizationData":{"type":"PAYMENT_GATEWAY","token":"{\"signature\":\"MEUCICNnsNux7P61Ff8ijEYEfpbBFV+Rt9yUUcjnBci7HGJyAiEA2Y5br9of7Ej4dndD3HD+pOXNpYMQzfJ2YocWlFd7D4A\\u003d\",\"protocolVersion\":\"ECv1\",\"signedMessage\":\"{\\\"encryptedMessage\\\":\\\"BUsurBcaQpwXTrQur8FvPcFuMIF5IQ1p6kktn+50yYt8dUboEpLZEdoayBO6DdBb+Z+iPMTnswA5J44Ypbap0/hIV3xgcK5d4JIkdKOGJdPz00iqWRHLKmke/FktB1aoisRxCyTVkGR9KT2TJRhmKmEvvoCD+cyO3cc5ZuV0x7MgO8ySgCQ0Hq2XPEEggYi7gu2/ZENMZMk2oz0GZMH96p9Np4U9mLA8Eeh9oiZp4MWsHS3zJZpU9WxzVta/NMpo8RReygxhbqrJ3voEZA6xktu3GnZZSDUAiuJAcfmelntqma3+p3oWLchYLnjiKl+NXFwhWNi37msBtPKIkPkCscNnDod0E4Hh+XWzwS1emdKQ+GTO4g0R1oMBCujq8Eyo4KhQKNp4AZVgDlU3W4Eexkevq4LRONV96mpnbXIeFqQ+CT0mRkOFOXLCpcs9aqzT1zVh\\\",\\\"ephemeralPublicKey\\\":\\\"BCNya+NxHB6Lqm54Ozr7EV/s9ryKH0eBqpdBkIEuXZcclvyGk1UcdwBFiuKJqMcWPqIB9EUb+L/vQ9lq5vLl7V0\\\\u003d\\\",\\\"tag\\\":\\\"X+YBpuJcQL2ZWM0bdAMpwHpCp+sDpmPBM4VhzOAi5SI\\\\u003d\\\"}\"}"},"type":"CARD","info":{"cardNetwork":"VISA","cardDetails":"1111"}}}

Token only example:

{\"signature\":\"MEUCICNnsNux7P61Ff8ijEYEfpbBFV+Rt9yUUcjnBci7HGJyAiEA2Y5br9of7Ej4dndD3HD+pOXNpYMQzfJ2YocWlFd7D4A\\u003d\",\"protocolVersion\":\"ECv1\",\"signedMessage\":\"{\\\"encryptedMessage\\\":\\\"BUsurBcaQpwXTrQur8FvPcFuMIF5IQ1p6kktn+50yYt8dUboEpLZEdoayBO6DdBb+Z+iPMTnswA5J44Ypbap0/hIV3xgcK5d4JIkdKOGJdPz00iqWRHLKmke/FktB1aoisRxCyTVkGR9KT2TJRhmKmEvvoCD+cyO3cc5ZuV0x7MgO8ySgCQ0Hq2XPEEggYi7gu2/ZENMZMk2oz0GZMH96p9Np4U9mLA8Eeh9oiZp4MWsHS3zJZpU9WxzVta/NMpo8RReygxhbqrJ3voEZA6xktu3GnZZSDUAiuJAcfmelntqma3+p3oWLchYLnjiKl+NXFwhWNi37msBtPKIkPkCscNnDod0E4Hh+XWzwS1emdKQ+GTO4g0R1oMBCujq8Eyo4KhQKNp4AZVgDlU3W4Eexkevq4LRONV96mpnbXIeFqQ+CT0mRkOFOXLCpcs9aqzT1zVh\\\",\\\"ephemeralPublicKey\\\":\\\"BCNya+NxHB6Lqm54Ozr7EV/s9ryKH0eBqpdBkIEuXZcclvyGk1UcdwBFiuKJqMcWPqIB9EUb+L/vQ9lq5vLl7V0\\\\u003d\\\",\\\"tag\\\":\\\"X+YBpuJcQL2ZWM0bdAMpwHpCp+sDpmPBM4VhzOAi5SI\\\\u003d\\\"}\"}

The payment token will need to be escaped before submitting to the Tyro payment gateway. We recommend using a standard library in your programing language to prevent any errors.

Example of escaped token:

{\"signature\":\"MEQCIGPChXHenatet9rSWuS4\/qw6fLZxB5LqJrtFSwF3pnVjAiBNK686D8LctIi6BNlXQFvBgWHXDEhc+GRxm+pUx6Dk4A\\u003d\\u003d\",\"protocolVersion\":\"ECv1\",\"signedMessage\":\"{\\\"encryptedMessage\\\":\\\"zlxB1bRHRkXl+b3+emaGx+G7fc95I9jwRYorZCynABFpTh9PyJQkms+u8\/PSQTBj63RTPAtPVFTZ7y54mk3x9nA1VlWSj+yXtLePGKu6fVco1fw\/WqpAmzYv8gyarM3v5sndGsetZu5AqUjI4nykqel0C36U9phK4Tzuab9b4lme\/9h26U3JUEYyH4HBcBhTJbm0gL8oRn+vfM7JBMV+gszDR6fE38sW9JtdomNa7jJyr4czePft\/2hd2kSOyh5K13BXuQCAYoXWPNQhgiRBLK1vgAmiYfPbJRwvkNSshcFJyrbiNGn1lUd+caxvo4t+5rIuWlNIox9MooRh8EYdAJTaW0aZKDwHT\/lUk2wwXVUPicEzpXhEQZq39HpvlC7PUVmt03crTDd\/koLvkgTBpaLMH7JcshHwle\/eoXHrxzpXYkCZ00CZAB4dAM8ZdeNeb7Vi\\\",\\\"ephemeralPublicKey\\\":\\\"BMng7prDy6bhSMf3KivN+4KLALQJx1OPqEslSLHk0p4iumP1sqJXx2TGQZKPGNguH6KTDznIDIC9bYwNTcNmWM8\\\\u003d\\\",\\\"tag\\\":\\\"MS1v8Piaem354IUnnlESy0iSvSnCejuwZpPV+ts1FSQ\\\\u003d\\\"}\"}

The gateway will verify the signature on the payment token to ensure it has been signed by Google.

After verification, the gateway decrypts the payment token for you, validates the gateway identifier, the merchant’s gateway identifier in the payment token, and processes the transaction using the decrypted data.

Provide the following fields to the gateway in your Authorize or Pay API request, sample below.

  • apiOperation = PAY or AUTHORIZE
  • order.amount
  • order.currency
  • order.walletProvider = GOOGLE_PAY
  • sourceOfFunds.type.provided.card.devicePayment.paymentToken
Request
{
  "order": {
            "amount" : "1.00",
            "currency": "AUD",
            "walletProvider" :"GOOGLE_PAY"
  },
  "sourceOfFunds" : {
            "type":"CARD",
            "provided" : {
                          "card" : {
                                   "devicePayment" : {
                                                      "paymentToken" :"{\"signature\":\"MEUCIQDKY09Go6FZfUSOrajPdergu168PxUSDaPREvIrRhL5uQIgUcmfkj0J7m0Wvm754J1w96gb4omr+6uHp0Vx0N0zohI\u003d\",\"protocolVersion\":\"ECv1\",\"signedMessage\":\"{\\\"encryptedMessage\\\":\\\"InvalidPaymentToken\\\",\\\"ephemeralPublicKey\\\":\\\"BIORkAVmRAIWBnkUO03h67KQIymso87A6a1tM44aoMPWpjR+BDZOBAdt0NJUzw8o4oso7//uVljdgGzqDXQSKFE\\\\u003d\\\",\\\"tag\\\":\\\"DnzCuRaKwtLiMAgdzR5Y9Z52D1WI3FrprNmYWFSRqZo\\\\u003d\\\"}\"}"
                                                }
                                }
                }
  },
  "apiOperation": "PAY"
}}
Response
{
  "authorizationResponse": {
    "transactionIdentifier": "test"
  },
  "gatewayEntryPoint": "WEB_SERVICES_API",
  "merchant": "TESTWTF38659838",
  "order": {
    "amount": 1,
    "chargeback": {
      "amount": 0,
      "currency": "AUD"
    },
    "creationTime": "2018-06-20T00:09:58.021Z",
    "currency": "AUD",
    "fundingStatus": "NOT_SUPPORTED",
    "id": "34097",
    "merchantCategoryCode": "1234",
    "status": "CAPTURED",
    "totalAuthorizedAmount": 1,
    "totalCapturedAmount": 1,
    "totalRefundedAmount": 0,
    "walletProvider": "GOOGLE_PAY"
  },
  "response": {
    "acquirerCode": "00",
    "gatewayCode": "APPROVED",
    "gatewayRecommendation": "PROCEED"
  },
  "result": "SUCCESS",
  "sourceOfFunds": {
    "provided": {
      "card": {
        "brand": "VISA",
        "devicePayment": {
          "cryptogramFormat": "3DSECURE"
        },
        "deviceSpecificExpiry": {
          "month": "5",
          "year": "21"
        },
        "deviceSpecificNumber": "411111xxxxx1111",
        "encryption": "DEVICE",
        "expiry": {
          "month": "5",
          "year": "21"
        },
        "fundingMethod": "UNKNOWN",
        "number": "xxxxxxxxxxxxxxx",
        "scheme": "VISA"
      }
    },
    "type": "CARD"
  },
  "timeOfRecord": "2018-06-20T00:09:58.021Z",
  "transaction": {
    "acquirer": {
      "batch": 1,
      "id": "SYSTEST_ACQ1",
      "merchantId": "123456"
    },
    "amount": 1,
    "authorizationCode": "113111",
    "currency": "AUD",
    "frequency": "SINGLE",
    "funding": {
      "status": "NOT_SUPPORTED"
    },
    "id": "A",
    "receipt": "1806206",
    "source": "INTERNET",
    "terminal": "111111",
    "type": "PAYMENT"
  },
  "version": "57"
}

Tyro supports Pay and Auth requests for Google Pay.

The API specification for each is located in the links below:

Testing and Go Live

Test environment vs Production

To use switch between Google Pay’s test and production environment you need to set this when initializing the google pay library.

When testing set environment to “TEST” and the merchantId to “12345678901234567890”

Example:

 paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST',
  merchantInfo: {
    merchantName: "Example Merchant",
    merchantId: "12345678901234567890"
  }});

When using in production set environment to “PRODUCTION” and the merchantId the one issued to you by Google Pay.

Example:

 paymentsClient = new google.payments.api.PaymentsClient({environment: 'PRODUCTION',
  merchantInfo: {
    merchantName: "Real Merchant",
    merchantId: "YOUR_GOOGLE_PAY_MERCHANTID"
  }});

For more information see Google Pay’s production environment guide here: Deploy Production Environment

Test cards

Test cards are available from Google here: Test Card Suite

You will need to join a google a group to get access which will temporarily load the test card suit into your Google Pay account. Simply leave the group to return your Google pay account to normal Test card suite group

If you use a production card in the Google Pay test environment it will replace the production card with a standard test card (4111 1111 1111 1111) during the transaction being processed - no funds will be charged to your Google Wallet.

Go Live

Your integration will need to be verified by Google before using in production.

Please see here for Google’s requirements: Integration Checklist

Once you have completed the integration checklist you can request production access here: Request Production Access

Working example

Working examples of the google button are available here: Live Google Pay Demos

Below is an example configured with Tyro’s payment gateway details.

The request sender at the bottom demonstrates the payment request that will come from the merchant server.

Send requests directly from the browser (CORS must be enabled)
$$.env
2 variables not set
merchantId
orderId
transactionId