Adyen Drop-in Web Integration

export const useHandleSubmitAdyenPayment = (
  props: HandleSubmitProps = {}
): HandleSubmitResponse => {
  const { setError = noop } = props;
  const cartState = useCartContext();
  const { cart } = cartState;
  const paymentClient = usePaymentClient();
  const authState = usePaymentAuthState();
  const { handleSubmitPaymentInfo } = useSubmitPaymentRequest({
    authState,
    payments: undefined,
    ownerId: cart?.id,
    owningUserEmailAddress: cart.emailAddress,
    paymentClient,
    multiplePaymentsAllowed: false,
    rejectOnError: true,
  });

  const getPaymentAmount = useGetPaymentAmount({
    gatewayType: AdyenPaymentForm.TYPE,
  });

  const getPaymentCallbackUrl = useGetPaymentCallbackUrl();

  const { error, onSubmit: submitCart } = useHandleSubmitCart();

  const [adyenComponent, setAdyenComponent] = useState<UIElement>();

  useEffect(() => {
    if (!adyenComponent) {
      return;
    }

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

      const action = get(errorDetails, 'nextAction.attributes');

      adyenComponent.handleAction(action);
    } else if (errorType && error) {
      setError(error);
    }
  }, [error, adyenComponent, setError]);

  const getLineItems = useGetLineItems();

  return useEventCallback(
    async ({
      state,
      paymentType,
      component,
      sessionId,
      paymentData,
    }: HandleSubmitParameters) => {
      setError(undefined);
      const data = get(state, 'data');

      setAdyenComponent(component);

      const billingAddress = getBillingAddress(state, paymentType, paymentData);

      // these are required to pass to the backend as part of the payment
      const returnUrl = getPaymentCallbackUrl({
        gatewayType: AdyenPaymentForm.TYPE,
      });

      const amount = getPaymentAmount(cart);
      const paymentRequest = {
        name: AdyenPaymentForm.TYPE,
        type: paymentType,
        gatewayType: AdyenPaymentForm.TYPE,
        amount,
        subtotal: cart.cartPricing.subtotal,
        adjustmentsTotal: cart.cartPricing.adjustmentsTotal,
        fulfillmentTotal: cart.cartPricing.fulfillmentTotal,
        taxTotal: cart.cartPricing.totalTax,
        isSingleUsePaymentMethod: true,
        shouldArchiveExistingPayments: true,
        paymentMethodProperties: {
          sessionId,
          returnUrl,
        },
        billingAddress,
      } as PaymentRequest;

      let paymentSummary;

      try {
        paymentSummary = await handleSubmitPaymentInfo(paymentRequest);

        if (paymentSummary) {
          pushGtmAddPayment(cart, paymentSummary);

          const countryCode = cart.fulfillmentGroups[0]?.address?.country;
          const lineItems = getLineItems(cart);

          const checkoutResponse = await submitCart({
            sensitivePaymentMethodData: [
              {
                paymentId: paymentSummary.paymentId,
                paymentMethodProperties: {
                  ADYEN_PAYMENT_DATA: {
                    ...data,
                    shopperEmail: authState.isAuthenticated
                      ? authState.customerEmail
                      : cart.emailAddress,
                    lineItems,
                    countryCode: countryCode,
                  },
                },
              },
            ],
          });

          return checkoutResponse?.paymentSummaries[0];
        }
      } catch (err) {
        console.error('There was an error adding payment information', err);
        setError(err);
      }
    },
    []
  );
};

export const useHandleOnPaymentCompleted = (
  props: PaymentCompletedProps = {}
) => {
  const { setUIElement } = props;

  const router = useRouter();
  const { cart } = useCartContext();

  const authState = usePaymentAuthState();

  return useEventCallback(async (result, element: UIElement) => {
    const resultCode = get(result, 'resultCode');
    if ('Authorised' === resultCode) {
      const emailAddress = authState.isAuthenticated
        ? undefined
        : cart.emailAddress;
      await router.push({
        pathname: '/checkout/payment-confirmation',
        query: {
          cart_id: cart.id,
          email_address: emailAddress,
          payment_finalization_status: 'FINALIZED',
          payment_result_status: 'SUCCESS',
          gateway_type: AdyenPaymentForm.TYPE,
        },
      });
    } else {
      element.unmount();
      setUIElement && setUIElement(undefined);
      await router.push({
        pathname: '/checkout/payment',
        query: {
          payment_finalization_status: 'REQUIRES_PAYMENT_MODIFICATION',
          payment_result_status:
            'Cancelled' === resultCode ? 'PAYMENT_CANCELED' : 'PAYMENT_FAILED',
          gateway_type: AdyenPaymentForm.TYPE,
        },
      });
    }
  }, []);
};

