Web
...
Web Integrations
Web SDK

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:

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:

  1. Follow Google Pay™'s Integration Checklist, to ensure you have completed all the required steps in your integration.
  2. 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 with g pay button




buy

  • If set to buy:
    • If the consumer is logged into their Google Pay™ account, the details of their selected card will be displayed.
g pay selected card button




donate

  • If set to donate, Donate with G Pay will be displayed.
donate with g pay button




plain

  • If set to plain, the G Pay logo will be displayed.
g pay button plain




book

  • If set to book, Book with G Pay will be displayed.
book with g pay button




checkout

  • If set to checkout, Checkout with G Pay will be displayed.
checkout with g pay button




order

  • If set to order, Order with G Pay will be displayed.
order with g pay button




pay

  • If set to pay, Pay with G Pay will be displayed.
pay with g pay button




subscribe

  • if set to subscribe, Subscribe with G Pay will be displayed.
subscribe with g pay button






Step One: Displaying the Google Pay™ Button

Displaying the Google Pay 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:

    • 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.
    • The only mandatory attribute to be provided: parameters.allowedCardNetworks

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.
  • SecureCorporate
    • Request exemption for payments made using a corporate card.
  • 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).
  • 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
  • The consumer should be redirected to an Error Page.
Response Example


For more information on the response codes, see Codes.




Testing your Wallet Payment Integration

Wallet Payment Scenarios (via Web SDK Integration):

For more information see, Testing your Wallet Payment Integration.

Updated 23 Aug 2024
Did this page help you?
Yes
No