Token Payment Request

creating a token payment request with the web sdk supports token payment and token preauth do you have a stored card wallet for existing customers, making use of card tokens? using our web sdk, you will also be able to invoke a customer initiated payment using a card token, to handle payments preauths 3d secure challenges step one setting up the web sdk to invoke a customer initiated transaction using a card token, follow the below steps from docid 40dwe6lbub7vdkza1qydc docid 40dwe6lbub7vdkza1qydc docid 40dwe6lbub7vdkza1qydc the payment form iframe must be loaded onto the page in order for payments to work however displaying the form to the consumer is not required for this transaction type to hide the payment form iframe, use \<div id="payment iframe" style="position\ absolute;width 0;height 0;border 0;">\</div> step two making a token transaction to make a token transaction define the tokenconfiguration object for the token payment or token preauth ensure the details used when creating the paymentsession match the values set in the following configuration token configuration object example const tokenconfiguration = { judoid "youjudoid", amount 12 99, currency "gbp", phonecountrycode "44", mobilenumber "07999999999", emailaddress "contact\@judopay com", challengerequestindicator "challengeasmandate", initialrecurringpayment false, yourconsumerreference "yourconsumerreference", yourpaymentreference "yourpaymentreference", billingaddress { address1 "my house", address2 "my street", town "my town", state "my state", //mandatory for us and canada country "826", postcode "tr14 8pa" }, // token specific params (above are the same as the paymentconfiguration) cardtoken "yourcardtoken", //mandatory shouldverifysecuritycode true, cardholdername "consumer name", //optional, allows you to provide the consumers' name without needing to prompt them to enter it shouldverifycardholdername true //you can use cardholdername or shouldverifycardholdername not both } see below for more details on the parameters that create the tokenconfiguration object parameter description cardtoken string required required a randomly generated string linked to the saved card stored in judopay’s system shouldverifysecuritycode boolean optional optional indicates if the consumer will be prompted to enter their security code default value = true securitycode string optional optional the 3/4 digit security code associated with the consumer’s saved card this value will be overwritten if the user is prompted to enter their own value ( shouldverifysecuritycode=true ) cardholdername string optional optional allows you to provide the consumers' name without needing to prompt them to enter it note you can use cardholdername or shouldverifycardholdername not both shouldverifycardholdername boolean optional optional indicates if the consumer will be prompted to enter their card holder name if the user is prompted to enter their card holder name and you have provided cardholdername in the config, the config value will be overwritten default value = false 2\ in a function, add the invoketokenpayment call this will invoke a payment using the paymentsession and tokenpaymentconfiguration invoke token payment call function handletokenpaymentbuttonclick() { judo invoketokenpayment(paymentsession, tokenconfiguration) then(handlesuccess) catch(handleerror) } to invoke a preauth, change the above code to invoketokenpreauth to customise the style of the token details modal input, add an extra parameter to the invoketokenpayment call judo invoketokenpayment(paymentsession, tokenconfiguration, tokendetailsmodalstyle ) the tokendetailsmodalstyle is an object defining the style of the modal for example this object has been updated to include the fields labeltextcontent2 and inputplaceholder2 , which can be used to set the style for the cardholdername input an example of the tokendetailsmodalstyle object token details modal style object example //here you can customise the token details modal styles const tokendetailsmodalstyle = { labeltextcontent 'security code', inputplaceholder 'type your code here', labeltextcontent2 'cardholder name', inputplaceholder2 'type your name here', buttontextcontent 'submit', style { form { padding '20px 16px', maxwidth '300px', margin 'auto', width '80%', borderradius '4px' }, field { width '100%', padding '8px', color '#999999' }, label { width '100%', padding '8px 0px 8px 0px', color '#999999' }, button { backgroundcolor '#222', borderradius '4px', borderstyle 'none', } } } 4\ add a token payment button \<button id="submit token payment button" onclick="handletokenpaymentbuttonclick()"> pay now \</button> when clicked, the function that invokes the token payment or token preauth is called (in step 2 above) step three handle the response all the judopay web sdk transaction methods return a promise once the authorisation is complete, the promise will be either fulfilled or rejected fulfilled you will receive a json object response (a judopay receipt object) for more information and schema on the json object, see docid\ bcxnm5keok nlnrztafut depending on the result the consumer should be redirected to the appropriate outcome page for example, if the result = success redirect the consumer to the success page this page should display the necessary transaction information (found in the judopay receipt object) rejected you will receive an error object for more information on error responses returned, see docid\ qfxawpaql 2evfp8y94d the consumer should be redirected to an error page response example const onfulfillment = (receiptobject) => { const { result } = receiptobject //redirect to appropriate page depending on the result (success/failure/declined page) } const onrejection = (error) => { //redirect to error page and handle error } for more information on the response codes, see docid zrsihomuew xnrq4pbtj putting it all together putting it all together to set up the web sdk and make a token transaction token transaction flow \<html> \<head> \<! include judopay websdk > \<script src="https //web judopay com/js/0 0 31/judopay min js">\</script> \<script src="https //ajax googleapis com/ajax/libs/jquery/3 5 1/jquery min js">\</script> \</head> \<body> \<! where the judopay iframe will be loaded, but form is hidden for this example > \<div id="payment iframe" style="position\ absolute;width 0;height 0;border 0;">\</div> \<! payment button for submitting token payment > \<button id="submit token payment button" onclick="handletokenpaymentbuttonclick()"> pay now \</button> \<! where the payment form errors will be shown > \<div class="judopay errors" style="color\ red">\</div> \<script> // initializing/creating an instance of the judopay websdk var judo = new judopay("yourapitoken", true); // creating iframe, but not including iframe config parameter as form is hidden for this example var payment = judo createcarddetails("payment iframe"); //define config object for token payment/preauth const tokenconfiguration = { judoid "yourjudoid", amount 1 01, currency "gbp", phonecountrycode "44", challengerequestindicator "challengeasmandate", initialrecurringpayment false, yourconsumerreference "yourconsumerreference", yourpaymentreference "yourpaymentreference", billingaddress { address1 "my house", address2 "my street", town "my town", postcode "tr14 8pa", country "826" }, mobilenumber "07999999999", emailaddress "contact\@judopay com", //token specific parameters cardtoken "yourcardtoken", shouldverifysecuritycode true, shouldverifycardholdername true } function handlesuccess(response) { //redirect to success page and handle response } function handleerror(error) { //redirect to error page and handle error } //called when token payment button pressed to invoke payment function handletokenpaymentbuttonclick() { judo invoketokenpayment("yourpaymentsession", tokenconfiguration) then(handlesuccess) catch(handleerror) } \</script> \</body> \</html>