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

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:

Parameter	Description
judoId String Required	Unique ID supplied by Judopay. Specific to a merchant and/or location. Format: 100100100 Maximum length 9 characters. Do not include spaces or dashes.
amount Decimal Required	The amount to process. Format: Two decimal places For currencies using a different structure please contact Judopay for support.
currency String Required	The currency of the transaction. Any ISO 4217 alphabetic currency code: GBP USD EUR
yourConsumerReference String Required	Unique reference to anonymously identify your customer. Advisable to use GUIDs. Must be below 40 characters.
yourPaymentReference String Required	Your unique reference for this payment. Format: Maximum length 50 characters. This value should be unique in order to protect your customers against duplicate transactions. With a server side integration, if a payment reference is not supplied, the transaction will not be processed.
paymentSession String Required	A unique string that references the payment session of this transaction. The paymentSession will expire in 30 minutes, unless an expiryDate is set in the /paymentsession request body. To get the reference: Use any Google Merchant ID when creating a Google Pay™ transaction request in sandbox. Use your verified Live Merchant ID when creating a live Google Pay™ transaction request. Choose from the following transaction modes: payment pre_auth Use the paymentSession response reference to populate this field.
transactionMode String Required	Represents type of transaction. Values: payment pre_auth
onSuccess Function Required	Set as the function you want called when the transaction is successful. The response object will be passed as a parameter. For more information on how to handle the response, Testing Digital Wallet Payments - via Web SDK.
onError Function Required	Set as the function you want called when there is an error. The error object will be passed as a parameter. For more information on how to handle the response, see Testing Digital Wallet Payments - via Web SDK.
paymentRequest Object Required	Use this to configure your site's support for the Google Pay™ API. For more information on this parameter and the fields it can contain, see PaymentDataRequest. (For example, if you Include the optional flags, such as emailRequired (default=true), this will affect whether the related information (e.g. the Google Pay email) is available in the result object, which is returned when the transaction is complete). You are required to provide the following mandatory fields: merchantInfo To process payments, set the merchantId attribute in this object. Use the merchantId provided after registering with Google Pay™. This is a requirement for processing a Google Pay™ payment in PRODUCTION. allowedPaymentMethods[ ] The only mandatory attribute to be provided: parameters.allowedCardNetworks transactionInfo The example paymentRequest object snippet in Step One, shows the fields that must be provided. (Judopay will provide the other required fields).
environment String Optional	Represents the environment type Google Pay™ will run in. Values: PRODUCTION TEST
buttonStyle Object Optional	Change the style of the Google Pay™ Button. For more details on the fields you can set, see Google Pay Button Style .
onPaymentDataChanged Function Optional	Used when payment data changes in the payment form, for example: shipping address shipping options For more information on this parameter, see onPaymentDataChanged.
onPaymentAuthorized Function Optional	Used when a payment is authorized in the payment form. For more information on this parameter, see onPaymentAuthorized.
onReadyToPayChange Function Optional	Used when the consumer's isReadyToPay state changes. Change the application's behaviour, based on whether or not the consumer is ready to pay. When existingPaymentMethodRequired = true, inspect both result.isReadyToPay and result.paymentMethodPresent to determine if the consumer isReadyToPay and has a paymentMethodPresent. Alternatively: result.isButtonVisible can be used to determine whether or Google Pay™ button will be displayed. existingPaymentMethodRequired is taken into account with result.isButtonVisible. Also raised as event "readytopaychange". For more information on this parameter, see button-element.
challengeRequestIndicator String Optional	Indicates the type of challenge request you wish to apply. Values: NoPreference NoChallenge No challenge required. ChallengePreferred A challenge is preferred for this transaction. ChallengeAsMandate Must challenge this transaction. This should not be included in the same configuration object as scaExemption.
scaExemption String Optional	To apply for an exemption from SCA, for a customer initiated transaction. Values: LowValue Transactions up to €45 do not require SCA, up to a maximum of five consecutive transactions, or a cumulative limit of €100. TrustedBeneficiary Provides the cardholder the option to add the merchant to their trusted list. TransactionRiskAnalysis Allows for certain remote transactions to be exempt from SCA, provided a robust risk analysis is performed. This should not be included in the same configuration object as challengeRequestIndicator.
delayedAuthorisation Boolean Optional	For preAuths only. Set to true to authenticate a card holder with 3D secure, without performing payment authorisation. When set to true, the 3D Secure authentication status is returned in the response. The payment authorisation is carried out at the stage when you are ready to collect the amount from the customer. The default value = false
initialRecurringPayment Boolean Optional	Indicates if this initial payment is part of a recurring payment.

Step Two: Handle the Response

All the Judopay Web SDK transaction methods return a promise. Once the authorisation is complete, the promise will be either fulfilled or rejected.

Fulfilled

You will receive a JSON object response (a Judopay receipt object).
- For more information and schema on the JSON object, see API Transaction Response.
Depending on the result the consumer should be redirected to the appropriate outcome page.
- For example, if the result = SUCCESS redirect the consumer to the Success Page.
This page should display the necessary transaction information (found in the Judopay receipt object).

Rejected

You will receive an error object
- For more information on error responses returned, see Web SDK Error Responses.
The consumer should be redirected to an Error Page.

const onFulfillment = (receiptObject) => {
  const { result } = receiptObject
  //redirect to appropriate page depending on the result (success/failure/declined page)
}

const onRejection = (error) => {
  //redirect to error page and handle error
}

For more information on the response codes, see Codes.

