{"title":"Logic","category":"default","creationDate":1779533779,"content":"<div class=\"sc-notice warning\"><div>\n<p><strong>The classic Checkout SDK integrations are being phased out<\/strong><br \/>\nThis means we are:<\/p>\n<ul>\n<li>No longer developing the classic Checkout SDK integration.<\/li>\n<li>Not accepting new classic Checkout SDK integrations.<\/li>\n<\/ul>\n<p>You have until March 31, 2024 to migrate.<\/p>\n<\/div><\/div>\n<p>Invoke\u00a0hooks when the following events occur:<\/p>\n<table><thead><tr class=\"header\"><th>Event<\/th><th>Hook triggered<\/th><\/tr><\/thead><tbody><tr><td>\n<p>The shopper requests more payment methods<\/p>\n<\/td><td>\n<p><code>toggleExcessPaymentMethods<\/code> - Customize the\u00a0<strong>Show more payment methods<\/strong>\u00a0button of your Checkout.<\/p>\n<\/td><\/tr><tr><td>\n<p>The shopper selects <strong>Pay<\/strong><\/p>\n<\/td><td>\n<p><code>getDataFromSubmissionProcess<\/code> - Intercept JSON data that is generated when the shopper selects\u00a0<strong>Pay<\/strong>.<code>showProcessingAnimation<\/code> - Customize how a processing payment is indicated.(available in Checkout SDK 1.2.1 and later)<code>onSubmitAction<\/code> - Customize the behaviour of your Checkout form when the shopper selects\u00a0<strong>Pay<\/strong>.(available in Checkout SDK 1.2.1 and later)<\/p>\n<\/td><\/tr><tr><td>\n<p>The payment is submitted<\/p>\n<\/td><td>\n<p><code>beforePendingInitiation<\/code> - Customize what is shown when the shopper's payment is submitted.<code>handleError<\/code> - Know when an unexpected error occurs from the time a shopper provides card details to when the payment is submitted.\u00a0<\/p>\n<\/td><\/tr><tr><td>\n<p>The payment reaches a final state<\/p>\n<\/td><td>\n<p><code>afterPendingInitiation<\/code> - Leave the payment in a\u00a0<em>Pending<\/em>\u00a0state. This allows you to execute other tasks.<code>beforeComplete<\/code> - Customize what happens when the payment reaches a final state.<code>beforePendingRedirect<\/code> - Customize what is shown on your Checkout form when the shopper is redirected to an external website.(available in Checkout SDK 1.2.1 and later)<code>beforeRedirect<\/code> - Redirect the shopper away from your website to complete the payment.<\/p>\n<\/td><\/tr><\/tbody><\/table>\n<p>More information and code examples for the hooks are provided below.<\/p>\n<h2 id=\"toggleexcesspaymentmethods\">toggleExcessPaymentMethods<\/h2>\n<p>The following example shows configuring the text on the\u00a0<strong>Show more payment methods<\/strong>\u00a0button to\u00a0<strong>Show less<\/strong>\u00a0and\u00a0<strong>Show more<\/strong>:<\/p>\n<pre><code class=\"language-js\">chckt.hooks.toggleExcessPaymentMethods = function(buttonNode\/*HTML Node*\/, excessNodesAreVisible\/*Boolean*\/) {\n  var textField = buttonNode.querySelector('.chckt-more-pm-button__text');\n  textField.innerText = (excessPMsAreVisible)? 'Show less': 'Show more';\n  return false;\n};<\/code><\/pre>\n<h2 id=\"getdatafromsubmissionprocess\">getDataFromSubmissionProcess<\/h2>\n<div class=\"sc-notice note\"><div>\n<p>To use this hook, set the SDK configuration option <code>initiatePayment<\/code> to <code>false<\/code>.<\/p>\n<\/div><\/div>\n<p>This example shows how you can configure the Checkout form to intercept JSON data.<\/p>\n<pre><code class=\"language-js\">chckt.hooks.getDataFromSubmissionProcess = function(checkoutNode\/*HTML Node*\/, formData\/*JSON string*\/) {\n  \/\/ Add your logic here\n  return false;\n}<\/code><\/pre>\n<h2 id=\"showprocessinganimation\">showProcessingAnimation<\/h2>\n<div class=\"sc-notice note\"><div>\n<p>This will not be called if you block the default <code>onSubmitAction<\/code> behaviour.<\/p>\n<\/div><\/div>\n<p>In the following example, when the shopper clicks the <strong>Pay<\/strong> button:<\/p>\n<ul>\n<li>The text <strong>Payment in progress<\/strong> is shown<\/li>\n<li>The button color changes to blue<\/li>\n<\/ul>\n<pre><code class=\"language-js\">chckt.hooks.showProcessingAnimation = function(actionButton\/*HTML Node*\/) {\n  actionButton.innerText = 'Payment in progress'\n  actionButton.style['background-color'] = '#22A';\n  return false;\n};<\/code><\/pre>\n<h2 id=\"onsubmitaction\">onSubmitAction<\/h2>\n<div class=\"sc-notice note\"><div>\n<p>When using this hook, <code>chckt.submitPaymentForm()<\/code> needs to be called for the payment to be submitted.<\/p>\n<\/div><\/div>\n<p>In the following example, when the <strong>Pay<\/strong> button is selected:<\/p>\n<ul>\n<li>The <strong>Pay<\/strong> and <strong>Show more payment<\/strong> methods buttons will be hidden<\/li>\n<li>Payment method divs are disabled<\/li>\n<li>The payment initiation is blocked<\/li>\n<\/ul>\n<pre><code class=\"language-js\">chckt.hooks.onSubmitAction = function(actionButton\/*HTML Node*\/, extraData\/*Object*\/) {\n\n  \/\/ Hide the 'pay' &amp; 'show more payment methods' buttons\n  chckt.toggleActionButton(false);\n  chckt.toggleShowMorePMsButton(false);\n\n  \/\/ Give all paymentMethod divs a disabled state\n  chckt.toggleEnableAllPaymentMethods(false);\n\n  \/\/ Block default functionality\n  return false;\n};<\/code><\/pre>\n<p>You can also customize elements of your Checkout. In the following example:<\/p>\n<ul>\n<li>The payment method divs are disabled<\/li>\n<li><strong>Review<\/strong> and <strong>Show more payment methods<\/strong> buttons are hidden<\/li>\n<li>An extra step is created, where the shopper can review their order<\/li>\n<li>An\u00a0<strong>Edit<\/strong> button is shown, allowing the shopper to modify their order<\/li>\n<\/ul>\n<pre><code class=\"language-js\">chckt.hooks.onSubmitAction = function(actionButton\/*HTML Node*\/, extraData\/*Object*\/) {\n\n  \/\/ Give all paymentMethod divs a disabled state\n  chckt.toggleEnableAllPaymentMethods(false);\n\n  \/\/ Hide the 'review' &amp; 'show more payment methods' buttons\n  chckt.toggleActionButton(false);\n  chckt.toggleShowMorePMsButton(false);\n\n  \/\/ Find parent element for the Payments list in the SDK\n  var holder = document.body.querySelector('.chckt-payment-holder');\n\n  \/\/ Create empty Review element and add to Payments list parent element\n  var reviewDiv = document.createElement('div');\n  reviewDiv.style.position = 'relative';\n  reviewDiv.style.top = '20px';\n  holder.appendChild(reviewDiv);\n\n  \/\/ Add text to Review element\n  var textDiv = document.createElement('div');\n  textDiv.innerText = 'Review your order before it is final. By clicking \"Pay\" you agree to all terms &amp; conditions';\n  reviewDiv.appendChild(textDiv);\n\n  \/\/ Add an 'edit order' button that on click will restore payments list to previous state (no Review element, 'review order' button)\n  var editBtn = document.createElement('div');\n  editBtn.innerHTML = '&lt;span&gt;&lt;u&gt;Edit order&lt;\/u&gt;&lt;\/span&gt;';\n  editBtn.style.cursor = 'pointer';\n\n  var editFn = function() {\n\n    \/\/ Renable payment methods\n    chckt.toggleEnableAllPaymentMethods(true);\n\n    \/\/ Show 'show more payment methods' button (if it was visible)\n    chckt.toggleShowMorePMsButton(true);\n\n    \/\/ Show the original 'review order' button\n    chckt.toggleActionButton(true);\n\n    document.body.querySelector('.js-chckt-button-container').style.display = 'block';\n    holder.removeChild(reviewDiv);\n  };\n\n  if( typeof editBtn.addEventListener === 'function' ) {\n    editBtn.addEventListener( 'click', editFn );\n  }else{\n     if(editBtn.attachEvent) {\n        editBtn.attachEvent( 'onclick', editFn );\n     }\n  }\n\n  reviewDiv.appendChild(editBtn);\n\n  \/\/ Add 'Pay' button to Review element\n  \/\/ (This particular Pay button recreates the one in the SDK, with a loading animation when clicked)\n  var payBtnHtmlStr = '&lt;button type=\"button\" class=\"chckt-button chckt-pm-list__button chckt-button--submit js-chckt-button--submit\"&gt;';\n  payBtnHtmlStr += '&lt;span class=\"chckt-button__text\"&gt;Pay&lt;\/span&gt;';\n  payBtnHtmlStr += '&lt;span class=\"chckt-button__loading-icon\"&gt;';\n  payBtnHtmlStr += '&lt;div class=\"circle1\"&gt;&lt;\/div&gt;';\n  payBtnHtmlStr += '&lt;div class=\"circle2\"&gt;&lt;\/div&gt;';\n  payBtnHtmlStr += '&lt;div class=\"circle3\"&gt;&lt;\/div&gt;';\n  payBtnHtmlStr += '&lt;\/span&gt;&lt;\/button&gt;';\n\n  var payDiv = document.createElement('div');\n  payDiv.innerHTML = payBtnHtmlStr;\n  reviewDiv.appendChild(payDiv);\n\n  var payBtn = reviewDiv.querySelector('.chckt-button--submit');\n\n  var payFn = function() {\n\n    \/\/ Remove text and edit btn\n    reviewDiv.removeChild(textDiv);\n    reviewDiv.removeChild(editBtn);\n    reviewDiv.style.top = '0px';\n\n    chckt.submitPaymentForm();\n\n    \/\/ Add loading class to activate animatiion\n    payBtn.className += 'chckt-pm-list__button--loading';\n  };\n\n  if(typeof payBtn.addEventListener === 'function') {\n    payBtn.addEventListener('click', payFn);\n  }else{\n    if(payBtn.attachEvent) {\n      payBtn.attachEvent('onclick', payFn);\n\n  }\n\n  return false;\n};<\/code><\/pre>\n<h2 id=\"beforependinginitiation\">beforePendingInitiation<\/h2>\n<p>In the following example the payment method remains visible on screen, with reduced opacity. The opacity of the <strong>Pay<\/strong> button is also reduced.<\/p>\n<pre><code class=\"language-js\">chckt.hooks.beforePendingInitiation = function(selectedPMNode\/*HTML Node*\/, extraData\/*Object*\/) {\n  selectedPMNode.style.opacity = '0.2';\n  extraData.actionButton.style.opacity = '0.5';\n  return false;\n}<\/code><\/pre>\n<h2 id=\"afterpendinginitiation\">afterPendingInitiation<\/h2>\n<p>Allows you to execute other tasks. Such as <code>beforeComplete<\/code>.<\/p>\n<pre><code class=\"language-js\">chckt.hooks.afterPendingInitiation = function() {\n  return false;\n}<\/code><\/pre>\n<h2 id=\"beforecomplete\">beforeComplete<\/h2>\n<p>The following example shows a payload from an authorised result being directed through merchantwebsite.com to the verify endpoint. The PSP reference is then shown.<\/p>\n<pre><code class=\"language-js\">chckt.hooks.beforeComplete = function(checkoutNode\/*HTML Node (.chckt-sdk)*\/, responseData\/*Object*\/) {\n  if (responseData.resultCode.toLowerCase() === 'authorised') {\n    $.ajax({\n      url: 'http:\/\/merchantwebsite.com\/verifyPayment.php',\n      data: { payload: responseData.payload },\n      dataType: 'json',\n      method: 'POST',\n      success:function(data) {\n        var verifiedJsonObj = data;\n        if(verifiedJsonObj.authResponse.toLowerCase() === 'authorised') {\n          $(checkoutNode).html('&lt;div style=\"color:blue;\"&gt; Verified! pspReference: ' + verifiedJsonObj.pspReference + '&lt;\/div&gt;')\n        }\n      },\n      error: function(e) {}\n    });\n  }\n  return false;\n}<\/code><\/pre>\n<p>The following example shows a payload from an refused result being directed through merchantwebsite.com to the verify endpoint. The refusal reason is also shown.<\/p>\n<pre><code class=\"language-js\">chckt.hooks.beforeComplete = function(checkoutNode\/*HTML Node (.chckt-sdk)*\/, responseData\/*Object*\/) {\n  if (responseData.resultCode.toLowerCase() === 'refused') {\n    $.ajax({\n      url: 'http:\/\/merchantwebsite.com\/verifyPayment.php',\n      data: { payload: responseData.payload },\n      dataType: 'json',\n      method: 'POST',\n      success: function(data) {\n        var verifiedJsonObj = data;\n        if (verifiedJsonObj.authResponse.toLowerCase() === 'refused') {\n          $(checkoutNode).html('&lt;div style=\"color:red;\"&gt;Refused! refusal reason: \"+verifiedJsonObj.additionalData.refusalReasonRaw+\"&lt;\/div&gt;')\n        }\n      },\n      error: function(e) {}\n    });\n  }\n  return false;\n}<\/code><\/pre>\n<h2 id=\"beforependingredirect\">beforePendingRedirect<\/h2>\n<p>The following example keeps the selected payment method shown, at a reduced opacity. The opacity of the <strong>Pay<\/strong> button is also reduced.<\/p>\n<pre><code class=\"language-js\">chckt.hooks.beforePendingRedirect = function(selectedPMNode\/*HTML Node*\/, extraData\/*Object*\/) {\n  selectedPMNode.style.opacity = '0.2';\n  extraData.actionButton.style.opacity = '0.2';\n  return false;\n};<\/code><\/pre>\n<h2 id=\"beforeredirect\">beforeRedirect<\/h2>\n<p>This example shows how you can configure the Checkout form to redirect the shopper.<\/p>\n<pre><code class=\"language-js\">chckt.hooks.beforeRedirect = function() {\n  \/\/ Add your logic here\n  return false;\n}<\/code><\/pre>\n<h2 id=\"handleerror\">handleError<\/h2>\n<p>This example shows how you can write an unexpected error message to the console.<\/p>\n<pre><code class=\"language-js\">chckt.hooks.handleError = function(node, paymentMethod, errorResponse) {\n  console.log(\"Node: \", node);\n  console.log(\"Payment method: \", paymentMethod);\n  console.log(\"Error response: \", errorResponse);\n  return false;\n}<\/code><\/pre>","url":"https:\/\/docs.adyen.com\/online-payments\/classic-integrations\/checkout-sdks\/web-sdk\/customization\/logic","articleFields":{"id":"36185702","type":"page","description":"Include additional logic in your payment form using hooks.","_expandable":{"operations":""},"status":"current","last_edit_on":"18-04-2019 16:49","sitemap":{"priority":0.3},"parameters":{"anchor_new":"<a href=\"\/online-payments\/drop-in-web\">Web Drop-in<\/a>","old_integration":"Checkout Web SDK"}},"algolia":{"url":"https:\/\/docs.adyen.com\/online-payments\/classic-integrations\/checkout-sdks\/web-sdk\/customization\/logic","title":"Logic","content":"\nThe classic Checkout SDK integrations are being phased out\nThis means we are:\n\nNo longer developing the classic Checkout SDK integration.\nNot accepting new classic Checkout SDK integrations.\n\nYou have until March 31, 2024 to migrate.\n\nInvoke\u00a0hooks when the following events occur:\nEventHook triggered\nThe shopper requests more payment methods\n\ntoggleExcessPaymentMethods - Customize the\u00a0Show more payment methods\u00a0button of your Checkout.\n\nThe shopper selects Pay\n\ngetDataFromSubmissionProcess - Intercept JSON data that is generated when the shopper selects\u00a0Pay.showProcessingAnimation - Customize how a processing payment is indicated.(available in Checkout SDK 1.2.1 and later)onSubmitAction - Customize the behaviour of your Checkout form when the shopper selects\u00a0Pay.(available in Checkout SDK 1.2.1 and later)\n\nThe payment is submitted\n\nbeforePendingInitiation - Customize what is shown when the shopper's payment is submitted.handleError - Know when an unexpected error occurs from the time a shopper provides card details to when the payment is submitted.\u00a0\n\nThe payment reaches a final state\n\nafterPendingInitiation - Leave the payment in a\u00a0Pending\u00a0state. This allows you to execute other tasks.beforeComplete - Customize what happens when the payment reaches a final state.beforePendingRedirect - Customize what is shown on your Checkout form when the shopper is redirected to an external website.(available in Checkout SDK 1.2.1 and later)beforeRedirect - Redirect the shopper away from your website to complete the payment.\n\nMore information and code examples for the hooks are provided below.\ntoggleExcessPaymentMethods\nThe following example shows configuring the text on the\u00a0Show more payment methods\u00a0button to\u00a0Show less\u00a0and\u00a0Show more:\nchckt.hooks.toggleExcessPaymentMethods = function(buttonNode\/*HTML Node*\/, excessNodesAreVisible\/*Boolean*\/) {\n  var textField = buttonNode.querySelector('.chckt-more-pm-button__text');\n  textField.innerText = (excessPMsAreVisible)? 'Show less': 'Show more';\n  return false;\n};\ngetDataFromSubmissionProcess\n\nTo use this hook, set the SDK configuration option initiatePayment to false.\n\nThis example shows how you can configure the Checkout form to intercept JSON data.\nchckt.hooks.getDataFromSubmissionProcess = function(checkoutNode\/*HTML Node*\/, formData\/*JSON string*\/) {\n  \/\/ Add your logic here\n  return false;\n}\nshowProcessingAnimation\n\nThis will not be called if you block the default onSubmitAction behaviour.\n\nIn the following example, when the shopper clicks the Pay button:\n\nThe text Payment in progress is shown\nThe button color changes to blue\n\nchckt.hooks.showProcessingAnimation = function(actionButton\/*HTML Node*\/) {\n  actionButton.innerText = 'Payment in progress'\n  actionButton.style['background-color'] = '#22A';\n  return false;\n};\nonSubmitAction\n\nWhen using this hook, chckt.submitPaymentForm() needs to be called for the payment to be submitted.\n\nIn the following example, when the Pay button is selected:\n\nThe Pay and Show more payment methods buttons will be hidden\nPayment method divs are disabled\nThe payment initiation is blocked\n\nchckt.hooks.onSubmitAction = function(actionButton\/*HTML Node*\/, extraData\/*Object*\/) {\n\n  \/\/ Hide the 'pay' &amp; 'show more payment methods' buttons\n  chckt.toggleActionButton(false);\n  chckt.toggleShowMorePMsButton(false);\n\n  \/\/ Give all paymentMethod divs a disabled state\n  chckt.toggleEnableAllPaymentMethods(false);\n\n  \/\/ Block default functionality\n  return false;\n};\nYou can also customize elements of your Checkout. In the following example:\n\nThe payment method divs are disabled\nReview and Show more payment methods buttons are hidden\nAn extra step is created, where the shopper can review their order\nAn\u00a0Edit button is shown, allowing the shopper to modify their order\n\nchckt.hooks.onSubmitAction = function(actionButton\/*HTML Node*\/, extraData\/*Object*\/) {\n\n  \/\/ Give all paymentMethod divs a disabled state\n  chckt.toggleEnableAllPaymentMethods(false);\n\n  \/\/ Hide the 'review' &amp; 'show more payment methods' buttons\n  chckt.toggleActionButton(false);\n  chckt.toggleShowMorePMsButton(false);\n\n  \/\/ Find parent element for the Payments list in the SDK\n  var holder = document.body.querySelector('.chckt-payment-holder');\n\n  \/\/ Create empty Review element and add to Payments list parent element\n  var reviewDiv = document.createElement('div');\n  reviewDiv.style.position = 'relative';\n  reviewDiv.style.top = '20px';\n  holder.appendChild(reviewDiv);\n\n  \/\/ Add text to Review element\n  var textDiv = document.createElement('div');\n  textDiv.innerText = 'Review your order before it is final. By clicking \"Pay\" you agree to all terms &amp; conditions';\n  reviewDiv.appendChild(textDiv);\n\n  \/\/ Add an 'edit order' button that on click will restore payments list to previous state (no Review element, 'review order' button)\n  var editBtn = document.createElement('div');\n  editBtn.innerHTML = '&lt;span&gt;&lt;u&gt;Edit order&lt;\/u&gt;&lt;\/span&gt;';\n  editBtn.style.cursor = 'pointer';\n\n  var editFn = function() {\n\n    \/\/ Renable payment methods\n    chckt.toggleEnableAllPaymentMethods(true);\n\n    \/\/ Show 'show more payment methods' button (if it was visible)\n    chckt.toggleShowMorePMsButton(true);\n\n    \/\/ Show the original 'review order' button\n    chckt.toggleActionButton(true);\n\n    document.body.querySelector('.js-chckt-button-container').style.display = 'block';\n    holder.removeChild(reviewDiv);\n  };\n\n  if( typeof editBtn.addEventListener === 'function' ) {\n    editBtn.addEventListener( 'click', editFn );\n  }else{\n     if(editBtn.attachEvent) {\n        editBtn.attachEvent( 'onclick', editFn );\n     }\n  }\n\n  reviewDiv.appendChild(editBtn);\n\n  \/\/ Add 'Pay' button to Review element\n  \/\/ (This particular Pay button recreates the one in the SDK, with a loading animation when clicked)\n  var payBtnHtmlStr = '&lt;button type=\"button\" class=\"chckt-button chckt-pm-list__button chckt-button--submit js-chckt-button--submit\"&gt;';\n  payBtnHtmlStr += '&lt;span class=\"chckt-button__text\"&gt;Pay&lt;\/span&gt;';\n  payBtnHtmlStr += '&lt;span class=\"chckt-button__loading-icon\"&gt;';\n  payBtnHtmlStr += '&lt;div class=\"circle1\"&gt;&lt;\/div&gt;';\n  payBtnHtmlStr += '&lt;div class=\"circle2\"&gt;&lt;\/div&gt;';\n  payBtnHtmlStr += '&lt;div class=\"circle3\"&gt;&lt;\/div&gt;';\n  payBtnHtmlStr += '&lt;\/span&gt;&lt;\/button&gt;';\n\n  var payDiv = document.createElement('div');\n  payDiv.innerHTML = payBtnHtmlStr;\n  reviewDiv.appendChild(payDiv);\n\n  var payBtn = reviewDiv.querySelector('.chckt-button--submit');\n\n  var payFn = function() {\n\n    \/\/ Remove text and edit btn\n    reviewDiv.removeChild(textDiv);\n    reviewDiv.removeChild(editBtn);\n    reviewDiv.style.top = '0px';\n\n    chckt.submitPaymentForm();\n\n    \/\/ Add loading class to activate animatiion\n    payBtn.className += 'chckt-pm-list__button--loading';\n  };\n\n  if(typeof payBtn.addEventListener === 'function') {\n    payBtn.addEventListener('click', payFn);\n  }else{\n    if(payBtn.attachEvent) {\n      payBtn.attachEvent('onclick', payFn);\n\n  }\n\n  return false;\n};\nbeforePendingInitiation\nIn the following example the payment method remains visible on screen, with reduced opacity. The opacity of the Pay button is also reduced.\nchckt.hooks.beforePendingInitiation = function(selectedPMNode\/*HTML Node*\/, extraData\/*Object*\/) {\n  selectedPMNode.style.opacity = '0.2';\n  extraData.actionButton.style.opacity = '0.5';\n  return false;\n}\nafterPendingInitiation\nAllows you to execute other tasks. Such as beforeComplete.\nchckt.hooks.afterPendingInitiation = function() {\n  return false;\n}\nbeforeComplete\nThe following example shows a payload from an authorised result being directed through merchantwebsite.com to the verify endpoint. The PSP reference is then shown.\nchckt.hooks.beforeComplete = function(checkoutNode\/*HTML Node (.chckt-sdk)*\/, responseData\/*Object*\/) {\n  if (responseData.resultCode.toLowerCase() === 'authorised') {\n    $.ajax({\n      url: 'http:\/\/merchantwebsite.com\/verifyPayment.php',\n      data: { payload: responseData.payload },\n      dataType: 'json',\n      method: 'POST',\n      success:function(data) {\n        var verifiedJsonObj = data;\n        if(verifiedJsonObj.authResponse.toLowerCase() === 'authorised') {\n          $(checkoutNode).html('&lt;div style=\"color:blue;\"&gt; Verified! pspReference: ' + verifiedJsonObj.pspReference + '&lt;\/div&gt;')\n        }\n      },\n      error: function(e) {}\n    });\n  }\n  return false;\n}\nThe following example shows a payload from an refused result being directed through merchantwebsite.com to the verify endpoint. The refusal reason is also shown.\nchckt.hooks.beforeComplete = function(checkoutNode\/*HTML Node (.chckt-sdk)*\/, responseData\/*Object*\/) {\n  if (responseData.resultCode.toLowerCase() === 'refused') {\n    $.ajax({\n      url: 'http:\/\/merchantwebsite.com\/verifyPayment.php',\n      data: { payload: responseData.payload },\n      dataType: 'json',\n      method: 'POST',\n      success: function(data) {\n        var verifiedJsonObj = data;\n        if (verifiedJsonObj.authResponse.toLowerCase() === 'refused') {\n          $(checkoutNode).html('&lt;div style=\"color:red;\"&gt;Refused! refusal reason: \"+verifiedJsonObj.additionalData.refusalReasonRaw+\"&lt;\/div&gt;')\n        }\n      },\n      error: function(e) {}\n    });\n  }\n  return false;\n}\nbeforePendingRedirect\nThe following example keeps the selected payment method shown, at a reduced opacity. The opacity of the Pay button is also reduced.\nchckt.hooks.beforePendingRedirect = function(selectedPMNode\/*HTML Node*\/, extraData\/*Object*\/) {\n  selectedPMNode.style.opacity = '0.2';\n  extraData.actionButton.style.opacity = '0.2';\n  return false;\n};\nbeforeRedirect\nThis example shows how you can configure the Checkout form to redirect the shopper.\nchckt.hooks.beforeRedirect = function() {\n  \/\/ Add your logic here\n  return false;\n}\nhandleError\nThis example shows how you can write an unexpected error message to the console.\nchckt.hooks.handleError = function(node, paymentMethod, errorResponse) {\n  console.log(\"Node: \", node);\n  console.log(\"Payment method: \", paymentMethod);\n  console.log(\"Error response: \", errorResponse);\n  return false;\n}","type":"page","locale":"en","boost":14,"hierarchy":{"lvl0":"Home","lvl1":"Online payments","lvl2":"Classic integrations for Ecommerce","lvl3":"Classic Checkout SDKs","lvl4":"Web SDK","lvl5":"Customization","lvl6":"Logic"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/online-payments","lvl2":"https:\/\/docs.adyen.com\/online-payments\/classic-integrations","lvl3":"https:\/\/docs.adyen.com\/online-payments\/classic-integrations\/checkout-sdks","lvl4":"https:\/\/docs.adyen.com\/online-payments\/classic-integrations\/checkout-sdks\/web-sdk","lvl5":"https:\/\/docs.adyen.com\/online-payments\/classic-integrations\/checkout-sdks\/web-sdk\/customization","lvl6":"\/online-payments\/classic-integrations\/checkout-sdks\/web-sdk\/customization\/logic"},"levels":7,"category":"Online Payments","category_color":"green","tags":["Logic"]}}