Google Pay™ for Web
![]() |
For merchants wishing to perform Google Pay™ Web payments through Judopay, follow our documentation on how to:
Achieve a Google Pay™ Web session from your own webserver
Validate the merchant identity through Google
Send the payment request to Judopay for processing upstream
Note
It is assumed you already have a Judopay account. If you do not, sign up for a sandbox account here.
The Judopay Web SDK implements our own easy to use Google Wallet handling service which wraps Google's API requirements.
This makes it very easy for our merchants to implement Google Pay™ Web.
Caution
Following the new Strong Customer Authentication (SCA) requirements, see the SCA Resource Guide for more information on updating your Google Pay™ implementation in relation to SCA transactions.
For more information on Google Pay™'s payment flow, see their Developer Guide.
To help you implement Google Pay™ within your apps, see their Brand Guidelines.
Use Google Pay™'s Integration Checklist to ensure you have completed all the required steps in your Android integration.
Merchants wishing to go-live with Google Pay™ Web, will need to have a valid Google verified merchant ID.
In order to obtain a verified account from Google, and a live Google merchant ID which you will use in the Judopay Web SDK, follow Google's guidelines here.
The documentation and examples here are for testing in Google's sandbox account.
Prerequisites
Make sure you have implemented the following prerequisites:
Direct from Google:
Active Live Merchant ID (before going live)
Note
This is not required for sandbox tests.
Direct from Judopay:
Judopay Account (Sandbox and eventually live)
Judopay APIToken
Judopay APISecret
Judopay JudoID
Back-end Code Base
These examples use Judopay's PHP-SDK: Version 4.4.0
Your server must be capable of running PHP
Merchant Requirement (Google Requirements)
Prior to going live with Google Pay™ Web Payments, you must have a valid live merchant ID as provided by Google. Follow Google's guidelines here for details on getting your merchant ID.
Step 1: Setting up the Web SDK
Tip
The documentation and examples provided, are based on version 0.0.10 of the Web SDK.
To integrate with Judopay's Web SDK:
Include the Judopay Web SDK script:
<script src="https://web.judopay.com/js/0.0.10/judopay.min.js"></script>
Initialise the Judopay Web SDK (for sandbox):
let judo = new JudoPay("yourSandBoxAPIToken", true);
Caution
For production:
let judo = new JudoPay("yourProductionAPIToken", false);
To use the Judopay Web SDK:
Set the value to true to use the sandbox environment.
Set the value to false to use the production environment.
Step 2: Setting the JudopayConfiguration
Note
The digitalWalletsService property is used to handle digital wallets.
Use the setJudoPayConfiguration method provided by the digitalWalletsService property:
judo.digitalWalletsService.setJudoPayConfiguration({ judoId: 'yourJudoId', displayName: 'displayName', domainName: 'sourceDomainName', countryCode: 'GB' })
Parameter | Description |
---|---|
String | Your unique JudoID |
String | A name you wish to be displayed when the Google wallet is called. This will appear in the wallet as: ![]() |
String | Your source website URL, where the payment is coming from. For example: www.mysite.com Note: Do not include http:// or https:// |
Integer | A valid ISO 3166-1 country code (Alpha 2). |
Step 3: Setting up the Google Pay™ Configuration
judo.digitalWalletsService.setGooglePayConfiguration({ environment: 'TEST', merchantIdentifier: "merchantID", merchantCapabilities: ['PAN_ONLY'], supportedNetworks: ['VISA', 'MASTERCARD', 'AMEX'], type: 'long', style: 'black' })
Parameter | Description |
---|---|
String | Google's Environment. Note: The case is important, ensure you use UPPERCASE.
Note: You will need a live Google Merchant Identifier (merchantID) from Google before you can test live. Get it here. |
String | A unique Google Merchant Identifier. Note: This is not important for sandbox testing. However prior to going live, you will require a live Google Merchant Identifier. Get it here. |
String | For Google Pay™ Web: currently PAN_ONLY is supported. |
String | List the Card Networks you plan to support. Note: Any Card Networks not listed here, the cards of those networks, will not be presented for selection in the Google Wallet. For example, if you do not plan on supporting American Express, use the following as your supportedNetworks:
See Google Pay™ Supported Networks for all supported Card Networks. |
String | The type of Google Pay™ Button to display: Note: The case is important, ensure you use lowercase.
![]()
![]() |
String | The style of the Google Pay™ Button to display: Note: The case is important, ensure you use lowercase.
For example: type = short, style = white ![]()
For example: type = long, style = white ![]() |
Step 4: Setting up the Wallet Response Handler
The response handler will be called after the consumer selects the card from the Google Pay™ Wallet, and clicks the Pay Button.
To set up the response handler:
judo.digitalWalletsService.responseHandler = (response, error) => { if (response) { // process the response } else { // handle the error } }
Once you receive the response from the Google Pay™ Wallet:
Submit the googlePayWallet object to a back-end server application for processing
In the exampe below, it will call the server PHP page: judoGooglePay.php with the digital wallet detail
This sample logs the result from the PHP page to the web console for debugging.
You should perform further action depending on the payment success or failure.
Note
This sample HTML code uses Jquery to post the wallet, although you can amend this to suit your own requirements.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
judo.digitalWalletsService.responseHandler = (response, error) => { if (response) { console.log(response); let googlePayWallet = { cardDetails: response.paymentDetails.info.cardDetails, cardNetwork: response.paymentDetails.info.cardNetwork, token: response.paymentDetails.tokenizationData.token, }; console.log(googlePayWallet); $.post("judoGooglePay.php", { googlePayWallet: googlePayWallet }, function ( data ) { console.table(data); try { let result = JSON.parse(data); if (result != undefined && result.result == "Success") { alert("Payment Success : " + result.receiptId); console.log("Payment Success, your receiptId = " + result.receiptId); } else { alert("Payment Failure : " + result.receiptId); console.log("Payment Failure, something went wrong please try again"); } } catch { alert("Major Failure..."); console.log("Payment Failure, something went wrong please try again"); } }); } else { console.log(error); // handle the error } };
Step 5: Setting up a Purchased Item
Now you have a responder (from Step 4), before calling the judo.digitalWalletsService.setPaymentDetails:
Load your wallet with the items to charge to the consumer
Sample code to load a purchased Item into the digital wallet:
const purchasedItemOne = { "label": "Smart Watch", "description": "Watch with integrated GPS tracking and water resistance", "amount": { "value": "1.01", "currency": "GBP" }, "pending": false }
For the purpose of this exercise, the sample code set up the following:
One item called: Smart Watch
Description of: Watch | Integrated GPS tracking | Water resistance
Amount for the item: £1.01 (GBP)
Note
This is an ISO 3-digit currency code.
Pending: false
If you wish to add multiple items:
Create another object:
const purchasedItemTwo = { "label": "Laptop Stand", "description": "Aluminium stand with heat absorption", "amount": { "value": "10.50", "currency": "GBP" }, "pending": false }
Note
By default, Google Pay™ does not handle arithmetic, so the total price would need to be manually calculated and updated every time the consumer changes any payment details. For example, selecting a different shipping method.
The JudoPaymentItem calculates the total price and updates the price with every payment detail change.
Once you have the items created above, set the setPaymentDetails object to these values:
Example : Set payment details for one item: judo.digitalWalletsService.setPaymentDetails([purchasedItemOne]) or Example : Set payment details for multiple items (in this case two): judo.digitalWalletsService.setPaymentDetails([purchasedItemOne,purchasedItemTwo])
Step 6: Setting up Additional Payment Options
You can set up additional options to be provided to the digitalWalletsService.
This can be achieved either by requiring further information from the Google Wallet, or requiring the consumer to add further information before payment.
An example of the additional options available:
const paymentOptions = { "requestPayerEmail": false, "requestPayerName": false, "requestPayerPhone": false, "requestShipping": false, "shippingType": undefined };
Parameter | Description |
---|---|
Boolean | false Do not obtain the consumer's email true Obtain the consumer's email |
Boolean | false Do not obtain the consumer's name true Obtain the consumer's name |
Boolean | false Do not obtain the consumer's phone number true Obtain the consumer's phone number |
Boolean | false Do not obtain the consumer's shipping information true Obtain the consumer's shipping information |
Boolean | undefined Do not change this value. |
Once you have set your payment options, set them in the digital wallet:
judo.digitalWalletsService.setPaymentOptions(paymentOptions);
Step 7: Setting Up Optional Shipping Options
As an optional step, you can set up the following shipping option(s).
The examples below sets up two types of shipping options:
The first option:
freeShipping is the default shipping method (selected: true):
const freeShipping = { "id": "free-shipping", "label": "Free Shipping", "description": "This option can take up to two weeks to deliver", "amount": { "value": "0.0", "currency": "GBP" }, "selected": true }
The second option:
expressShipping is an optional choice for the consumer (selected: false):
const expressShipping = { "id": "express-shipping", "label": "Express Shipping", "description": "This option will take up to three days to deliver", "amount": { "value": "15.0", "currency": "GBP" }, "selected": false }
Once you have set up your shipping options, ensure your paymentOptions has the "requestShipping": true
For example:
const paymentOptions = { "requestPayerEmail": true, "requestPayerName": true, "requestPayerPhone": false, "requestShipping": true, "shippingType": undefined }; judo.digitalWalletsService.setPaymentOptions(paymentOptions);
Call the digitalWalletsService.setShippingOptions to set up those shipping options:
judo.digitalWalletsService.setShippingOptions([freeShipping, expressShipping])
The following options will be displayed when calling the wallet:

Step 8: Displaying the Google Pay™ Button
To display the Google Pay™ Button:
Ensure you have a div tag defined where you require the button to appear.
For the purpose of this exercise, the div tag is called digital-wallets-buttons-container:
<div align="center"> <div style={{display: 'flex', justifyContent: 'center'}}> <div style={{width: '250px'}} id='digital-wallets-buttons-container'/> </div>
Display the Google Pay™ Button in the digital-wallets-buttons-container element:
judo.digitalWalletsService.getGooglePayButton('60px').then((googlePayButton) => { const myElement = document.getElementById('digital-wallets-buttons-container') myElement.appendChild(googlePayButton) })
Adjust the height of the button by changing the (‘60px’), to a relevant height you require.
For example, ‘128px’ will create a Google Pay™ button that is 128px high.
<!--- Judo Sample Google Pay Web (c) Judo August 2020 This code is provided free of charge with no warantees or liabilities. It is correct at time of publication For assistance please contact developersupport@judopay.com --> <!DOCTYPE html> <head> <script src="https://web.judopay.com/js/0.0.10/judopay.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <html> <body> <div align="center"> <font face="Arial" size=24>Web SDK GooglePay</font> </div><BR> <div align="center"> </div><BR> <div align="center"> <div style={{display: 'flex', justifyContent: 'center'}}> <div style={{width: '250px'}} id='digital-wallets-buttons-container'/> </div><BR> <script> // Setup the Judo WebSDK – Use your own APIToken Here let judo = new JudoPay("yourAPIToken", true); // Setup the Digital Wallet Configuration judo.digitalWalletsService.setJudoPayConfiguration({ // Replace this judoID with your JudoID judoId: 'yourJudoID', // Replace the name you wish to be displayed on the wallet displayName: 'Merchant Name To Display', // Replace The root URL of your website domainName: "www.ookjar.com", // Country Code Set to GB in sample countryCode: 'GB' }) // Setup the Google Specific Configuration judo.digitalWalletsService.setGooglePayConfiguration({ // Setup to use Google Test Sandbox Environment environment: 'TEST', // Setup your merchantID from Google (can be anything on Sandbox, but will need to be valid when going live) merchantIdentifier: "merchantID", // Leave this setting to PAN_ONLY merchantCapabilities: ['PAN_ONLY'], // List of supported Card Types, in this sample, VISA, MasterCard and American Express are supported supportedNetworks: ['VISA', 'MASTERCARD', 'AMEX'], // Google Button Short (no text) type: 'short', // Google Button Colour (black in this sample) style: 'black' }) // Setup a response handler return to from the wallet selection judo.digitalWalletsService.responseHandler = (response, error) => { if (response) { console.log(response) let googlePayWallet = { cardDetails: response.paymentDetails.info.cardDetails, cardNetwork: response.paymentDetails.info.cardNetwork, token: response.paymentDetails.tokenizationData.token }; // debug log to console the wallet encrypted detail console.log(googlePayWallet); // Setup a JQuery Post to judoGooglePay.php to process the transaction $.post( "judoGooglePay.php", // Send through the googleWallet Details {googlePayWallet: googlePayWallet}, function(data) { console.table(data); // Parse the response from judoGooglePay.php try { let result = JSON.parse(data); if (result != undefined && result.result == "Success") { alert("Payment Success : "+result.receiptId); console.log("Payment Success, your receiptId = " + result.receiptId); } else { alert("Payment Failure : "+result.receiptId); console.log("Payment Failure, something went wrong please try again"); } } catch { // If unable to parse a major failure is logged alert("Major Failure..."); console.log("Payment Failure, something went wrong please try again"); } } ); } else { // Log any Error console.log(error)// handle the error } } // Setup the Google Wallet Payment Options const paymentOptions = { // Do not require email "requestPayerEmail": false, // Do not require Name "requestPayerName": false, // Do not require Phone "requestPayerPhone": false, // Require Shipping Options "requestShipping": true, // Leave undefined "shippingType": undefined }; // Set Payment Options with the paymenOptions above judo.digitalWalletsService.setPaymentOptions(paymentOptions); // Setup one Item being Purchased const purchasedItemOne = { // Set up it's label "label": "Smart Watch", // Setup it's description "description": "Watch with integrated GPS tracking and water resistence", "amount": { // Set it's amount "value": "1.01", // Set the currency - sample app uses GBP "currency": "GBP" }, // Leave pending - false "pending": false } // Call the setPaymentDetails with the above item purchase judo.digitalWalletsService.setPaymentDetails([purchasedItemOne]) // Setup Shipping Option for Free Shipping const freeShipping = { // Set up unique ID "id": "free-shipping", // Set Shipping ID Label "label": "Free Shipping", // Set Shipping Description "description": "This option can take up to two weeks to deliver", "amount": { // Set Amount - this is free "value": "0.0", // Set Currency to GBP "currency": "GBP" }, // Default to true (default option selected) "selected": true } // Setup Second Shipping Option (Express) const expressShipping = { // Setup unique ID "id": "express-shipping", // Setup Shipping ID Label "label": "Express Shipping", // Setup Shipping Description "description": "This option will take up to three days to deliver", "amount": { // Setup the amount for shipping - £15.00 in this case "value": "15.0", // Setup Currency to GBP "currency": "GBP" }, // Selected not set, so this will be an option but not default "selected": false } // Setup the Wallet shipping from the above two options judo.digitalWalletsService.setShippingOptions([freeShipping, expressShipping]) // Call to display the GooglePay Button judo.digitalWalletsService.getGooglePayButton('60px').then((googlePayButton) => { const myElement = document.getElementById('digital-wallets-buttons-container') myElement.appendChild(googlePayButton) }) </script> </body> </html>
Customise your Configuration
To customise your own configuration, make the following changes:
Replace yourAPIToken - with your Judo supplied APIToken:
// Setup the Judo WebSDK – Use your own APIToken Here let judo = new JudoPay("yourAPIToken", true);
Replace yourJudoID - with your Judo supplied JudoID
Replace Merchant Name To Display - with the name you wish to appear in the wallet
Replace merchantDomain - with your website URL
Note
Do not include http:// or https://
// Setup the Digital Wallet Configuration judo.digitalWalletsService.setJudoPayConfiguration({ // Replace this judoID with your JudoID judoId: 'yourJudoID', // Replace the name you wish to be displayed on the wallet displayName: 'Merchant Name To Display', // Replace The root URL of your website domainName: "merchantDomain URL", // Country Code Set to GB in sample countryCode: 'GB' })
Replace TEST - with PRODUCTION when you are ready to go live
Replace merchantID - with your Google supplied merchant ID
// Setup the Google Specific Configuration judo.digitalWalletsService.setGooglePayConfiguration({ // Setup to use Google Test Sandbox Environment environment: 'TEST', // Setup your merchantID from Google (can be anything on Sandbox, but will need to be valid when going live) merchantIdentifier: "merchantID", // Leave this setting to PAN_ONLY merchantCapabilities: ['PAN_ONLY'], // List of supported Card Types, in this sample, VISA, MasterCard and American Express are supported supportedNetworks: ['VISA', 'MASTERCARD', 'AMEX'], // Google Button Short (no text) type: 'short', // Google Button Colour (black in this sample) style: 'black' }
Sample Server Code: Installing PHP-SDK
Prerequisite
Before you start, ensure you have installed version 4.4.0 of Judopay's PHP SDK.
Create a composer.json file in your document root directory with the following content:
{ "require": { "judopay/judopay-sdk": "4.4.0" } }
Install this version of the Judopay PHP SDK by running:
$ composer install
This should install Judopay's PHP SDK version 4.4.0 in the vendor subdirectory. This will be used in the judoGooglePay.php sample code.
Sample Server Code: Processing a Google Payment
Note
This is a simplified sample and should not be used for production, as additional error checks should be put into place.
To process a Google Payment:
Create a file in your document root called judoGooglePay.php
Copy the code (this is the server code handling of the Google Wallet through Judopay):
Note
This file should be in your root location of your webserver, with the PHP-SDK toolkit in the vendor directory beneath.
This is a ‘happy path’ example, with default options set for sample purposes:
<?php header('Access-Control-Allow-Origin: *'); require './vendor/autoload.php'; $GooglePayWallet = $_POST['googlePayWallet']; $judoId = "yourJudoID"; $judopay = new Judopay( array( 'apiToken' => 'yourAPIToken', 'apiSecret' => 'yourAPISecret', 'judoId' => $judoId, ) ); $googlePayPayment = $judopay->getModel('GooglePayment'); $googlePayPayment ->setAttributeValues( array( 'judoId' => $judoId, 'currency' => 'GBP', 'yourPaymentReference' => substr(md5(rand()), 0, 7), 'yourConsumerReference' => substr(md5(rand()), 0, 7), 'amount' => '1.01', 'googlePayWallet' => $GooglePayWallet ) ); try { $response = $googlePayPayment->create(); echo json_encode($response); } catch (\Judopay\Exception\ValidationError $e) { echo $e->json_encode(getSummary()); } catch (\Judopay\Exception\ApiException $e) { echo $e->getSummary(); } catch (\Exception $e) { echo $e->json_encode(getMessage()); } ?>
Please note the following:
This is the googlePay upstream handler to send the wallet details to Judopay for upstream processing.
This sample code defaults an amount to £1.01 using GBP. You should adjust this depending on the value of item(s) you are requiring payment for.
You should never expose your APISecret in any front-end development.
This will perform the upstream payment through Judopay's payment processing and will respond with a receipt object from our API, or any relevant error if there was an issue with the payment.
Replace the following values to match your own set up requirements:
Replace yourJudoID with your Judopay provided JudoID:
$judoId = "yourJudoID"
Replace yourAPIToken with your Judopay provided APIToken:
'apiToken' => 'yourAPIToken'
Replace yourAPISecret with your Judopay provided APISecret:
'apiSecret' => 'yourAPISecret'
Google Pay™ Supported Networks
Note
The value field is case sensitive. Ensure you use UPPERCASE.
Value | Description | Logo |
---|---|---|
AMEX | American Express Cards | ![]() |
DISCOVER | Discover Cards | ![]() |
INTERAC | Interac Cards | ![]() |
JCB | JCB Cards | ![]() |
MASTERCARD | Mastercard Cards | ![]() |
VISA | Visa Cards | ![]() |