Quick Start

Quickly integrate and perform a test payment with Judopay.

The following example takes you through the steps to quickly integrate and perform a test card payment using Judopay’s Web SDK.

The sample code uses PHP to directly call our API, however this can also be used as a guide in understanding how to call our API's by other methods.

Start Integrating with Judopay

To start integrating with Judopay:

Step One: Sign up for your Judopay Sandbox Account

You need your sandbox account so you can process test transactions while developing your app.



An app is a Judopay term and relates to your API credentials.

Once signed up, you will receive your:

  • TokenSecretAuth
    • The token and secret pair
    • Specify your token in Username and secret in Password
  • JudoId

Ensure Judopay has enabled 3D Secure in your sandbox account. If this is not enabled the test transaction may appear successful without following the correct payment flow. Contact ​Customer Support​​ to set this up.



Step Two: Get Access to your Judopay Dashboard

Get access to your dashboard in the Judopay Portal where you can create your app. For more details, see Creating your App.



Perform a Test Payment

The following guide is a full working example for use with Judopay's Web SDK.

When authorising /payments or /preauths it is recommended to use paymentSession.

Step One: Create a paymentSession




Make a HTTP POST Request: /paymentsession

Payment Session Request Example
Response Reference Example



Your backend server should store the paymentSession response reference returned by Judopay's API. Use this reference from the response to populate paymentSession when calling /payments and /preauthsfrom your front-end client. See Step Three: Making a Transaction.

The following parameters need to remain consistent between the /paymentsessionrequests and the /payments and /preauths requests, otherwise the transaction will fail:

  • YourPaymentReference
  • YourConsumerReference
  • JudoID
  • Currency
  • Amount

This is used to cross reference the validity of the transaction.



Step Two: Add the Payment Form to your Website

example payment form



Create and customise the Judopay Web SDK iFrame:



An example of an iFrameConfiguration object:

iFrame Configuration Object Example


The iframe is created in your <SCRIPT> location.

See below for more details on the parameters that create the iFrameConfiguration object:




Step Three: Making a Transaction

To make a transaction:

  1. Define the paymentConfiguration object for the payment or preauth:

Ensure the details used when creating the paymentSession match the values set in the following configuration:

Payment Configuration Object Example



Web SDK Payment Parameter Descriptions

See below for more details on the parameters that create the paymentConfiguration object:



2. In a function, add the invokePaymentcall. This will invoke a payment using the paymentSession and paymentConfiguration

Invoke Payment Example


To invoke a preAuth, change the above code to .invokePreauth

3. To call the function (in step 2 above) to invoke the payment or preauth, add the onclickattribute to the payment button <div>: <button id="submit-payment-button" onclick="handlePaymentButtonClick()"> Pay Now </button>



Step Four: Handle the Response




Putting it all together

Putting it all together to display the payment form and make a transaction:

Example Flow



Testing and Customising your Integration

For more information, see Testing Web SDK - Card Payments.

For more information on customising your integration, see Customising your Web SDK Integration.

Updated 11 Oct 2024
Docs powered by Archbee