Integrate using the Web SDK

note

EMV 3D Secure 2.1 is a new offering by Elavon. If you have identified any errors or gaps in the content, please contact: #SEDevPortalSupport@elavon.com

On this page:

Web SDK Overview and Workflow

You can add 3D secure capabilities to your checkout page by integrating Elavon’s 3DS Web SDK. The Web SDK reduces complex development work to integrate with Elavon's 3DS Server. Elavon's Web SDK supports two different workflows for authenticating a transaction:

All-in-one
Toolkit

All-in-one workflow

Use the all-in-one workflow of the Web SDK when you want an easy way to add Elavon’s 3DS capabilities into your website. To use this workflow, add the Web SDK JavaScript file to your website's payment page. After the integration, the Web SDK handles lookup, authentication, and challenge workflows.

Use the all-in-one workflow of the SDK

Toolkit workflow

Use the toolkit workflow of the Web SDK for scenarios where you may have a mixed mode integration between the backend server environment and the client-side browser. For example, you can directly integrate with the 3DS Server to submit the authentication request while you use the challenge flow from the toolkit workflow to ease the client-side integration.

Use the toolkit workflow of the SDK

You can to understand more about these flows.

Web SDK Workflow Diagram

The Web SDK workflow diagram shows the transaction authentication process when the Web SDK is integrated to the merchant's website. After the Web SDK gets authenticated, it initiates the versioning request to check the supported 3DS version. If the card used in the transaction supports 3DS, the Web SDK sends the authentication data to the 3DS Server and receives the authentication response. If required, it facilitates the challenge verification process between the issuer and the cardholder. Later, it retrieves the challenge result from the 3DS Server and merchant can use this response to authenticate or decline the transaction.

Web SDK workflow

Figure caption: Frictionless and challenge workflow in a Web SDK integration

Web SDK 3DS 1 Fallback Support

If you are an integrator who only supports 3D Secure 1 (3DS 1) or if the issuer does not support 3D Secure 2 (3DS 2), you can still integrate Elavon's 3DS Web SDK to your website. With this release, transactions that need 3DS 1 authentication are appropriately redirected by the Web SDK to the 3DS 1 authentication flow. The flowchart below shows how these three fields in the authenticate request help the 3DS server decide whether to follow 3DS 2 or 3DS 1 authentication flow: messageVersion, clientStartProtocolVersion, and clientEndProtocolVersion.

A diagram explaining how the 3DS server uses the the clientStartProtocolVersion and clientEndProtocolVersion fields to decide whether to initiate 3DS 1 fallback

Figure caption: Decision matrix used by 3DS Server to initiate 3DS 1 fallback