Handling a Transaction
This tutorial is for your client side.
This tutorial will guide you through how to invoke a transaction using the Web SDK, when the consumer presses the payment button on your web page.
It will also cover how to handle the various responses from the Web SDK depending on the result of the transaction.
Ensure you have already watched the below tutorials:
Full Tutorial
We have created video chapters from the full tutorial, to help you easily re-watch different parts of the tutorial. We have included an overview and example code snippets for each section below:
When using the code snippets, ensure to replace any field values with your own values.
1. Intro.
2. The Configuration Object
Defining the configuration object that will be passed onto the Web SDK when calling the Payment / PreAuth functions.
In a <script> tag or JavaScript file:
function handlePaymentButtonClick() {
const paymentConfiguration = {
judoId: "yourJudoId,
amount: 13.00,
currency: "GBP",
phoneCountryCode: "44",
challengeRequestIndicator: "challengeAsMandate",
initialRecurringPayment: false,
yourConsumerReference: window.yourConsumerReference,
yourPaymentReference: window.yourPaymentReference,
billingAddress: {
address1: "My house",
address2: "My street",
town: "My town",
postCode: "TR14 8PA",
country: 826
},
mobileNumber: "07999999999",
emailAddress: "contact@judopay.com"
}
}
3. Calling the Web SDK Transaction Function
Adding functionality when the payment button is clicked, the Web SDK transaction function is called.
The configuration object and payment session reference are passed as parameters. This function returns a promise with the transaction result.
// instance of the judopay webSDK
// would have been created in previous tutorial: 'Adding payment iFrame to your web page'
const judo = new JudoPay("yourAPIToken", true)
function handlePaymentButtonClick() {
const paymentConfiguration = {...} //defined in section 2
judo.invokePayment(paymentSessionReference, paymentConfiguration) //invokePreauth() for preauths
.then((response) => {
// handle when promise is resolved (transaction successful/declined)
console.log(response)
)}
.catch((error) => {
// handle when promise is rejected (transaction failed due to error)
console.log(error)
})
}
Where your payment button is already defined:
<button id="submit-payment-button" onclick="handlePaymentButtonClick()">Pay Now</button>
4. Testing the Transaction
Testing your implementation using the resources available in Testing your Integration section in our developer documentation.
5. Handling the Response
Interpreting the various responses from the Web SDK and how these can be displayed to the consumer.
-
When the promise is resolved, it will return a receipt object containing information on the transaction
This does not mean the result of the transaction was successful.
-
When the promise is rejected, it will return an error object containing information on why the transaction failed.
This chapter also includes an overview of how to validate the result of the transaction, using server to server calls to our API (recommended).
function handlePaymentButtonClick() {
const paymentConfiguration = {...} //defined in section 2
judo.invokePayment(paymentSessionReference, paymentConfiguration) //invokePreauth() for preauths
.then((response) => {
// handle when promise is resolved (transaction successful/declined)
console.log(response)
//example of redirecting to result page using url parameters
const {result, receiptId, amount, yourPaymentReference, cardDetails, createdAt} = response
const {cardScheme, cardLastfour} = cardDetails
if (result === "Success") {
window.location.replace("http://successPage.hmtl?result=" + result + "&receiptId=" + receiptId + "&amount=" + amount + "&yourPaymentReference=" + yourPaymentReference + "&cardScheme=" + cardScheme + "&cardLastfour=" + cardLastfour + "&createdAt=" + createdAt)
} else {
window.location.replace("http://failurePage.hmtl.html?result=" + result + "&receiptId=" + receiptId + "&amount=" + amount + "&yourPaymentReference=" + yourPaymentReference + "&cardScheme=" + cardScheme + "&cardLastfour=" + cardLastfour + "&createdAt=" + createdAt)
}
)}
.catch((error) => {
// handle when promise is rejected (transaction failed due to error)
console.log(error)
//example of redirecting to error page using url parameters
const message = getWebSDKErrorMessage(error) //handles the different WebSDK error types
window.location.replace("http://errorPage.hmtl?message=" + message)
})
}
6. Other Web SDK Card Functions
Web SDK functions for alternative card transactions, which are especially useful if you have a card wallet.
checkCard:
judo.invokeCheckCard(paymentSessionReference, checkCardConfiguration)
.then(handleSuccess)
.catch(handleError)
Token Transactions:
judo.invokeTokenPayment(paymentSessionReference, tokenConfiguration) // for preauths use judo.invokeTokenPreauth()
.then(handleSuccess)
.catch(handleError)
7. Recap
Following the completion of this tutorial, when the payment button is pressed, a card transaction should be invoked.
The result of this transaction should be handled accordingly and displayed to the consumer.
Resources