Stripe 3DS

const protocol = window.location.protocol.slice(0, -1);
const host = window.location.host;

const paymentIntentReturnURL = `${protocol}://${host}/checkout/3ds-verification?gatewayType=STRIPE`

{
  paymentMethodProperties: {
    ...
    PAYMENT_INTENT_RETURN_URL: "https://{your_host}/checkout/3ds-verification?gatewayType=STRIPE",
    ...
  }
}

import React, { FC, useEffect, useState } from 'react';

import { useRouter } from 'next/router';
import { isEmpty, set, omit } from 'lodash';

import { useHandleTransactionResult } from '@broadleaf/payment-react';

const ThreeDSecureVerification: FC = () => {
  const router = useRouter();
  const { query } = router;

  // the PaymentClient from '@broadleaf/commerce-cart'
  const paymentClient = ...;
  // the AuthState from '@broadleaf/payment-js'
  const authState = ...;

  const [transactionResult, setTransactionResult] =
    useState<Record<string, unknown>>();
  const { handleTransactionResult, error } = useHandleTransactionResult({
    paymentClient,
    authState,
  });

  const protocol = window.location.protocol.slice(0, -1);
  const host = window.location.host;
  const search = window.location.search;

  // Redirect to this page if the 3DS authentication is successful and this page is not opened in the iframe
  const verificationSuccessRedirectUrl = `${protocol}://${host}/checkout/review?3ds-verification-success=true`;
  // Redirect to this page if the 3DS authentication is failed
  const verificationFailureRedirectUrl = `${protocol}://${host}/checkout/review?3ds-verification-success=false`;
  // The 3DS verification can be successful, however, the 3DS result transaction itself (AUTHORIZE) can fail
  const transactionFailureRedirectUrl = `${protocol}://${host}/checkout/review?$3ds-transaction-success=false`;

  const threeDSVerificationResult = query['3ds-verification-success'];

  useEffect(() => {
    if (threeDSVerificationResult !== 'false') {
      const { gatewayType, ...request } = parseParams(search);

      const requestParams = omitRequestParamsForGatewayType(
        gatewayType,
        request
      );
      handleTransactionResult(gatewayType, requestParams).then(response => {
        setTransactionResult(response);
      });
    } else {
      redirectTo(verificationFailureRedirectUrl);
    }
  }, [
    verificationFailureRedirectUrl,
    handleTransactionResult,
    router,
    search,
    threeDSVerificationResult,
  ]);

  const transactionStatus =
    transactionResult?.transactionExecutionDetails[0]?.transactionStatus;

  if (
    transactionResult &&
    transactionStatus !== 'SUCCESS' &&
    transactionStatus !== 'AWAITING_ASYNC_RESULTS'
  ) {
    redirectTo(transactionFailureRedirectUrl);
  }

  if (error) {
    /*
    if there's an error, we'll still submit the order after the timeout to leverage other 3DS
    verification fall back options, e.g. webhook & 3DS result lookup. The timeout is to ensure
    webhooks would be processed by the time we re-submit the order
     */
    console.error(
      'Error encountered while verifying 3DS transaction result: ',
      error
    );
    setTimeout(
      () => redirectOrSubmitOrder(verificationSuccessRedirectUrl),
      3000
    );
  }

  if (
    transactionStatus === 'SUCCESS' ||
    transactionStatus === 'AWAITING_ASYNC_RESULTS'
  ) {
    redirectOrSubmitOrder(verificationSuccessRedirectUrl);
  }

  // show any loader
  return <PageLoader loading={true} />;
};

const parseParams = (search?: string): Record<string, never> => {
  if (isEmpty(search)) {
    return {};
  }

  search = search?.startsWith('?') ? search.slice(1) : search;

  return search
    ?.split('&')
    .map(param => {
      // eslint-disable-next-line prefer-const
      let [key, value] = param.split('=');
      key = decodeURIComponent(key);
      return { key, value };
    })
    .reduce((accumulator, { key, value }) => {
      set(accumulator, key, value);
      return accumulator;
    }, {});
};

const redirectOrSubmitOrder = verificationSuccessRedirectUrl => {
  if (isOpenedInIframe()) {
    // submit the order if this page is opened in the iframe
    // 'submit-order-button' - the id of the button to submit the order
    window.parent.document.getElementById('submit-order-button').click();
  } else {
    // the order will be submitted on the review page if '3ds-verification-success=true'
    window.location.href = verificationSuccessRedirectUrl;
  }
};

const redirectTo = redirectUrl => {
  if (isOpenedInIframe()) {
    window.parent.location.href = redirectUrl;
  } else {
    window.location.href = redirectUrl;
  }
};

const isOpenedInIframe = (): boolean => {
  return window !== window.top;
};

const omitRequestParamsForGatewayType = (
  gatewayType: string,
  requestParams?: Record<string, string>
): Record<string, string> => {
  if ('STRIPE' === gatewayType) {
    // do not send the client secret key
    return omit(requestParams, ['payment_intent_client_secret']);
  }

  return requestParams;
};