3DS With MyFatoorah

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

const callBackUrl = `${protocol}://${host}/checkout/3ds-verification?gatewayType=MY_FATOORAH`
const errorUrl = `${protocol}://${host}/checkout/3ds-verification?3ds-verification-success=false`

{
  paymentMethodProperties: {
    ...
    callBackUrl: "https://{your_host}/checkout/3ds-verification?gatewayType=MY_FATOORAH",
    errorUrl: "https://{your_host}/checkout/3ds-verification?3ds-verification-success=false",
    ...
  }
}

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

import { useRouter } from 'next/router';
import { isEmpty, set } 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);

      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(
      () => {
        // submit the order on the review page if '3ds-verification-success=true'
        redirectTo(verificationSuccessRedirectUrl);
      },
      3000
    );
  }

  if (
    transactionStatus === 'SUCCESS' ||
    transactionStatus === 'AWAITING_ASYNC_RESULTS'
  ) {
    // submit the order on the review page if '3ds-verification-success=true'
    redirectTo(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 redirectTo = redirectUrl => {
  window.location.href = redirectUrl;
};

import { FC, useEffect } from 'react';

import { useRouter } from 'next/router';
import { get, find } from 'lodash';

const CheckoutReview: FC = () => {
  const router = useRouter();
  const { query } = router;
  // resolve cart
  const { cart, resolving } = ...;

  // useHandleSubmitCart - your hook implementation to submit the order
  const { error, submitting, onSubmit } = useHandleSubmitCart();

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

  useEffect(() => {
    if (threeDSVerificationResult === 'true') {
      if (!resolving && cart) {
        // submit the order if the 3DS verification result is successful
        onSubmit();
      }

      if (error) {
        // delete '3ds-verification-success' parameter from the URL
        delete router.query['3ds-verification-success'];
        router.replace(router, undefined, { shallow: true });
      }
    }
  }, [threeDSVerificationResult, router, onSubmit, cart, error, resolving]);

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

      const verificationUrl = get(
        threeDSDetails,
        'threeDSecureVerificationUrl'
      );

      if (verificationUrl) {
        // redirect to the 3DS verification page
        router.push(verificationUrl);
      }
    }
  }, [error, router]);

  const threeDSVerificationFailedError =
    router.query['3ds-verification-success'] === 'false'
      ? '3DS verification failed'
      : undefined;

  const threeDSTransactionFailedError =
    router.query['3ds-transaction-success'] === 'false'
      ? 'We are unable to process your payment'
      : undefined;
  return (
    <div>
      {threeDSVerificationFailedError && (
        <strong className="block my-4 text-red-600 text-lg font-normal">
          {threeDSVerificationFailedError}
        </strong>
      )}
      {threeDSTransactionFailedError && (
        <strong className="block my-4 text-red-600 text-lg font-normal">
          {threeDSTransactionFailedError}
        </strong>
      )}

      ...

      <SubmitButton
          id="submit-order-button"
          disabled={submitting}
          label='Submit Order'
          onClick={onSubmit}
          type="button"
        />
    </div>
  );
};