Google Pay™ for Web

Google Pay™ for Web
The Judopay Web SDK implements our own easy to use Google Wallet handling service which wraps Google's API requirements, making it very easy for our merchants to implement Google Pay™ for Web.
For more information on the Google Pay™ payment flow, see their Developer Guide.
It is assumed you already have a Judopay account. If you do not, sign up for a sandbox account here.
Prerequisites
Make sure you are using Web SDK Version 0.0.18 (or higher).
From the Web SDK integration guide:
﻿Create a paymentSession﻿﻿
﻿Add the Payment Form to your Website﻿﻿
To hide the payment form iFrame, use:
<div id="payment-iframe" style="position:absolute;width:0;height:0;border:0;"></div>
The payment form iFrame must be loaded onto the page in order for payments to work. 
However displaying the form to the consumer is not required for this transaction type.
Direct from Judopay: 
Judopay Account (sandbox and eventually live)
Judopay JudoID
Merchant Requirement (Google Requirement):
Prior to going live with Google Pay™ Web Payments, you must have a valid Google verified Live Merchant ID.
To receive your Live Merchant ID:
Follow Google Pay™'s Integration Checklist, to ensure you have completed all the required steps in your integration.
Begin the process to obtain production access from Google, here.
﻿
Integrating Google Pay™
Google Pay™ Button Style
To help you implement Google Pay™ within your apps, see their Brand Guidelines*.
* The Google Pay™ button guidelines have been updated as follows:
Buttons have rounded edges.
The color of the button can no longer be set. (If you do set this, it will not break anything, but will no longer have any effect).
The long and short button types have been deprecated and replaced with types buy and plain.
You can set the following parameters in the buttonStyle object (defined in the Google Pay Configuration Parameter Descriptions):
Parameter
Description
type
String
buy
donate
plain
book
checkout
order
pay 
subscribe
 See below for button type details.
sizeMode
String
Static
Fill
height
String
Sets the button height in pixels.
width
String
Sets the button width in pixels.
locale
String
Sets the localised language versions of the Buy with text.
Button Type Details:
buy
If set to buy:
If the consumer is not logged into their Google Pay™ account Buy with G Pay will be displayed.
﻿
﻿
buy
If set to buy:
If the consumer is logged into their Google Pay™ account, the details of their selected card will be displayed.
﻿
﻿
donate
If set to donate, Donate with G Pay will be displayed.
﻿
﻿
plain
If set to plain, the G Pay logo will be displayed.
﻿
﻿
book
If set to book, Book with G Pay will be displayed.
﻿
﻿
checkout
If set to checkout, Checkout with G Pay will be displayed.
﻿
﻿
order
If set to order, Order with G Pay will be displayed.
﻿
﻿
pay
If set to pay, Pay with G Pay will be displayed.
﻿
﻿
subscribe
if set to subscribe, Subscribe with G Pay will be displayed.
﻿
﻿
﻿
Step One: Displaying the Google Pay™ Button
Displaying the Google Pay Button
const googlePayConfiguration = {
    judoId: "yourJudoId",
    amount: "12.99",
    currency: "GBP",
    yourPaymentReference: "yourPaymentReferenc",
    yourConsumerReference: "yourConsumerReference",
    paymentSession: "yourPaymentSession",
    environment: "TEST",
    transactionMode: "payment",
    buttonStyle: {
        type: "buy",
        sizeMode: "static",
        locale: "en",
        width: "200",
        height: "36"
  	} 
    paymentRequest = {
      merchantInfo: {
          merchantId: 'yourMerchantId' //issued after registration
      },
      allowedPaymentMethods: [{
          parameters: {
              allowedCardNetworks: ['VISA', 'MASTERCARD', 'AMEX']
          }
      }],
      transactionInfo: {
          totalPriceStatus: 'FINAL',
          totalPrice: '1.0',
          currencyCode: 'GBP',
          countryCode: 'GB'
      }    
}
    onSuccess: handleSuccess,
    onError: handleError
}

//Initialize Google Pay button with Google Pay Configuration object:
const button = judo.digitalWallets.getGooglePayButton(googlePayConfiguration)

//Add the Google Pay Button to your page:
const container = document.getElementById('button-container')
container.append(button)
const googlePayConfiguration = {
    judoId: "yourJudoId",
    amount: "12.99",
    currency: "GBP",
    yourPaymentReference: "yourPaymentReferenc",
    yourConsumerReference: "yourConsumerReference",
    paymentSession: "yourPaymentSession",
    environment: "TEST",
    transactionMode: "payment",
    buttonStyle: {
        type: "buy",
        sizeMode: "static",
        locale: "en",
        width: "200",
        height: "36"
  	} 
    paymentRequest = {
      merchantInfo: {
          merchantId: 'yourMerchantId' //issued after registration
      },
      allowedPaymentMethods: [{
          parameters: {
              allowedCardNetworks: ['VISA', 'MASTERCARD', 'AMEX']
          }
      }],
      transactionInfo: {
          totalPriceStatus: 'FINAL',
          totalPrice: '1.0',
          currencyCode: 'GBP',
          countryCode: 'GB'
      }    
}
    onSuccess: handleSuccess,
    onError: handleError
}

//Initialize Google Pay button with Google Pay Configuration object:
const button = judo.digitalWallets.getGooglePayButton(googlePayConfiguration)

//Add the Google Pay Button to your page:
const container = document.getElementById('button-container')
container.append(button)
﻿
Configuration Object Parameter Descriptions
See below for more details on the parameters that create the googlePayConfiguration object:
Google Pay™ Configuration Object Parameter Descriptions:
﻿
﻿
Step Two: Handle the Response
﻿
﻿
Testing your Wallet Payment Integration
Wallet Payment Scenarios (via Web SDK Integration):
﻿Google Pay™﻿﻿
For more information see, Testing your Wallet Payment Integration﻿.
Parameter	Description
type String	buy donate plain book checkout order pay subscribe See below for button type details.
sizeMode String	Static Fill
height String	Sets the button height in pixels.
width String	Sets the button width in pixels.
locale String	Sets the localised language versions of the Buy with text.
Updated 23 Aug 2024
Apple Pay™ for Web
Customisation