JavaScript payment with 3DS 2.0 authentication

Overview

The integration of the JavaScript Payment interface with 3DS 2.0 authentication provides an efficient way to collect buyer's card data and perform payment authentication and authorization through Carat, directly on the merchant's page. This approach exempts the store from handling sensitive data, streamlining the authentication and authorization process and transferring that responsibility to Carat's certified PCI DSS environment.

This interface is highly recommended for merchants seeking to have their own checkout with 3DS authentication, ensuring simultaneously a high standard of security.

This solution is integrated with the REST payment interface. Learn more about REST Payment

And to learn more about these terms (Bin, Software Express, Carat, e-Sitef) Learn more

Purpose of 3DS 2.0 Authentication

The primary purpose of implementing 3DS 2.0 is to enhance the security of online transactions, particularly those involving credit and debit cards. By incorporating 3DS 2.0 into the JavaScript payment interface, the authentication process becomes simpler to implement on the merchant's page.

Advantages of 3DS 2.0 Authentication

The main advantage is the shift of liability for fraudulent chargebacks. If the transaction is authenticated, the responsibility shifts from the Merchant to the Issuing Bank. In other words, for authenticated transactions, the Merchant does not face chargebacks due to fraud, thus mitigating financial losses. Additionally, there are several other benefits such as:

• Broad support for devices and authentications;
• Streamlined checkout flow;
• Smarter decision-making based on risk analysis;
• Higher authorization rates and fewer false positives;

JavaScript (JS), Cascading Style Sheets (CSS), and Hypertext Markup Language (HTML) tags.

In the integration of JavaScript payment with 3DS 2.0 authentication, it is crucial to include two files on the checkout page: a JS script and a CSS style sheet. These two files are essential to ensure that the payment with 3DS 2.0 authentication functions correctly. In addition to these files, it is necessary to add an HTML tag to the payment page, where the buyer enters the card information. This HTML tag will be used in the event of the 3DS method flow.

Script JS

Below are the URLs for homologation and production downloads:

URL for Production environment:

https://esitef.softwareexpress.com.br/js/esitefauthenticatepayment-1.0.min.js

URL for Homologation environment:

https://esitef-homologacao.softwareexpress.com.br/js/esitefauthenticatepayment-1.0.min.js

CSS Style Sheet

Below are the homologation and production URLs for download:

URL for Production environment:

https://esitef.softwareexpress.com.br/css/v2/threeds.css

URL for Homologation environment:

https://esitef-homologacao.softwareexpress.com.br/css/v2/threeds.css

Tag div

Below is the mandatory div tag for the operation of the 3DS method.

<div id="divThreeDsMethodData"></div>

Flow

Description of the flow

• 1. The customer submits the purchase details and proceeds to the payment screen.
  • 1.1. The Virtual Merchant creates a payment transaction in Carat, additionally sending the parameter payment_js with the value true. Learn more.
  • 1.2. Carat returns a NIT and a Pay Token to the merchant.
  • 1.3. . The store displays the payment page to the buyer, containing the Carat script and card data fields with the specified classes in Fields with card data.
• 2. The customer fills in their card details. After filling in the card, it is necessary to create an event to call the startThreeDs function from the Carat script, passing the NIT, Pay Token, store code, authorization code in Carat, and callback functions (merchant procedures that will be called after the Carat's startThreeDs function).
  • 2.1. Carat returns the result of the startThreeDs function.
  • 2.2. The return of the startThreeDs function may or may not include a request for the 3DS method, allowing the Access Control Server (ACS) to automatically collect information from the cardholder's device. It's important to note that this process happens automatically in the customer's browser, simplifying the integration.
• 3. The merchant's callback is triggered, which may include the onSuccess function in case of success in executing the startThreeDs function. onFailure is activated if the customer's card is not within the scope of cards for 3DS 2.0 authentication, and onInvalid is triggered in case of any errors that occurred in the Carat request during the execution of the startThreeDs function.
• 4. After filling in the remaining purchase-related details and clicking "pay," this click should trigger the esitefDoPayment function from the Carat script. The parameters to be passed include the NIT, Pay Token, store code, 3DS 2.0 authentication type, and callback functions (specific merchant procedures that will be called after the Carat completes the payment).
  • 4.1. Carat returns the result of the esitefDoPayment function.
  • 4.2. The result of the esitefDoPayment function may or may not involve a challenge, representing a form of 3D-Secure authentication. In this scenario, the cardholder is redirected to a page or application to provide additional information or enter a security code to confirm the transaction. It's important to note that this process happens automatically in the customer's browser, simplifying the integration.
• 5. The merchant's callback is triggered, which may include the onSuccess function, triggered in case of successful payment, allowing redirection of the buyer to a success page. The onFailure function is activated when the payment is declined, enabling redirection of the buyer to a failure page. The onProcessing function is activated after a challenge, possibly redirecting the buyer to a processing page, while onInvalid is triggered in case of any error during the Carat request during the execution of the esitefDoPayment function.