> For the complete documentation index, see [llms.txt](https://docs.solapayments.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.solapayments.com/products/3d-secure/client-side-integration-non-ifields.md).

# Client-Side Integration (Non-iFields)

This is the Non-iFields Client-Side Integration document for 3D Secure 2.0.

For the iFields client-side 3DS 2.0 integration, refer to [iFields](/products/ifields.md#ifields-with-3d-secure-authentication).

**Configuration Properties**

The javascript object exposes the following properties:

| **Property**                       | **Description**                                                                                                                                    | **Allowed Values/Comments**                                                  |
| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| configuration.enableConsoleLogging | Can be set by the user to turn console logging on for debugging purposes or off to remove extra console writes. Defaults to true.                  | true/false                                                                   |
| configuration.onVerifyComplete     | Should be set by the user - this is a function handler that will be called when a challenge (step-up) is completed (see below for sample function) | name of your javascript function that will handle the transaction completion |
| referenceId                        | Set by the internal code, this property will contain the 3DS reference id for the current transaction                                              | Passed to gateway as part of transaction                                     |
| initializeStatus                   | Set by the internal code, this property will contain the status of initialization                                                                  | Passed to gateway as part of transaction                                     |
| error                              | Set by the internal code, this will contain any error information relevant to the 3DS process                                                      | Passed to gateway as part of transaction                                     |

**Methods**

| **Method name** | **Description**                                                                                                                    | **Parameters**                                                                                                                                  |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| initialize3DS   | To be called on the page load, to set up the environment for processing a 3DS authentication transaction                           | threeDSEnvironment - string - set to either “prod” or “staging”                                                                                 |
| profileBin      | To be called before submitting the initial transaction                                                                             | bin - 9 digit card bin                                                                                                                          |
| verifyTrans     | To be called if the initial transaction response status is “V”, indicating that a challenge/step-up is required for authentication | <p>A javascript object with the following values from the Cardknox gateway response:<br>{xRefNum, xVerifyURL, xVerifyPayload, xInternalID }</p> |

#### Implementation Steps

**Import the Library**

Add the following JS file reference to your web page in your page header:

```
<script src="https://cdn.cardknox.com/sdk-3ds/1.2.2601.2902/cardknox-3ds.min.js" type="text/javascript"></script>
```

**Create JavaScript handler for verification**

When a 3DS 2.0 step-up authentication flow occurs, you must handle this by sending the verification results to the payment gateway. Create a JavaScript function on your page to do this. The ck3DS object will call this function automatically when a step-up verification completes. The function will receive the verification results as input parameters.

The order of parameters is as shown in the following code sample:

```
function handle3DSResults(actionCode, xCavv, xEciFlag, 
        xRefNum, xAuthenticateStatus, xSignatureVerification) 
{
    alert('submitting verify form with verification results');
    
    var url = "_some_url_of_your_server_to_handle_the_response_and_post_to_gateway";
    var postData = {
        xRefNum: xRefNum,
        xCavv: xCavv,
        xEci: xEciFlag,
        xAuthenticateStatus: xAuthenticateStatus,
        xSignatureVerification: xSignatureVerification,
        x3dsActionCode: actionCode,
        x3dsError: ck3DS.error
    };
    
    $.ajax({
        method: "POST",
        url: url,
        data: postData
    }).done(function (jsonResp) {
        log(jsonResp);
        if (jsonResp.Status == 'S') {
            // handle success, eg. show receipt
        }
        else {
            // handle error
        }
    })
    .fail(function (xhr, status, err) {
        var errorMessage = xhr.status + ': ' + xhr.statusText;
        // handle failure
    });
}
```

**Configure the 3DS object**

In your page load, add the initialization code:

```
$( document ).ready(function() {
  // set up configuration
  ck3DS.configuration.enableConsoleLogging = true;
  
  // Below can be used to conditionally turn off 3DS handling 
  // ck3DS.configuration.process3DS = true; 
  
  // name of function that was set up in step #2
  ck3DS.configuration.onVerifyComplete = handle3DSResults; 
  
  var environment = "staging"; // supported values: staging, production
  ck3DS.initialize3DS(environment);
});
```

**Add 3DS profiling and submit results with the initial payment request**

In the form submit handler, before submitting the payment, add the 3DS values to the data to be sent on to the gateway, using whatever submit mechanism is being used on your page. For example, the code below sets the hidden fields on the page to the corresponding values and then submits the form:

```
ck3DS.profileBin(_9_DIGIT_CARD_BIN_HERE_)
  .then((binProfilingResult) =>
  {      
      // Set the 3DS response fields 
      $("#x3dsReferenceId").val(ck3DS.referenceId);
      $("#x3dsInitializeStatus").val(ck3DS.initializeStatus);
      $("#x3dsError").val(ck3DS.error);
      var form_data = $("#payment_form").serialize();
      
      $.ajax({
        method: "POST",
        url: url,
        data: form_data
      }).done(function (jsonResp) {          
          // handle response
      })
      .fail(function (xhr, status, err) {
          var errorMessage = xhr.status + ': ' + xhr.statusText;
          // handle failure
      });
  });    
```

**Handle 3DS Challenge**

Modify the above code (line 15 in the sample snippet above) to correctly handle the server response. If the response from Cardknox had a status of V / Verify, call the verifyTrans function. The parameters this function needs are returned as part of the gateway response object and should just be passed along:

```
if (jsonResp.xResult === 'A') {
    // handle approval, eg. show receipt
}
else if (jsonResp.xResult === 'V'){
  ck3DS.verifyTrans(jsonResp);
}
else {
    // handle other responses....
}
```

When 3DS verification is complete, the onVerifyComplete handler (created in step 2 and "hooked up" in step 3) will be called with the response fields that should be passed to your server.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.solapayments.com/products/3d-secure/client-side-integration-non-ifields.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.