Web
Web SDK
Our Web SDK provides a fully customisable iFrame JavaScript solution, which allows you to embed card payments into your checkout page.
You will not take on additional PCI scope, as sensitive card information:
card number (PAN)
expiry date
CV2
will be submitted by your customers into fields hosted by Judopay.
 |
A one-use token is provided, which is used by your backend server to complete the transaction.
Caution
The one-use token is a different field to the cardtoken.
Web SDK Checkout Flow
The complete checkout flow:
Step | Description |
|---|---|
 | An iframe is loaded on your page, including an instance of a JudoPay JavaScript object. |
 | Consumer enters card details into the iframe fields:
|
 | Consumer clicks on the Pay button:
This token will be valid for 30 minutes. |
 | You send the one-use token to your backend, to process the transaction. |
 | Your backend makes a second call to Judopay. This call sends the one-use token for the operation such as: Payment or RegisterCard. |
 | Judopay returns the Receipt for the operation. |
Caution
The one-use token is a different field to the cardtoken.
Web SDK Set Up
To set up the Web SDK on your payment page:
1. Include Judopay's JavaScript page on your website by adding a script tag in your HTML code:
<script
src="https://web.judopay.com/js/0.0.7/judopay.min.js">
</script>2. Include a div in the iframe page with a unique ID value:
<div id="payment-iframe" width="100%"></div>
3. Create an instance of the JudoPay object to call the createCardDetails function
4. Provide the iframe div ID as a parameter. This function will return a reference to the card fields.
var judo = new JudoPay("api_token", true);
Var payment = judo.createCardDetails('payment-iframe');Note
The second parameter is called useSandbox.
Set to true to use the Sandbox environment.
Set to false to use the Production environment.
Create a One Use Token
Warning
The one use token does not authorise any transactions but generates a oneTimeUse token for you to issue a payment request to our API endpoints, or to use our Server SDKs to request payment.
To create a One Use Token:
Your consumer clicks the Pay button on your website.
Use your JudoPay instance to generate a one-use token from the card details fields:
judo.createToken(payment);
An encrypted Payload is generated (Judopay will decrypt the payload).
A sample success response:
{
"oneUseToken": "2uhOsi...8KZcn=",
"cardLastfour": "3436",
"endDate": "12/20",
"cardScheme": "Visa",
"cardFunding": "Debit",
"error": false,
"clientDetails": 0 }A sample error response:
{
"error":
{
"message": "Sorry, we're unable to process your request. Please check your details and try again."
}
}
The one-use token will be valid for 30 minutes
Use this token to call our Payment API and process a transaction
You will need to include it as part of an encrypted card model instance
Registering a Card for a One Use Token
Using your Judopay API client instance, create a RegisterEncryptedCardModel to save the consumer's card to Judopay’s card vault
var encryptedCard = new RegisterEncryptedCardModel { OneUseToken = oneUseToken, JudoId = judoId, YourConsumerReference = yourConsumerReference, }; var response = client.RegisterCards.Create(encryptedCard); var receipt = response.Response as PaymentReceiptModel; if(receipt.Result === "Success") { var cardToken = receipt.CardDetails.CardToken; }The response will include a card token
The card token does not expire
The card token can be used in a TokenPaymentModel for the next transaction
Making a Transaction with a One Use Token
Using your Judopay API client instance, create a OneTimePaymentCardModel and immediately process a payment with the one-use token.
The response includes a card token :
var oneTimePayment = new OneTimePaymentModel { OneUseToken = oneUseToken, JudoId = judoId, YourConsumerReference = yourConsumerReference, YourPaymentReference = yourPaymentReference, Amount: 1.0, Currency: "GBP" }; var response = client.Payments.Create(oneTimePayment); var receipt = response.Response as PaymentReceiptModel; if(receipt.Result === "Success") { var cardToken = receipt.CardDetails.CardToken; }Save the card token for the next transaction
If 3D Secure is enabled, the response message = Requires 3D Secure
All fields required to run the 3D Secure check will be available in the Receipt:
acsUrlPaReqMD
{
"receiptId": "415874660497166336",
"result": "Requires 3D Secure",
"message": "Issuer authentication required",
"acsUrl": "https://gw1.paymentsensegateway.com:4430/ACS/Default.aspx",
"md": "1902...2484",
"paReq": "eJxd...kqXcvg=="
}
To complete the transaction the 3D Secure form needs to be displayed to the consumer.
This can be achieved in any of the following ways:
a redirect
pop-up window
iframe
For more details, see 3D Secure.
Form Customisation
The configuration file is key for customising the behaviour and look of the Iframe.
You can change the appearance, behaviour and language by passing a configuration JSON object into createCardDetails.
Tip
Wrap up your configuration in a separate js file and include it on your page.
var styleOptions = {
iframe {
...
}
}
var judo = new JudoPay('Your Token', true);
var paymentFrame = judo.createCardDetails('', styleOptions)
Form Customisation Top Level Properties
The Web SDK has a default setting for all properties, you override these in the config file.
The config file is a simple JSON object containing the following properties:
Property Name | Values | Default |
|---|---|---|
language | language from supported list | en |
showCardTypeIcons | boolean | true |
backgroundColor | HTML colour ('red') or Hex color ('#FF0000') | white |
layout | vertical, horizontal or compact | vertical |
styles | JSON object which is defined below | specified below |
fonts | JSON array which is defined below | specified below |
The configuration file is optional.
Styles Properties
Configuration to style fields is within the Styles object.
Styles can be applied to all fields by placing the style attribute in the default object inside Styles. You can also apply styles individually to fields, directly to the field name.
The styles object has 6 properties:
Default
Focus
Error
Valid
cv2
expiryDate
Each of these properties has three properties:
Field
Label
Container
The properties for field and label:
Mapped to the style objects of the input and label HTML elements.
The properties for container:
Mapped to the div that contains both the input and label.
The properties for focus, error and valid:
Mapped on state transition allowing the functionality to be consistent with other forms on your site.
Any property defined in default will be applied to all the fields.
Any property defined in a field will take priority over a default property, the fields are expiryDate and cv2.
All valid style properties are supported and take the form of camel cased CSS properties, eg padding-bottom becomes paddingBottom.
styles: {
default: {
field: {
backgroundColor: '#0a0a0a',
color: '#EEE',
padding: '10px',
margin: '0 20px',
width: '90%',
borderRadius: '4px',
boxShadow: 'rgba(255, 255, 255, 0.8) 0px 0px 10px inset'
},
label: {
color: '#EEE',
padding: '10px 10px 0 25px',
fontWeight: 'bold',
textTransform: 'capitalize'
}
},
focus: {
field: {
backgroundColor: '#2a2a2a',
color: '#EEE'
},
},
error: {
field: {
backgroundColor: '#1a0a0a',
color: '#990000'
}
},
valid: {
field: {
color: '#CFC'
}
},
cv2: {
field: {
margin: "0 20px 10px;"
},
container: {
width: '47%',
paddingBottom: "20px"
}
},
expiryDate: {
field: {
marginBottom: "10px;"
},
container: {
width: '47%',
paddingBottom: "20px"
}
}
Form Layout
Three layout options are provided:
Vertical
Compact
Horizontal
Form Fonts
An array of JSON objects each representing a font, are added to the page.
They can be referenced from the Style object.
Each object can have the following properties:
Property Name | Values | Example Value |
|---|---|---|
family | Specifies the name of the font face value properties. | Roboto |
src | Specifies the resource containing the font data. | "/fonts/OpenSans-Regular-webfont.woff2" |
display | Determines how a font face is displayed. Based on whether and when it is downloaded and ready to use. | auto |
style | Specifies the font styles. | italic |
unicodeRange | The range of font Unicode code points to be used. | U+0025-00FF, U+4?? |
weight | Specifies the font weight, or boldness. | 400 |
The following example loads Roboto from Google fonts and assigns it:
fonts: [
{
family: 'Roboto',
src: 'https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2',
display: 'auto',
style: 'normal',
unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
weight: '400'
}
],
styles: {
default: {
field: {
fontFamily: "'Roboto', sans-serif",
},
label: {
fontFamily: "'Roboto', sans-serif",
}
},
Language Translations
Judopay's Web SDK supports multiple languages.
Tip
The default property is English.
Language | Code |
|---|---|
English | en |
French | fr |
Spanish | es |
Portuguese | pt |
German | de |
Changing the Form Language
To change the language of the form:
1. Set a language variable in your configuration file.
2. Pass in the language code as a string:
var customStyle = {
iframe1 : {
language : "es"
...
}
}3. For the purpose of this exercise, the iframe will now load using Spanish translations.
Adding a New Language
You can add any language you need.
To add a new language:
Add the language in a customLanguages property in your Judopay configuration file.
This property can either be a single dictionary for one language, or an array of dictionaries for multiple languages.
For the purpose of this exercise, the example shows how to add Romanian:
var customStyle = {
iframe1 : {
language : "ro",
customLanguages :
{
"ro" : {
fieldLabels: {
cardNumberLabel: "Număr de card",
expiryDateLabel: "Data Expirarii",
cardVerificationCodeLabel: "CVC"
},
fieldPlaceholders: {
cardNumberPlaceholder: "Număr de card",
expiryDatePlaceholder: "LL / AA ",
cardVerificationCodePlaceholder: "CVC"
},
errors : {
0: "Numărul cardului poate conține numai numere",
1: "Numărul cardului nu este valid",
2: "Tipul de card nu este recunoscut, verificați din nou numărul dvs",
3: "Numarul cardului este necesar",
4: "Cardul a expirat",
5: "Data expirării cardului nu este validă",
6: "Data expirării necesară",
7: "Codul {0} este prea scurt pentru cartea de {1}",
8: "Codul {0} este prea lung pentru carte de {1}",
9: "Codul {0} poate conține numai numere",
10: "Codul {0} necesar pentru cartea de {1}"
}
}
},
...
}
};
Warning
It is important the language dictionary follows this structure with inner dictionaries and strings, so the translations can be applied.
Now all strings used in the application will be taken from the new language set.
As well as adding any language into the customLanguages property, also set the language for the error code (ro).
It is recommended to copy this example and change the strings when defining your new language.
Overriding an Existing Language
You can also modify the language to change the phrasing, words and dialects used
For the purpose of this exercise, the Romanian language is added in this example, to illustrate how multiple dictionaries can be added if customLanguages is defined as an array:
var customStyle = {
iframe1 : {
language : "en",
customLanguages : [
{
"en" : {
fieldLabels: {
cardNumberLabel: "Credit Card Number",
expiryDateLabel: "Expiration Date",
cardVerificationCodeLabel: "CVC"
},
fieldPlaceholders: {
cardNumberPlaceholder: "xxxx xxxx xxxx xxxx",
expiryDatePlaceholder: "MM / YY ",
cardVerificationCodePlaceholder: "xxx"
},
errors : {
0: "Card number must be numeric",
1: "Card number not valid",
2: "Card type not recognised",
3: "Card number required",
4: "Card is expired",
5: "Invalid expiry date",
6: "Expiry date required",
7: "{0} code too short",
8: "{0} code too long",
9: "{0} code must be numeric",
10: "{0} code required"
}
}
},
{
"ro" : {
fieldLabels: {
cardNumberLabel: "Număr de card",
expiryDateLabel: "Data Expirarii",
cardVerificationCodeLabel: "CVC"
},
fieldPlaceholders: {
cardNumberPlaceholder: "Număr de card",
expiryDatePlaceholder: "LL / AA ",
cardVerificationCodePlaceholder: "CVC"
},
errors : {
0: "Numărul cardului poate conține numai numere",
1: "Numărul cardului nu este valid",
2: "Tipul de card nu este recunoscut, verificați din nou numărul dvs",
3: "Numarul cardului este necesar",
4: "Cardul a expirat",
5: "Data expirării cardului nu este validă",
6: "Data expirării necesară",
7: "Codul {0} este prea scurt pentru cartea de {1}",
8: "Codul {0} este prea lung pentru carte de {1}",
9: "Codul {0} poate conține numai numere",
10: "Codul {0} necesar pentru cartea de {1}"
}
}
}
],
...
}
};
Change Form Language at Runtime
You can change the language used in the form at run time. This is useful for consumers running a Single Page Application (SPA).
The JudoPay object which initialises the form provides a method for updating a language. You can hook this method up to a button/event of your choice for dynamically changing the language.
In the example below, a method is added to an anchor element on the checkout page, which will change the language used after the iframe is already initialised.
<script>
var judo = new JudoPay('Your Token', true);
</script>
<a href="javascript:judo.changeIframeLanguage('de');">de</a>
Configuration Example
Below is an example config file which sets the styles for:
Layout
Background colour
Inputs
Labels
It also modifies the error and UI strings for the default language: English.
var exampleConfig = {
iframe: {
language: 'en',
errorFieldId: 'judopay-errors-2',
showCardTypeIcons: true,
cardTypeIconRight: '10px',
cardTypeIconTop: '-2px',
backgroundColor: '#e5e5e5',
layout: "compact",
fonts: [
{
family: 'Roboto',
src: 'https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2',
display: 'auto',
style: 'normal',
unicodeRange:
'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
weight: '400'
}
],
styles: {
default: {
field: {
fontFamily: "'Roboto', sans-serif",
fontSize: '17px',
backgroundColor: '#e5e5e5',
borderTop: 'none',
borderRight: 'none',
borderLeft: 'none',
boxShadow: 'none',
margin: '-10px 0 -5px',
padding: '6px 0'
},
label: {
color: '#F77',
fontFamily: "'Roboto', sans-serif",
opacity: '0',
height: '15px',
fontSize: '8px',
display: 'inline-block',
transition: 'opacity 0.6s',
marginLeft: '5px',
position: 'relative',
bottom: '-10px',
zIndex: '100'
}
},
focus: {
field: {
backgroundColor: '#F0F0F0',
color: 'rgb(130, 130, 130)',
padding: '12px 6px 0',
fontSize: '16px',
},
label: {
opacity: "1",
color: 'rgb(130, 130, 130)'
}
},
error: {
field: {
backgroundColor: '#e5ecff',
padding: '12px 6px 0',
},
label: {
opacity: "1"
}
},
valid: {
field: {
backgroundColor: '#e5ffec',
color: 'green',
padding: '12px 6px 0',
},
label: {
color: 'green',
opacity: "1"
}
},
customLanguages: {
"en": {
fieldLabels: {
cardNumberLabel: "Credit Card Number",
expiryDateLabel: "Expiration Date",
cardVerificationCodeLabel: "CVC"
},
fieldPlaceholders: {
cardNumberPlaceholder: "xxxx xxxx xxxx xxxx",
expiryDatePlaceholder: "MM / YY ",
cardVerificationCodePlaceholder: "xxx"
},
errors: {
0: "Card number must be numeric",
1: "Card number not valid",
2: "Card type not recognised",
3: "Card number required",
4: "Card is expired",
5: "Invalid expiry date",
6: "Expiry date required",
7: "{0} code too short",
8: "{0} code too long",
9: "{0} code must be numeric",
10: "{0} code required"
}
}
}
}
}
}
Configuration File Example
Below is an example config file which sets the layout, background colour, input and label styles.
It also modifies the error and UI strings for the default language: English.
var exampleConfig = {
iframe: {
language: 'en',
errorFieldId: 'judopay-errors-2',
showCardTypeIcons: true,
cardTypeIconRight: '10px',
cardTypeIconTop: '-2px',
backgroundColor: '#e5e5e5',
layout: "compact",
fonts: [
{
family: 'Roboto',
src: 'https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2',
display: 'auto',
style: 'normal',
unicodeRange:
'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
weight: '400'
}
],
styles: {
default: {
field: {
fontFamily: "'Roboto', sans-serif",
fontSize: '17px',
backgroundColor: '#e5e5e5',
borderTop: 'none',
borderRight: 'none',
borderLeft: 'none',
boxShadow: 'none',
margin: '-10px 0 -5px',
padding: '6px 0'
},
label: {
color: '#F77',
fontFamily: "'Roboto', sans-serif",
opacity: '0',
height: '15px',
fontSize: '8px',
display: 'inline-block',
transition: 'opacity 0.6s',
marginLeft: '5px',
position: 'relative',
bottom: '-10px',
zIndex: '100'
}
},
focus: {
field: {
backgroundColor: '#F0F0F0',
color: 'rgb(130, 130, 130)',
padding: '12px 6px 0',
fontSize: '16px',
},
label: {
opacity: "1",
color: 'rgb(130, 130, 130)'
}
},
error: {
field: {
backgroundColor: '#e5ecff',
padding: '12px 6px 0',
},
label: {
opacity: "1"
}
},
valid: {
field: {
backgroundColor: '#e5ffec',
color: 'green',
padding: '12px 6px 0',
},
label: {
color: 'green',
opacity: "1"
}
},
customLanguages: {
"en": {
fieldLabels: {
cardNumberLabel: "Credit Card Number",
expiryDateLabel: "Expiration Date",
cardVerificationCodeLabel: "CVC"
},
fieldPlaceholders: {
cardNumberPlaceholder: "xxxx xxxx xxxx xxxx",
expiryDatePlaceholder: "MM / YY ",
cardVerificationCodePlaceholder: "xxx"
},
errors: {
0: "Card number must be numeric",
1: "Card number not valid",
2: "Card type not recognised",
3: "Card number required",
4: "Card is expired",
5: "Invalid expiry date",
6: "Expiry date required",
7: "{0} code too short",
8: "{0} code too long",
9: "{0} code must be numeric",
10: "{0} code required"
}
}
}
}
}
}Web SDK Errors
The Web SDK is designed to provide feedback quickly and clearly to the consumer.
To display error messages:
Add a div with the id judopay-errors on your page, ideally below the iframe:
<div class="judopay-errors"></div>;
The table below displays all errors that can be returned:
ID | Error String |
|---|---|
0 | Card number can only contain numbers |
1 | Card number not valid |
2 | Card type not recognised, please recheck your number |
3 | Card number required |
4 | Card is expired |
5 | Card expiry date is not valid |
6 | Expiry date required |
7 | {0} code too short for {1} card |
8 | {0} code too long for {1} card |
9 | {0} code can only contain numbers |
10 | {0} code required for {1} card |
For errors 7-10; the numbers appear in curly brackets. These will be changed into values depending on the current state of the iframe form.
For example:
{0} will change to the card verification code acronym. This is named differently depending on the card type (e.g. CVC, CVV).
{1} will refer to the detected card type, for example Visa, Mastercard or Discover.
If the iframe has detected a Visa number, the following error message transform would occur:
{0} code too long for {1} card" -> "CVC code to long for Visa card
A similar error with an American Express card, the message would appear as:
"CID code too long for American Express card"
Web Payments
Warning
Web Payments is not the same as using the Web SDK.
Integrate simple and secure web app card payments into your project with web payments optimized for mobile screens.
 |
Web Payments Set Up
Caution
Web Payments is not the same as using the Web SDK.
From the Judopay Portal Dashboard:
Enable the web payments configuration
Set up the success and failure URLs
Verify your app has the required permissions enabled
Build the transaction header
Get your Token and Secret
Add them to the basic authorization object, base64 encoded:
HTTP Header
POST https://gw1.judopay-sandbox.com/webpayments/payments
API-Version: 5.6
Accept: application/json
Authorization: Basic {authstring}Replace {authstring} with base64 encoding of:
API Token (username)
Colon
API Secret (password)
Enable Web Payments Configuration
Note
Web Payments do not apply for Mobile and your Server Side or Mobile only integrations
 |
Step | Description |
|---|---|
| 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. |
| Select Web payments configuration. |
| The Web payments configuration screen appears. |
| 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). |
| Click Save configuration. |
Tip
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.
Verify Permissions
Set your app's permissions:
 |
Step | Description |
|---|---|
| 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. |
| Select the environment to set permissions:
For the purpose of this exercise, Sandbox tokens is selected |
| The token information is displayed. Native apps have the following default permissions:
Click Edit. |
| The Permissions window appears. Select or deselect a permission.
For the purpose of this exercise, List all Transactions is selected |
| Click Save Permissions. |
| The added permission appears in the list. Test to validate the change has taken effect. |
Token and Secret
Find your account’s API token and secret on the Portal dashboard.
Add them to the basic authorization object, base64.
Sandbox Token and Secret
Each Token and Secret pair will have specific permissions configured.
Tip
Double check these permissions before using the Token and Secret.
From the Judopay Portal:
To view the Sandbox Token and Secret:
 |
STEP | DESCRIPTION |
|---|---|
| From the side menu, select Your apps Select the app to view the Token and Secret credentials |
| Select Sandbox tokens to see both the Token and Secret for the Sandbox Environment. |
| The Sandbox Token information is displayed. You can: View the Token | Secret | View and Edit Permissions | Disable the token | Add a new Sandbox token |
Note
A live Token and Secret will only be visible within the app once your account is activated.
User Interface
Customise your User Interface to display:
Company Logo: Top of the Payment Form
Button Colours: Background | Shadow | Text
Display Name: Your Trading Name
Tip
You can use an API client which offers most options for customization.
We recommend using our secure payments form to minimise your PCI scope and development time.
Wrap your checkout button with the following:
Form Tag: Checkout Button
Form Action: postUrl
Reference: hidden field
<form action="{postUrl}" method="post"> <input id="Reference" name="Reference" type="hidden" value="{reference}"> <input type="submit" value="Pay now"> </form>Consumer is redirected to Judopay’s hosted secure web payments form
Consumer’s card details are requested
Once the transaction is complete, consumer is redirected to your success or failure URL.
This call will include some extra data in the POST request to your success URL:
application/x-www-form-urlencodedReceipt ID – Unique identifier for that particular transaction
Card Token - Unique to allow repeat payments.
Reference – Transaction key to check the result of a payment and get receipt information.
Check Transaction Results and Receipts
Caution
Do not confuse reference with yourPaymentReference.
Reference: push and pull information with our API.
yourPaymentReference: a variable to track the transaction.
To check the transaction result, send a request to our API using the Reference:
https://partnerapi.judopay-sandbox.com/webpayments/{reference}
HTTP Method: GET
You will receive the following transaction receipt information:
{
"amount": 1.01,
"cardAddress": {
"countryCode": 826
},
"clientIpAddress": "127.0.0.1",
"clientUserAgent": "Mozilla/5.0 (Windows NT 6.2; Win64; x64)...",
"companyName": "trading",
"currency": "GBP",
"expiryDate": "2015-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/v1",
"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 ….)
Test Web Payments - Sandbox
To test your web payment integration:
Ensure the project is configured for the sandbox environment
Use the test cards provided
Request:
https://gw1.judopay-sandbox.com/webpayments/payments
HTTP Method: POST
Create a transaction request including all the mandatory objects.
{
"judoId":"100016172",
"amount": 125.00,
"currency": "GBP",
"yourConsumerReference": "example_customer_reference_00001",
"yourPaymentReference": "example_payment_reference_00001",
"yourPaymentMetaData":{
"invoiceNumber": "000546" ,
"customerNumber": "ABC123456"
},
"clientIpAddress": "127.0.0.1",
"clientUserAgent": "example browser 5.25"
}Response
Retrieve Judopay’s API response:
"postUrl": "https://pay.judopay-sandbox.com/v1", "reference": "yth67_82nhjmf903jnmaiine…"
Caution
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.
Going Live with Web Payments
Use the live environment for testing before deploying your app.
Note
You will need to have tested your app in the sandbox environment before going live.
1. Activate your Account
To process live payments, ensure you have a live account.
Complete the activation form for us to make the necessary changes to your account.
We will contact you as soon as you are live.
2. Point to the Live Environment
Caution
When you change environments, remembe to use the correct API Token and API Secret for that environment. Using the wrong tokens and secrets will result in an authorisation failure.
Delete sandbox in the header URL
Replace your sandbox API Token and Secret for the live API Token and Secret
Find these in Judopay Portal > Your apps > {app name} > Live Tokens
HTTP Header
POST https://gw1.judopay.com/webpayments/payments API-Version: 5.6 Accept: application/json Authorization: Basic {authstring}
3. Test Live Payments
Ensure the SDK is properly configured for the live environment
Use real debit or credit cards
Test cards provided will not work in the live environment
We recommend performing pre-authorizations followed by a void, or regular payments followed by a refund
Send a refund through the Judopay Portal > History
Test all payment scenarios and security features to verify the expected behaviour:
Successful Result
Ensure the payment process redirects the consumer to the Success URL
Declined Result
Ensure the payment process redirects the consumer to the Failure URL
Cancelled Transaction
Click Cancel in the web payments UI
We recommend you return the consumer to the URL they visited before the web payment was initiated.