Release NotesAnnouncementsBlogFAQSupport
Guides

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

  1. Merchants or their developers need to ensure the 3DS SDK is properly integrated into the Clover iframe before enabling 3DS to prevent transaction failures.
  2. Merchant needs to enable 3DS on the Merchant Dashboard.
  3. Merchant needs the merchantId to load the script in Method 2 using Promise. See Locate the merchant identifier (merchantId).

Steps

  1. 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:

    1. Add script to the webpage head block to import the 3DS SDK. 
      <head>
  <script
    src="https://checkout.clover.com/clover3DS/clover3DS-sdk.js"
    async
  </script>
</head>
    2. 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);
        }
    });
};

  2. 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}}"
}

  3. Use the following endpoints to initiate the 3DS SDK:

Updated 21 days ago