Handling a Transaction Tutorial

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:
﻿Creating a Payment Session Tutorial﻿﻿
﻿Adding the Payment iFrame to your web page Tutorial﻿﻿
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.
﻿
Configuration Object Example
//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: "[email protected]"
    }
}
//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.
﻿
Call the Web SDK Transaction Function
  // 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>
  // 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 Overview﻿ 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).
﻿
Handle the Response
 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)
      })
    
  }
 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.
﻿
Additional Web SDK Functions
//checkCard:
judo.invokeCheckCard(paymentSessionReference, checkCardConfiguration)
    .then(handleSuccess)
    .catch(handleError)
//token Transactions:

judo.invokeTokenPayment(paymentSessionReference, tokenConfiguration) // for preauths use judo.invokeTokenPreauth()
    .then(handleSuccess)
    .catch(handleError)
//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
﻿Creating a Payment Session Tutorial﻿﻿
﻿Adding the Payment iFrame to your web page Tutorial﻿﻿
﻿Web SDK Documentation﻿﻿
﻿Testing your Integration Documentation - Test Cards﻿﻿
﻿Testing 3D Secure 2 Authentication﻿﻿
﻿Judopay Transaction API Documentation﻿
﻿
Updated 06 Aug 2024
Adding the Payment iFrame to your web page Tutorial
Deprecated Integration Methods