Web Payments

Web Payments
Web Payments is not the same as using the Web SDK.
With Judopay’s Web Payments solution, a minimal integration is all that is required to enable you to take a payment.
Generate hosted payment page links using Judopay’s Transaction API and redirect the consumer back to your own website, using configured redirect URLs. This helps minimise your PCI scope by providing consumers with a secure way to pay online via their browser, optimised for any device.
With 3D Secure 2 built-in and easily enabled, this also ensures your payments meet the 3D Secure 2 (EMV 3D Secure)﻿ (SCA) compliance requirement.
You can customise which screens are visible to the consumer during their payment journey. For more information, see Payment Journey Screen Customisation﻿.
Web Payments enables the following payment methods:
Apple Pay™
Google Pay™
PayPal (BETA)﻿
Klarna (BETA)﻿
iDEAL
Click to Pay
as well as offering consumers the traditional pay with card payment method.
﻿
﻿
Integrating Web Payments
We have now upgraded to Web Payments V2.
Customisation of your UI is coming soon, including functionality to add your company logo.
If you are using an older version of Web Payments, see Web Payments V1﻿ for more information.
Prerequisite
Make sure you have set up web payments in your app:
Web Payments Set Up
Web Payments do not apply for Mobile and your Server Side or Mobile only integrations.
﻿
1
From the side menu, select Your apps.
Select the app you wish to edit. 
For the purpose of this exercise, Document Testing App is selected.
This configuration is to be set up for each of your web payments apps.
2
Select Web payments configuration.
3
The Web payments configuration screen appears.
4
Select the Enable Web payments (hosted redirect web payment) tickbox.
Specify the Success and Failure URLs.
(Depending on the transaction result, this is where the consumer will be redirected once the transaction process is completed).
5
Click Save configuration.
Success and Failure URLs should be configured using the https protocol.
This will prevent the browser’s pop-up messages, warning the consumer of insecure connectivity.
﻿
Web Payments Flow
﻿
﻿
Web Payments - Payment Request
Step One: Create a Web Payments paymentSession
﻿
To create a web payments payment session:
Make a HTTP POST Request: /paymentsession
You can also use the following: HTTP POST Request:
https://api-sandbox.judopay.com/webpayments/payments
Payment Session Request Example
Response Reference Example
{
"judoId": "yourJudoId",
  "yourConsumerReference": "yourConsumerReference",
  "yourPaymentReference": "yourPaymentReference",
  "yourPaymentMetaData": {
    "internalLocationRef": "Example",
    "internalId": 99,
    "hideBackButton": true
  },
  "currency": "GBP",
  "amount": 12.99,
  "cardAddress": {
    "address1": "CardHolder House",
    "address2": "1 CardHolder Street",
    "town": "CardHolder Town",
    "postCode": "AB1 2CD",
    "countryCode": 826,
    "state": "FL",
    "cardHolderName": "John Doe"
  },
  "expiryDate": "2021-02-05T16:28:32.8596+00:00",
  "isPayByLink": false,
  "isJudoAccept": false,
  "successUrl": "https://my.site.com/success",
  "cancelUrl": "https://my.site.com/cancel",
  "emailAddress": "[email protected]",
  "mobileNumber": "7999999999",
  "phoneCountryCode": "44",
  "threeDSecure": {
    "challengeRequestIndicator": "challengeAsMandate"
  },
  "hideBillingInfo": true,
  "hideReviewInfo": true,
  "primaryAccountDetails": {
    "name": "Doe",
    "accountNumber": "12345678",
    "dateOfBirth": "1980-01-31",
    "postCode": "AB1 2CD"
  }
}
{
"judoId": "yourJudoId",
  "yourConsumerReference": "yourConsumerReference",
  "yourPaymentReference": "yourPaymentReference",
  "yourPaymentMetaData": {
    "internalLocationRef": "Example",
    "internalId": 99,
    "hideBackButton": true
  },
  "currency": "GBP",
  "amount": 12.99,
  "cardAddress": {
    "address1": "CardHolder House",
    "address2": "1 CardHolder Street",
    "town": "CardHolder Town",
    "postCode": "AB1 2CD",
    "countryCode": 826,
    "state": "FL",
    "cardHolderName": "John Doe"
  },
  "expiryDate": "2021-02-05T16:28:32.8596+00:00",
  "isPayByLink": false,
  "isJudoAccept": false,
  "successUrl": "https://my.site.com/success",
  "cancelUrl": "https://my.site.com/cancel",
  "emailAddress": "test.user@judopay.com",
  "mobileNumber": "7999999999",
  "phoneCountryCode": "44",
  "threeDSecure": {
    "challengeRequestIndicator": "challengeAsMandate"
  },
  "hideBillingInfo": true,
  "hideReviewInfo": true,
  "primaryAccountDetails": {
    "name": "Doe",
    "accountNumber": "12345678",
    "dateOfBirth": "1980-01-31",
    "postCode": "AB1 2CD"
  }
}
﻿
The reference example has an expiration time of 30 minutes.
If the transaction is not completed within this time, the transaction will fail and the status = Expired.
﻿
Creating a Web Payments - PreAuth Request﻿ and Web Payments - CheckCard Request﻿ is also available.
The CheckCard request is similar to the PreAuth request, just remove the amount field.
﻿
Step Two: Making a Transaction
The consumer is re-directed to the payment form using the web payment reference / URL generated in Step One: Create a Web Payments paymentSession﻿.
The payment form (which is hosted by Judopay), allows the consumer to submit a payment.

