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 docid 5ge2zudogtatdfdl7xegc adding the payment iframe to your web page tutorial docid\ e4flt28fntumjkwvnjbci 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 "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> 4\ testing the transaction testing your implementation using the resources available in testing overview docid\ a4hyvok4t7v0dvsm7fqyi 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) }) } 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) 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 docid 5ge2zudogtatdfdl7xegc adding the payment iframe to your web page tutorial docid\ e4flt28fntumjkwvnjbci web sdk docid 40dwe6lbub7vdkza1qydc test cards docid obafnuc1umhk vihhs5d testing 3d secure 2 authentication docid\ bdcgiyqdm3mle ubxp1yr judopay transaction api documentation