--- title: Google Pay™ for Web slug: google-paytm-for-web docTags: createdAt: 2024-08-19T12:46:59.666Z --- 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](https://developers.google.com/pay/api/android/overview). It is assumed you already have a Judopay account. If you do not, sign up for a sandbox account [here](https://www.judopay.com/apply-sandbox-account). ### Prerequisites :::hint{type="info"} Make sure you are using Web SDK Version **0.0.18 **(or higher). ::: **From the Web SDK integration guide:** - [Create a paymentSession](docId:40dWE6LBub7vdKza1QYDC) - [Add the Payment Form to your Website](docId:40dWE6LBub7vdKza1QYDC) - To hide the payment form iFrame, use: `
` :::hint{type="info"} 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, ](https://developers.google.com/pay/api/web/guides/test-and-deploy/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](https://developers.google.com/pay/api/web/guides/test-and-deploy/request-prod-access). *** ## Integrating Google Pay™ ### Google Pay™ Button Style To help you implement Google Pay™ within your apps, see their [Brand Guidelines\*](https://developers.google.com/pay/api/web/guides/brand-guidelines). :::hint{type="info"} **\*** 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:** ::::VerticalSplit{layout="right"} :::VerticalSplitItem **buy** - If set to buy: - If the consumer is **not **logged into their Google Pay™ account **Buy with G Pay** will be displayed. ::Image[]{src="https://api.archbee.com/api/optimize/QGXTyW3MgdNcMjdEa0v8r/5Khix3HZjpbucyHXP-_ca_buy-with-g-pay.png" size="46" width="453" height="97" position="flex-start" alt="buy with g pay button" darkWidth="453" darkHeight="97" showCaption="false"} ::: :::VerticalSplitItem ::: :::: ::::VerticalSplit{layout="right"} :::VerticalSplitItem **buy** - If set to buy: - If the consumer is logged into their Google Pay™ account, the details of their selected card will be displayed. ::Image[]{src="https://api.archbee.com/api/optimize/QGXTyW3MgdNcMjdEa0v8r/-Rza3EIRJGS6Rd9FlHLpb_buy-with-g-pay-logged-in.png" size="46" width="478" height="95" position="flex-start" alt="g pay selected card button" darkWidth="478" darkHeight="95" showCaption="false"} ::: :::VerticalSplitItem ::: :::: ::::VerticalSplit{layout="right"} :::VerticalSplitItem **donate** - If set to donate, **Donate with G Pay** will be displayed. ::Image[]{src="https://api.archbee.com/api/optimize/QGXTyW3MgdNcMjdEa0v8r/YCqUc4j6knsYycKGBGVqi_donate-with-g-pay.png" size="46" width="451" height="91" position="flex-start" alt="donate with g pay button" darkWidth="451" darkHeight="91" showCaption="false"} ::: :::VerticalSplitItem ::: :::: ::::VerticalSplit{layout="right"} :::VerticalSplitItem **plain** - If set to plain, the G Pay **logo **will be displayed. ::Image[]{src="https://api.archbee.com/api/optimize/QGXTyW3MgdNcMjdEa0v8r/wXrGU6HgWQsc4tn567Mvg_plain-g-pay.png" size="46" width="453" height="94" position="flex-start" alt="g pay button plain" darkWidth="453" darkHeight="94" showCaption="false"} ::: :::VerticalSplitItem ::: :::: ::::VerticalSplit{layout="right"} :::VerticalSplitItem **book** - If set to book, **Book with G Pay** will be displayed. ::Image[]{src="https://api.archbee.com/api/optimize/QGXTyW3MgdNcMjdEa0v8r/iDv7heeb9hBcQQkrYzyhW_book-with-g-pay.png" size="46" width="450" height="89" position="flex-start" alt="book with g pay button" darkWidth="450" darkHeight="89" showCaption="false"} ::: :::VerticalSplitItem ::: :::: ::::VerticalSplit{layout="right"} :::VerticalSplitItem **checkout** - If set to checkout, **Checkout with G Pay** will be displayed. ::Image[]{src="https://api.archbee.com/api/optimize/QGXTyW3MgdNcMjdEa0v8r/PQasmV1OT9ePw-dAqE9Dm_checkout-with-g-pay.png" size="46" width="456" height="87" position="flex-start" alt="checkout with g pay button" darkWidth="456" darkHeight="87" showCaption="false"} ::: :::VerticalSplitItem ::: :::: ::::VerticalSplit{layout="right"} :::VerticalSplitItem **order** - If set to order,** Order with G Pay** will be displayed. ::Image[]{src="https://api.archbee.com/api/optimize/QGXTyW3MgdNcMjdEa0v8r/_duH3hMi7gHwuXfaZjN6l_order-with-g-pay.png" size="46" width="454" height="91" position="flex-start" alt="order with g pay button" darkWidth="454" darkHeight="91" showCaption="false"} ::: :::VerticalSplitItem ::: :::: ::::VerticalSplit{layout="right"} :::VerticalSplitItem **pay** - If set to pay, **Pay with G Pay** will be displayed. ::Image[]{src="https://api.archbee.com/api/optimize/QGXTyW3MgdNcMjdEa0v8r/vSlyQQT1jE02U6RzU8z56_pay-with-g-pay.png" size="46" width="448" height="91" position="flex-start" alt="pay with g pay button" darkWidth="448" darkHeight="91" showCaption="false"} ::: :::VerticalSplitItem ::: :::: ::::VerticalSplit{layout="right"} :::VerticalSplitItem **subscribe** - if set to subscribe, **Subscribe with G Pay** will be displayed. ::Image[]{src="https://api.archbee.com/api/optimize/QGXTyW3MgdNcMjdEa0v8r/0M7bNgua-MWno7o0DvIjs_subscribe-with-g-pay.png" size="46" width="454" height="97" position="flex-start" alt="subscribe with g pay button" darkWidth="454" darkHeight="97" showCaption="false"} ::: :::VerticalSplitItem ::: :::: *** ### Step One: Displaying the Google Pay™ Button :::CodeblockTabs Displaying the Google Pay Button ```javascript 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](docId\:t13itu-7QX7Ylrxgvj5jt). | | `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](docId\:t13itu-7QX7Ylrxgvj5jt). | | `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.](https://developers.google.com/pay/api/web/reference/request-objects#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](https://developers.google.com/pay/api/web/reference/request-objects#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\[ \]](https://developers.google.com/pay/api/web/reference/request-objects#PaymentMethod)
- The only mandatory attribute to be provided: **parameters.allowedCardNetworks**
- [transactionInfo](https://developers.google.com/pay/api/web/reference/request-objects#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](docId\:DOcX7ICJrL11PhChKZ-y-) . | | `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](https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataCallbacks). | | `onPaymentAuthorized`
Function
Optional
| Used when a payment is authorized in the payment form.
For more information on this parameter, see [onPaymentAuthorized.](https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataCallbacks) | | `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.isButtonVisibl**e 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](https://www.npmjs.com/package/@google-pay/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](docId\:bcXNM5keOk-nlNrZTafUT). - 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](docId\:qfxaWPAQl_-2EVfP8y94d). - The consumer should be redirected to an Error Page. :::CodeblockTabs Response Example ```json 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](docId:_zrsihomUEW-XnRQ4PBtJ). *** ## Testing your Wallet Payment Integration Wallet Payment Scenarios (via Web SDK Integration): - [Google Pay™](docId\:t13itu-7QX7Ylrxgvj5jt) For more information see, [Testing your Wallet Payment Integration](docId\:IyacWLIdSCQIKMCfrrkhp). *** ## Google Pay™ Recurring Payments Make sure you are using: - Web SDK **Version** **0.1.0 **(or higher) :::hint{type="warning"} 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). :::CodeblockTabs Recurring Payments Example ```json import JudoPay, { TransactionMode } from "web-sdk"; const judopay = new JudoPay("", /* sandbox */ true); const button = judopay.digitalWallets.getGooglePayButton({ environment: "TEST", transactionMode: TransactionMode.PAYMENT, judoId: "", yourPaymentReference: "", yourConsumerReference: "", paymentSession: "", currency: "GBP", // First charge is taken now, together with the mandate setup: initialRecurringPayment: true, paymentRequest: { merchantInfo: { merchantId: "" }, allowedPaymentMethods: [ { parameters: { allowedCardNetworks: ["VISA", "MASTERCARD", "AMEX"], billingAddressParameters: { format: "FULL" }, }, }, ], // Recurring MIT descriptor — replaces `transactionInfo` recurringTransactionInfo: { currencyCode: "GBP", countryCode: "GB", transactionId: "", 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](https://developers.google.com/pay/api/web/reference/request-objects#RecurringTransactionInfo). *** ### 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). :::CodeblockTabs Deferred Payment Example ```json import JudoPay, { TransactionMode } from "web-sdk"; const judopay = new JudoPay("", /* sandbox */ true); const button = judopay.digitalWallets.getGooglePayButton({ environment: "TEST", transactionMode: TransactionMode.PAYMENT, judoId: "", yourPaymentReference: "", yourConsumerReference: "", paymentSession: "", currency: "GBP", paymentRequest: { merchantInfo: { merchantId: "" }, allowedPaymentMethods: [ { parameters: { allowedCardNetworks: ["VISA", "MASTERCARD", "AMEX"], billingAddressParameters: { format: "FULL" }, }, }, ], // Deferred MIT descriptor — replaces `transactionInfo` deferredTransactionInfo: { currencyCode: "GBP", countryCode: "GB", transactionId: "", 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](https://developers.google.com/pay/api/web/reference/request-objects#DeferredTransactionInfo).