Below is an example of a consumer's payment flow within Judopay's hosted payments page:
﻿
1
The consumer is re-directed to the hosted payments page.
The amount to pay is displayed, including all available payment methods.
This screen is only displayed when there are multiple payment methods offered.
2
For the purpose of this exercise, Pay with card is selected.
3
The Billing Information screen appears.
The Billing Information screen can be hidden, see Hide the Billing Information Screen﻿.
For MOTO consumers, the Billing Information and Review & Confirm screens will not be displayed. The consumer will be directed straight to the Pay with Card screen.
4
The consumer enters their billing information.
Entering the billing information is optional.
In order for the address to be used, all the mandatory fields in the billing information page must be completed by the consumer:
address line 1
town
country
See here﻿ for the list of valid ISO 3166-1 format country codes.
state (if country = Canada/USA)
postcode
5
Tap Continue.
6
The Pay with Card screen appears.
The consumer enters their card details.
7
Tap Continue.
8
The Review & Confirm screen appears.
The Review & Confirm screen can be hidden, see  Hide the Review & Confirm Screen﻿.
For MOTO consumers, the Billing Information and Review & Confirm screens will not be displayed. The consumer will be directed straight to the Pay with Card screen.
9
Tap Confirm Payment to pay.
The consumer can tap the Change button to edit their card details / billing information.
10
The Payment Successful screen appears.
The payment information is displayed.
You can redirect the consumer to a Success / Failure URL, see Step Three: Handle the Response﻿.
﻿
Step Three: Handle the Response
The consumer is redirected to the outcome screen. If the result = SUCCESS the consumer is redirected to the Success Page, else ERROR.
If the successUrl / cancelUrl was sent when creating the payment session, the consumer will be redirected to one of these URLs.
To specify the successUrl and cancelUrl, see Web Payments Set Up﻿.
If the successUrl / cancelUrl is not provided, the consumer will be redirected to Judopay’s Success / Error page.
To retrieve more information around the transaction:
From the Success or Error Page, make a HTTPS GET Request:
https://api-sandbox.judopay.com/webpayments/payments/{reference}
See Check Transaction Results and Receipts﻿.
﻿
Web Payments - PreAuth Request
Use webpayments/preauths to reserve funds on a consumer's account.
PreAuths will postpone the completion of the transaction until the goods have been delivered or the service fulfilled.
To create a preAuth request:
Follow Web Payments - Payment Request﻿, and change the request URL to:
https://api-sandbox.judopay.com/webpayments/preauths
﻿
﻿
Web Payments - CheckCard Request
Use webpayments/checkcard to perform a zero amount pre-authorisation (0 Auth).
CheckCard also enables you to check the validity of the card, to be used for future payments.
To create a checkcard request:
Follow Web Payments - Payment Request﻿, and change the request URL to:
https://api-sandbox.judopay.com/webpayments/checkcard
Remove the amount field from the request object.
﻿
﻿
Check Transaction Results and Receipts
To check the transaction result, send a request to our API using the reference from Judopay's response.
Do not confuse reference with yourPaymentReference.
reference: push and pull information with our API. 
yourPaymentReference: a variable to track the transaction.
Request:
Make a HTTPS GET Request: 
https://api-sandbox.judopay.com/webpayments/payments/{reference}
GET Transaction Request Example
//You will receive the following transaction receipt information:

{
    "amount": 12.99,
    "cardAddress": {
    "countryCode": 826
            },
                "clientIpAddress": "127.0.0.1",
                "clientUserAgent": "Mozilla/5.0 (Windows NT 6.2; Win64; x64)...",
                "companyName": "trading",
                "currency": "GBP",
                "expiryDate": "2025-11-13T14:47:52.1183+00:00",
                "judoId": "100337815",
                "partnerServiceFee": 1.01,
                "paymentCancelUrl": "http://www.marca.com/",
                "paymentSuccessUrl": "http://www.20minutos.es/",
                "reference": "3wcAAAsAAAANAAAADgAAAJ_C3aHop-cZcb5PTdUGOH8ceQ1_wn8fP46UmY_CWYMZ8jcUgA",
    "allowedCardTypes": [
                1,
                2,
                3,
                8,
                10,
                11,
                12,
                13
                        ],
    "response": {
        "postUrl": "https://pay.judopay-sandbox.com/v2",
        "reference": "3wcAAAsAAAANAAAADgAAAJ_C3aHop-cZcb5PTdUGOH8ceQ1_wn8fP46UmY_CWYMZ8jcUgA"
            },
    "status": "Expired",
    "transactionType": "SALE",
    "yourConsumerReference": "001",
    "yourPaymentMetaData": {},
    "yourPaymentReference": "003",
    "webPaymentOperation": 0
}
//You will receive the following transaction receipt information:

