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.
Make sure you are using Web SDK Version 0.0.18 (or higher).
From the Web SDK integration guide:
- 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.
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 |
See below for button type details. |
sizeMode String |
|
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.
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:
|
amount Decimal Required | The amount to process. Format:
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:
|
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:
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 your verified Live Merchant ID when creating a live Google Pay™ transaction request.
|
transactionMode String Required | Represents type of transaction. Values:
|
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:
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:
|
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:
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:
For more information on this parameter, see button-element. |
challengeRequestIndicator String Optional | Indicates the type of challenge request you wish to apply. Values:
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:
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.
|
initialRecurringPayment Boolean Optional | Indicates if this initial payment is part of a recurring payment. |
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.
For more information on the response codes, see Codes.
Wallet Payment Scenarios (via Web SDK Integration):
For more information see, Testing your Wallet Payment Integration.