3DS With Adyen

Adyen supports two types of 3DS verification: Native 3DS and redirect-based 3DS. With this integration, both types are supported using Broadleaf’s 3DS components described here. By default, we declare Native 3DS to be the preferred pattern due to its better UX, reduced complexity, & better conversion rates according to Adyen. With that being said, some payment methods require the redirect-based approach.

Handle 3D Secure Action using Drop-in

When attempting a checkout, if you receive a CheckoutResponse with failureType = PAYMENT_REQUIRES_3DS_VERIFICATION, then you’ll need to gather the action from the CheckoutResponse#paymentTransactionFailureDetails. Drop-in uses dropin.handleAction(action) to perform the required authentication flow. If the issuer requires shopper interaction, Drop-in presents the challenge screen.

For example:

    const threeDSDetails = find(
        get(submitError, 'paymentTransactionFailureDetails'),
        ({ failureType }) => failureType === 'REQUIRES_3DS_VERIFICATION'
      );

    const action = get(threeDSDetails, 'nextAction.attributes');
    // handle the action by Drop-in component
    dropin.handleAction(action);

Native 3D Secure 2 Authentication

For the native 3DS authentication Drop-in renders the challenge window in the iframe. After the customer finishes the authentication, the Drop-in component executes the onPaymentCompleted event. You need to handle this event and show the customer the payment result.

The example of the onPaymentCompleted event handler:

const onPaymentCompleted = async (result, dropin: DropinElement) => {
    const resultCode = get(result, 'resultCode');
    if ('Authorised' === resultCode) {
      // show the customer success page
    } else {
      // show the customer an error, and allow selecting another payment method
    }
};

Adyen also sends the webhook event with the 3DS result. If the result is successful, the Cart will be submitted and the Order created.

3D Secure 2 Redirect Authentication

If the redirect is required to finish the 3DS authentication, the dropin.handleAction(action) will redirect the customer to the external page. After the customer finishes the authentication he is redirected back to the URL specified in the paymentMethodProperties of the Payment.

Example of the request to create Payment with redirect URL:

const paymentRequest = {
        name: 'ADYEN',
        type: 'CREDIT_CARD',
        gatewayType: `ADYEN`,
        amount: {
            amount: 10,
            currency: 'USD',
        },

        isSingleUsePaymentMethod: true,
        shouldArchiveExistingPayments: true,
        paymentMethodProperties: {
          sessionId: '{Adyen session ID}',
          returnUrl: 'https://heatclinic.localhost:8456/api/cart-operations/checkout/{cart_id}/payment-callback/ADYEN?tenantId={tenant_id}&applicationId={application_id}',
        },
        billingAddress,
      } as PaymentRequest;

In the example above we use the new endpoint added in the Broadleaf 2.1.1-GA. This endpoint checks the transaction result and redirects customer to the configured storefront page. See Improved 3DS/HPP pattern integration example for more information.