Configure 3D Secure SDK with iframe and API integration
North America—United States and Canada
Merchants using on-device integration or the Clover iframe with the Clover Ecommerce API need to configure the 3DS SDK and then initiate the SDK for payments using the Create a charge and Pay for an order endpoints.
Prerequisites
- Merchants or their developers need to ensure the 3DS SDK is properly integrated into the Clover iframe before enabling 3DS to prevent transaction failures.
- Merchant needs to enable 3DS on the Merchant Dashboard.
- Merchant needs the
merchantId
to load the script in Method 2 using Promise. See Locate the merchant identifier (merchantId).
Steps
-
Add the 3DS SDK to the merchant's ecommerce webpage and use one of the following methods to load the script:
Method 1: Load the script using the script tag:
- Add
script
to the webpagehead
block to import the 3DS SDK.<head> <script src="https://checkout.clover.com/clover3DS/clover3DS-sdk.js" async </script> </head>
- Create a global object.
window._3DSUtil = new Clover3DS({ merchantUuid: {{merchantUUid}} });})) document.addEventListener('executePatch', {{methodName}}); Eg:: document.addEventListener('executePatch', proceedFinalizeCall);
Method 2: Load the script asynchronously using Promise. The script is resolved when the script is loaded.
loadScript().then(() => { window._3DSUtil = new Clover3DS({ merchantUuid: {{merchantUUid}} }); document.addEventListener('executePatch', {{methodName}}); }); const loadScript = (async = true, type = "text/javascript") => { return new Promise((resolve, reject) => { try { const newScriptElement = document.createElement("script"); newScriptElement.type = type; newScriptElement.async = async; newScriptElement.src = "https://checkout.clover.com/clover3DS/clover3DS-sdk.js"; newScriptElement.addEventListener("load", (ev) => { resolve({ status: true }); }); newScriptElement.addEventListener("error", (ev) => { reject({ status: false, message: `Failed to load the script ${FILE_URL}` }); }); document.body.appendChild(newScriptElement); } catch (error) { reject(error); } }); };
- Add
-
Use the
window._3DSUtil.getBrowserInfo()
object to call the browser information.{ "browser_accept_header": "*/*", "browser_javascript_enabled": true, "browser_screen_width": "1792", "browser_screen_height": "1120", "browser_tz": "420", "browser_user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36", "browser_color_depth": "24", "browser_language": "en-US", "browser_java_enabled": false, "browser_http_origin": "{{web-page url}}" }
-
Use the following endpoints to initiate the 3DS SDK:
Updated about 13 hours ago