Testing your Wallet Payment Integration

Wallet Payment Scenarios (via Web SDK Integration):

Google Pay™

For more information see, Testing your Wallet Payment Integration.

Google Pay™ Recurring Payments

Make sure you are using:

Web SDK Version 0.1.0 (or higher)

Integration via Web Payments is not currently supported.

Judopay supports Merchant Initiated Transactions (MIT)s for Wallet Customer Initiated Transactions (CIT)s.

Recurring Payments

To trigger an initial transaction that allows you to set up a Google Pay™ recurring payment token for future Merchant Initiated Transactions (MIT):

The recurring descriptor is passed on the Google Pay™ paymentRequest as recurringTransactionInfo This is a sibling of the standard transactionInfo (only one of the three should be set).

import JudoPay, { TransactionMode } from "web-sdk";

const judopay = new JudoPay("<API_TOKEN>", /* sandbox */ true);

const button = judopay.digitalWallets.getGooglePayButton({
  environment: "TEST",
  transactionMode: TransactionMode.PAYMENT,
  judoId: "<JUDO_ID>",
  yourPaymentReference: "<PAYMENT_REF>",
  yourConsumerReference: "<CONSUMER_REF>",
  paymentSession: "<PAYMENT_SESSION>",
  currency: "GBP",
  // First charge is taken now, together with the mandate setup:
  initialRecurringPayment: true,
  paymentRequest: {
    merchantInfo: { merchantId: "<GOOGLE_MERCHANT_ID>" },
    allowedPaymentMethods: [
      {
        parameters: {
          allowedCardNetworks: ["VISA", "MASTERCARD", "AMEX"],
          billingAddressParameters: { format: "FULL" },
        },
      },
    ],
    // Recurring MIT descriptor — replaces `transactionInfo`
    recurringTransactionInfo: {
      currencyCode: "GBP",
      countryCode: "GB",
      transactionId: "<UNIQUE_TXN_ID>",
      managementUrl: "https://merchant.example.com/subscriptions",
      billingAgreement: "Subscription auto-renews until cancelled.",
      immediateTotalPrice: "25.00",
      immediateDisplayItems: [
        { label: "Premium Plan — first month", type: "SUBTOTAL", price: "25.00", status: "FINAL" },
      ],
      // Optional free-trial / intro pricing shown before the recurrence starts
      introductoryPeriodInfo: {
        introductoryPeriodEndDateTime: "2026-10-01T00:00:00Z",
        label: "7 day free trial",
        totalPrice: "0.00",
      },
      recurrenceItems: [
        {
          label: "Premium Plan — monthly",
          price: "25.00",
          priceStatus: "FINAL",
          recurrencePeriod: "MONTH",
          recurrencePeriodCount: 1,
          billingInitialDateTime: "2026-10-01T00:00:00Z",
          // Omit `billingFinalDateTime` for an open-ended subscription
        },
      ],
    },
  },
  onSuccess: (response) => console.log("Recurring mandate set up", response),
  onError: (error) => console.error(error),
});

document.getElementById("google-pay-container").append(button);

Judopay acts as a pass-through service, whereby we supply the data needed by Google Pay™ for them to return a device / merchant specific token that can be used for MIT transactions.

For a full description on all the object properties in the Google Pay™ recurring payments flow, see the Google Pay™ Documentation.

Deferred Payments

To trigger an initial transaction that allows you to set up a Google Pay™ deferred payment token for future Merchant Initiated Transactions (MIT):

The deferred descriptor is passed on the Google Pay™ paymentRequest as deferredTransactionInfo.

This is a sibling of the standard transactionInfo (only one of the three should be set).

import JudoPay, { TransactionMode } from "web-sdk";

const judopay = new JudoPay("<API_TOKEN>", /* sandbox */ true);

const button = judopay.digitalWallets.getGooglePayButton({
  environment: "TEST",
  transactionMode: TransactionMode.PAYMENT,
  judoId: "<JUDO_ID>",
  yourPaymentReference: "<PAYMENT_REF>",
  yourConsumerReference: "<CONSUMER_REF>",
  paymentSession: "<PAYMENT_SESSION>",
  currency: "GBP",
  paymentRequest: {
    merchantInfo: { merchantId: "<GOOGLE_MERCHANT_ID>" },
    allowedPaymentMethods: [
      {
        parameters: {
          allowedCardNetworks: ["VISA", "MASTERCARD", "AMEX"],
          billingAddressParameters: { format: "FULL" },
        },
      },
    ],
    // Deferred MIT descriptor — replaces `transactionInfo`
    deferredTransactionInfo: {
      currencyCode: "GBP",
      countryCode: "GB",
      transactionId: "<UNIQUE_TXN_ID>",
      label: "Hotel room reservation",
      price: "200.00",
      priceStatus: "FINAL",
      // Nothing is charged today:
      immediateTotalPrice: "0.00",
      // Date the single future charge will be taken:
      billingDateTime: "2027-01-01T08:00:00Z",
      billingAgreement: "Your card will be charged on the billing date shown.",
      managementUrl: "https://merchant.example.com/bookings",
    },
  },
  onSuccess: (response) => console.log("Deferred payment authorised", response),
  onError: (error) => console.error(error),
});

document.getElementById("google-pay-container").append(button);

Judopay acts as a pass-through service, whereby we supply the data needed by Google Pay™ for them to return a device / merchant specific token that can be used for MIT transactions.

For a full description on all the object properties in the Google Pay™ deferred payments flow, see the Google Pay™ Documentation.