const AdyenPaymentForm: AdyenPaymentFormType = () => {
    ...

  const [usingStoredPaymentMethod, setUsingStoredPaymentMethod] =
    useState<boolean>(false);
  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);

  // the Ref is used to get the Formik form values
  const formikBillingAddressRef = useRef();

  useEffect(() => {
    if (session && !dropinComponent && !sessionIsCreating) {
      const configuration = {
        ...
        paymentMethodsConfiguration: {
          card: {
            hasHolderName: true,
            holderNameRequired: true,
          },
        },
        onSubmit: (state, dropin) => {
          setIsSubmitting(true);

          // get the billing address from the Formik
          const adyenBillingAddress = get(formikBillingAddressRef, 'current.values');
          handleOnSubmit(
            state,
            dropin,
            session.id,
            paymentType,
            adyenBillingAddress
          ).finally(() => {
            setIsSubmitting(false);
          });
        },
        ...
      };

      AdyenCheckout(configuration).then(checkout => {
        const dComponent = checkout
          .create('dropin', {
            showStoredPaymentMethods: true,
            onSelect: (dropin: UIElement) => {
              ...

              const storedPaymentMethodId = get(
                dropin.data,
                'paymentMethod.storedPaymentMethodId'
              );

              // determine if the stored payment method is selected
              setUsingStoredPaymentMethod(!!storedPaymentMethodId);
            },
          })
          .mount('#dropin-container');

        setDropinComponent(dComponent);
      });
    }

    ...
  }, [
    session,
    dropinComponent,
    setDropinComponent,
    sessionIsCreating,
    handleOnSubmit,
    handleOnPaymentCompleted,
    setIsSubmitting,
    formikBillingAddressRef,
    setUsingStoredPaymentMethod,
    paymentType,
    setPaymentType,
  ]);

  return (
    <div>
      ...
      {/* Add the Billing address form. When the saved payment method is used, the billing address is not required */}
      {!usingStoredPaymentMethod && (
        <BillingAddressForm
          innerRef={formikBillingAddressRef}
          isSubmitting={isSubmitting}
        />
      )}
      ...
    </div>
  );
};

const BillingAddressForm = ({ innerRef, isSubmitting }) => {

  return (
    <Formik
      innerRef={innerRef}
      initialValues={...}
      validateOnBlur
      validateOnChange={false}
      onSubmit={() => {
        //do nothing
      }}
    >
      {() => (
        <div>
          {/* Billing address form. */}
        </div>
      )}
    </Formik>
  );
};

type AddressWithStreetAndHouseNumber = {
    // Adyen billing address format
};

const useHandleOnSubmit = ({ setError }) => {
  ...
  return useEventCallback(
    async (
      state,
      dropin: DropinElement,
      sessionId: string,
      paymentType: string,
      adyenBillingAddress?: AddressWithStreetAndHouseNumber
    ) => {
      ...

      let blcBillingAddress: Address;

      if (!isEmpty(adyenBillingAddress)) {
        // convert "adyenBillingAddress" to the Address
      }

      const paymentRequest = {
        ...,
        billingAddress: blcBillingAddress,
      } as PaymentRequest;

      let paymentSummary;

      try {
        paymentSummary = await handleSubmitPaymentInfo(paymentRequest);

        if (paymentSummary) {
          await submitCart({
            sensitivePaymentMethodData: [
              {
                paymentId: paymentSummary.paymentId,
                paymentMethodProperties: {
                  ADYEN_PAYMENT_DATA: {
                    ...data,
                    billingAddress: adyenBillingAddress,
                    shopperEmail: authState.isAuthenticated
                      ? authState.customerEmail
                      : cart.emailAddress,
                  },
                },
              },
            ],
          });
        }
      } catch (err) {
        ...
      }
    },
    []
  );
};