---
title: Testing Digital Wallet Payments - via Web SDK
slug: testing-digital-wallet-payments-via-web-sdk
docTags:
createdAt: 2024-06-10T16:19:24.367Z
---
:::hint{type="info"}
Make sure you are using Web SDK Version **0.0.18** (or higher).
:::
:::hint{type="warning"}
**Decline scenarios** for wallet payments cannot be tested in the sandbox environment.
:::
Testing Card payments for your Digital Wallet payments **via Judopay's Web SDK integration**:
### Apple Pay™ Prerequisites
**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.
:::
- [Place the Apple Pay™ Button](docId:40dWE6LBub7vdKza1QYDC)
- [Update the Apple Pay™ Button](docId:40dWE6LBub7vdKza1QYDC)
- [Handle the Apple Pay ™ Button Click](docId:40dWE6LBub7vdKza1QYDC)
**Direct from Judopay**:
- Judopay JudoId
- A valid `apple-developer-merchantid-domain-association`
- Get it [here](docId:40dWE6LBub7vdKza1QYDC).
**From the Merchant**:
- Domain(s) being used for Apple Pay™
- These are the domain(s) where the Apple Pay™ button will be displayed, for example the checkout page.
:::hint{type="info"}
These must be SSL enabled domains, Apple will not allow non-encrypted domains to be used.
:::
- Account(s) being used for Apple Pay™
For a successful end-to-end wallet payment testing journey, it is recommended to:
- Perform wallet test scenarios in a **production **environment
- Use **live **cards to process test payments and preAuths.
***
### Google Pay™ PreRequisites
**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.
:::
- [Display the Google Pay™ Button](docId:40dWE6LBub7vdKza1QYDC)
**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).
To add your **test card suite** to your Digital Wallet to process test payments and preAuths, register your [Google Pay Wallet.](https://developers.google.com/pay/api/android/guides/resources/test-card-suite)
- Details for the cards in your test card suite are hard coded into the test wallet, therefore some negative scenarios cannot be simulated, due to limitations to Google Pay™s test environment.
For example you cannot simulate an incorrect cv2, or insufficient funds.
- You will only receive a success response.
- No charge will be made on the test cards.
***
## Wallet Payment Scenarios (Positive Flow)
The digital wallet payment flow provides consumers with an extra layer of security, encrypting and decrypting the card details sent in the payload by replacing the consumer's card details with a device token, or dynamic security code.
### Apple Pay™ and Google Pay™ Scenarios
| **Suggested Test Scenario** | **Expected Outcome** |
| ------------------------------------- | -------------------- |
| Process an Apple Pay™ Wallet payment. | 200
Successful |
| Process an Apple Pay™ Wallet preAuth. | 200
Successful |
| Process a Google Pay™ Wallet payment. | 200
Successful |
| Process a Google Pay™ Wallet preAuth. | 200
Successful |
For more information on API credentials and permissions, see [Permissions](docId\:S_8hOAMytkgY13t0P657-).
***
### Calling the Web SDK Functions
### Apple Pay™ Configuration Object Parameters
**paymentRequestApplePay **
| **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. |
| `initiativeContext`
String
Optional | Your fully qualified domain name associated with your **Apple Pay Merchant Identity Certificate**.
* The default is: `window.location.hostname`
* For example: `initiativeContext ="web.judopay.com"` |
| `methodConfiguration`
Object
Optional | This parameter contains the following fields:
* version
- number
* supportedNetworks
- array containing any of the following strings:
- “amex”
- “chinaUnionPay”
- “discover”
- “masterCard”
- “visa”
- “maestro”
- “jcb”
* merchantCapabilities
- array containing any of the following strings:
- "supports3DS"
- "supportsCredit"
- "supportsDebit"
- "supportsEMV"
* countryCode
- string |
| `details`
Object
Optional
| Provides information about the specific transaction. Use this object to supply the information for recurring payments.
For more information, see [Apple Pay™ Recurring Payments .](docId\:oelqjygAmbce2048QcJP1)
See [here](https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest/PaymentRequest) for more details on the parameter fields. |
| `options`
Object
Optional | Enables you to set options to control the behaviour of the user agent.
See [here](https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest/PaymentRequest) for more details on the parameter fields. |
| `onShippingAddressChange`
Method
Optional | Dispatched when the user changes their shipping address.
See [here](https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest/shippingaddresschange_event) for more details on this parameter. |
| `onShippingOptionChange`
Method
Optional | Dispatched when the user changes a shipping option.
See [here](https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest/shippingoptionchange_event) for more details on this parameter. |
| `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.
For more information, see [Apple Pay™ Recurring Payments .](docId\:oelqjygAmbce2048QcJP1) |
### Google Pay™ Configuration Object Parameters
**paymentRequestGooglePay **
| **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. |
:::CodeblockTabs
Apple Pay Request Example
```javascript
//4. called when the Apple Pay button is clicked
function handleApplePayButtonClick() {
let applePayConfiguration = {
amount: 'amount',
currency: 'currency',
yourConsumerReference: 'yourConsumerReference',
yourPaymentReference: 'yourPaymentReference',
judoId: 'judoId',
initiativeContext: 'yourDomainName'
}
//trigger WebSDK Apple Pay payment with Apple Pay configuration object
judo.digitalWallets.invokePaymentWithApplePay(paymentSession, configuration)
.then(handleSuccess) // Judopay receipt object will be returned
.catch(handleError) // Judopay error object will be returned
}
//1. create Apple Pay button with styling object:
var button = judo.digitalWallets.getApplePayButton({
height: 38,
width: 240,
language: 'EN',
style: 'black',
type: 'buy'});
//2. set the function to be called when the Apple Pay button is clicked
button.onclick = handleApplePayButtonClick
//3. add the Apple Pay Button to your page:
const container = document.getElementById('apple-pay-button-container')
container.append(button)
```
Google Pay Request Example
```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, // Judopay receipt object will be returned
onError: handleError // Judopay error object will be returned
}
//1. initialize Google Pay button with Google Pay configuration object (includes logic to trigger the payment when clicked)
const button = judo.digitalWallets.getGooglePayButton(googlePayConfiguration)
//2. add the Google Pay Button to your page:
const container = document.getElementById('google-pay-button-container')
container.append(button)
```
Response Example (Judopay Receipt Object)
```json
{
"receiptId": "914568453493526528",
"yourPaymentReference": "34a73594-f3b2-414c-a5c9-58679530b418",
"type": "Payment",
"result": "Success",
"judoId": 100502814,
"originalAmount": "5.00",
"netAmount": "5.00",
"amount": "5.00",
"currency": "GBP",
"cardDetails": {
"cardLastfour": "1111",
"endDate": "1230",
"cardToken": "SOF-xFmZmEnoR_Sj9mtrCvrxhw",
"cardType": 1,
"cardScheme": "VISA",
"cardFunding": "Credit",
"cardCategory": "",
"cardCountry": "US",
"bank": "JPMORGAN CHASE BANK, N.A."
},
"cardAddress": {
"address1": "CardHolder House",
"address2": "1 CardHolder Street",
"town": "CardHolder Town",
"postCode": "AB1 2CD",
"countryCode": 826
},
"consumer": {
"yourConsumerReference": "2b45fd3f-cee5-4e7e-874f-28051db65408",
},
}
```
:::
Once the authorisation is complete you will receive either:
- A JSON object response (a Judopay receipt object). Example in the code snippet above.
- An error object
The consumer should be redirected to the outcome screen and the response/error should be handled accordingly.
For example, if the result = **SUCCESS **redirect the consumer to the Success Page, else **ERROR**.
For more information on the response codes, see [Codes](docId:_zrsihomUEW-XnRQ4PBtJ).
***
## Wallet Payment Scenarios (Negative Flow)
**Decline scenarios** for wallet payments cannot be tested in the sandbox environment.
### Important to Consider
- How your app handles negative flows
- Your customer's experience should a negative flow occur:
- Logic to communicate error messages
- Customise how your app responds
- How to maintain application consistency
Limited test coverage is possible in the sandbox environment. The suggested negative test scenarios refer to model and processing error codes and information on why the transaction request failed Judopay's validation checks, which are similar to card payment scenarios.
| **Suggested Negative Test Scenario** | **Expected Error Code** | **Error Description** |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Attempt to perform a wallet payment / preAuth request with the Incorrect currency entered for the specified transaction.
**Default currency = GBP** | 72 | Sorry, we're currently unable to route this transaction. Please check your account details and try again.
If this issue persists, please contact customer services.
This is a [processing error](docId:_zrsihomUEW-XnRQ4PBtJ). |
| Attempt to perform a wallet payment / preAuth request with the incorrect environment (live or sandbox) for your API Token and API Secret and configuration. | 7 | Sorry, we were unable to authorize this request. Please check your details and permissions before trying again. |
:::hint{type="warning"}
Where the codes remain fixed, the descriptions may change.
You **should not **build any error handling logic based on these descriptions.
:::
For more information on error responses returned, see [Web SDK Error Responses](docId:40dWE6LBub7vdKza1QYDC).
***
### Next Steps
Using the response information from a successful wallet payment test transaction, you can test the following scenarios:
Directly call the Transaction API to make a:
- [Collection](docId\:yVjgZT2gxWBDxm3m0wEmu)
- [Refund](docId\:mEbkvLfMxdP3kOlys0uDa)
- [Void](docId\:DMBAKsKJll551SuxQIPuM)