{
    "amount": 12.99,
    "cardAddress": {
    "countryCode": 826
            },
                "clientIpAddress": "127.0.0.1",
                "clientUserAgent": "Mozilla/5.0 (Windows NT 6.2; Win64; x64)...",
                "companyName": "trading",
                "currency": "GBP",
                "expiryDate": "2025-11-13T14:47:52.1183+00:00",
                "judoId": "100337815",
                "partnerServiceFee": 1.01,
                "paymentCancelUrl": "http://www.marca.com/",
                "paymentSuccessUrl": "http://www.20minutos.es/",
                "reference": "3wcAAAsAAAANAAAADgAAAJ_C3aHop-cZcb5PTdUGOH8ceQ1_wn8fP46UmY_CWYMZ8jcUgA",
    "allowedCardTypes": [
                1,
                2,
                3,
                8,
                10,
                11,
                12,
                13
                        ],
    "response": {
        "postUrl": "https://pay.judopay-sandbox.com/v2",
        "reference": "3wcAAAsAAAANAAAADgAAAJ_C3aHop-cZcb5PTdUGOH8ceQ1_wn8fP46UmY_CWYMZ8jcUgA"
            },
    "status": "Expired",
    "transactionType": "SALE",
    "yourConsumerReference": "001",
    "yourPaymentMetaData": {},
    "yourPaymentReference": "003",
    "webPaymentOperation": 0
}
﻿
﻿
We recommend displaying the following order information on your receipt screen:
Date and Time
Amount
Result (Success or Failure message)
appearsOnStatementAs (This will appear on your card statement as ….)
﻿
Payment Journey Screen Customisation
The web payments card payment journey consists of the following steps:
Select payment method
Enter billing information (Optional)
Enter card details
Review and Confirm (Optional)
You can customise whether to display the billing information, the Review & Confirm screens and the Back button to the consumer during their payment journey.
﻿
Hide the Billing Information Screen
For MOTO consumers, the Billing Information screen will not be displayed. 
The consumer will be directed straight to the Pay with Card screen
Set the hideBillingInfo flag when creating the payment session. The billing information screen will be hidden.
Create a web payment session where hideBillingInfo = true
The consumer is directed to the card payment screen.
﻿
Hide the Review & Confirm Screen
For MOTO consumers, the Review & Confirm screen will not be displayed. 
The consumer will be directed straight to the Pay with Card screen.
Set the hideReviewInfo flag when creating the payment session. The Review & Confirm screen will be hidden.
Create a web payment session where hideReviewInfo = true
The consumer will not be directed to the Review & Confirm screen during the payment flow.
The hideBillingInfo and hideReviewInfo flags can be used in combination, by setting both flags.
﻿
Hide the Back Button
﻿
In the yourPaymentMetaData block, set the hideBackButton flag to true when creating the payment session. The Back button will be hidden.
Create a web payment session where hideBackButton = true
The Back button will not be displayed on the landing page:
﻿
﻿
Pre-fill the billingAddress / cardHolder address
If you set cardAddress when creating the payment session, the billing information screen will be hidden.
If required, the consumer can edit the address when they reach the Review & Confirm screen:
We will use the latest address provided when processing the payment.
﻿
1
The consumer is directed to the payment method screen.
For the purpose of this exercise, the billing address has been supplied by the merchant when creating the payment session.
2
The consumer is directed to the card payment screen.
3
The Review & Confirm screen displays the address as supplied by the merchant when creating the payment session.
4
The consumer taps the CHANGE button to edit the billing information.
5
The consumer is directed to a blank billing information page.
6
The consumer edits the billing details and taps the CONTINUE button.
All the mandatory fields in the billing information page need to be completed by the consumer, otherwise the address will not be updated:
(address line 1 | town | country | (state if country = Canada/USA), | postcode).
See here﻿ for the list of valid ISO 3166-1 format country codes.
7
The billing information (from step 3) has been replaced with the new address details.
﻿
Adding Payment Methods
You can enable alternative payment methods, as well as offering consumers the traditional pay with card payment method.
There is no additional integration required, just contact customer support to enable this for you.
﻿
Testing your Integration
Ensure the project is configured for the sandbox environment.
You will need your Authentication Methods﻿.
Use the Test Cards﻿ provided.
For more information, see Testing Web Payments - Card Payments﻿.
Updated 18 Oct 2024
Payment Form Error Messages
PayByLink