Broadleaf Microservices
  • v1.0.0-latest-prod

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 actions

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. onSubmit handler now have access to the new actions parameter which should be used to handle any required actions. Use actions.resolve({resultCode, action,}) to perform the required authentication flow. If the issuer requires shopper interaction, Drop-in presents the challenge screen.

For example:
// handle submit cart error
const errorType = get(error, 'failureType');

if (errorType === 'PAYMENT_REQUIRES_3DS_VERIFICATION') {
  const errorDetails = find(
    get(error, 'paymentTransactionFailureDetails'),
    ({ failureType }) => failureType === 'REQUIRES_3DS_VERIFICATION'
  );

  // get result code
  const resultCode = get(errorDetails, 'nextAction.attributes.resultCode');
  // get action
  const action = omit(
    get(errorDetails, 'nextAction.attributes'),
    'resultCode'
  );

  if (!resultCode) {
    actions.reject();
  } else {
    //
    actions.resolve({
      resultCode,
      action,
    });
  }
} else if (error) {
  actions.reject();
}

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 or onPaymentFailed events.

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 actions.resolve({resultCode, 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.