Overview

3D Secure (3DS) is an authentication method that provides an additional layer of authentication for credit card transactions, protecting against fraudulent actors. 3DS asks your customers to verify their identity with the card issuer during payment. In most scenarios, you direct your customer to a verification page on their bank's site where they type in a password linked to the card or a code sent to their phone. Customers might recognize this method through the card networks' brand names, like Visa Secure and Mastercard Identity Check.

You can integrate 3D Secure (3DS) authentication into your checkout flow, we currently only support Web platform.

Control the 3DS flow

Frame triggers 3DS automatically if required by our engine. However, not all transactions support 3DS, for example off-session payments. When a payment triggers 3SD, Frame requires the user to perform authentication to complete the payment if 3DS authentication is available for a card. Depending on what frontend you use, this migth require you to display the 3DS Flow.

In a typical Charge Intent API flow that triggers 3DS:

1. The user enters their payment information, which confirms a ChargeIntent.
2. Frame assesses if the transaction supports and requires 3DS based on regulatory mandates, issuer soft declines, and other criteria.
3. If 3DS is Not required: For example, because of an exemption, Frame attempts the charge. The ChargeIntent transitions to a status of pending. If requested by the issuer with a soft decline, we automatically reattempt and continue as if required. And if Required: Frame starts the 3DS authentication flow by contacting the card issuer's 3D Secure Access Control Server (ACS) and starting the 3DS flow.
4. When Frame receives 3DS flow information from the issuer, we attempt authentication. The ChargeIntent transitions to a status of requires_3d_secure.
5. Depending on the 3DS authentication result:

• Authenticated: Frame attempts the charge and the ChargeIntent transitions to a status of pending.
• Failure: The ChargeIntent transitions to a status of failed, indicating that the payment is failed.
• Other scenarios: Depending on the reason the payment triggered 3DS, it might be permissible to continue authorization for the charge in edge cases. For example, a result of attempt_acknowledged leads to a charge and the ChargeIntent transitions to a status of pending.

6. The ChargeIntent transitions to one of the following statuses, depending on the outcome of the payment: succeeded or failed.

Display the 3DS flow

Frame automatically displays the authentication UI in a pop-up modal when calling confirmCardPayment. We highly recommend you to integrate Frame.js SDK into your checkout flow.

Confirm the ChargeIntent

When your customer is ready to complete their purchase, you confirm the ChargeIntent to begin the process of collecting their payment. If you're confirming from the frontend, use the confirmCardPayment method in Frame.js.

const { chargeIntent } = await frame.confirmCardPayment(clientSecret);

if (chargeIntent.status === "succeeded") {
  // Show your customer that the payment has succeeded
} else {
  // Authentication failed, show the payment has failed
}

Test the 3DS flow

Use a Frame test card with any CVC, postal code, and future expiration date to trigger 3DS authentication challenge flows while in test mode.