@adyen/react-native/lib/module/components/AdyenCheckout.js

Wraps Adyen Checkout Drop-In and Components for iOS and Android for convenient use with React Native

"use strict";

import React, { useRef, useCallback, useEffect, useState, useMemo } from 'react';
import { ErrorCode } from '../core';
import { AdyenCheckoutContext } from '../hooks/useAdyenCheckout';
import { getWrapper } from '../modules/base/getWrapper';
import { SessionHelper } from '../modules/session/SessionHelperModule';
import { checkConfiguration } from './utils/checkConfiguration';
import { checkPaymentMethodsResponse } from './utils/checkPaymentMethodsResponse';
import { startEventListeners } from './utils/startEventListeners';
import { AdyenComponentContext } from '../hooks/useComponent';
import { useSubscriptionManager } from '../hooks/useSubscriptionManager';

/**
 * Props for AdyenCheckout
 */
import { jsx as _jsx } from "react/jsx-runtime";
export const AdyenCheckout = ({
  config,
  paymentMethods,
  session,
  onSubmit,
  onError,
  onAdditionalDetails,
  onComplete,
  children
}) => {
  const onCompleteRef = useRef(onComplete);
  const onErrorRef = useRef(onError);
  const onSubmitRef = useRef(onSubmit);
  const onAdditionalDetailsRef = useRef(onAdditionalDetails);
  const configRef = useRef(config);
  const eventHandlerRefs = useMemo(() => ({
    onSubmit: onSubmitRef,
    onError: onErrorRef,
    onComplete: onCompleteRef,
    onAdditionalDetails: onAdditionalDetailsRef,
    config: configRef
  }), []);
  const {
    subscribe,
    unsubscribe,
    removeEventListeners,
    storeEventListeners
  } = useSubscriptionManager(eventHandlerRefs);
  const [sessionContext, setSessionContext] = useState(undefined);
  const currentPaymentMethods = useMemo(() => {
    return paymentMethods ?? sessionContext?.paymentMethods;
  }, [paymentMethods, sessionContext]);
  useEffect(() => {
    checkConfiguration(config);
    configRef.current = config;
  }, [config]);
  useEffect(() => {
    onCompleteRef.current = onComplete;
  }, [onComplete]);
  useEffect(() => {
    onErrorRef.current = onError;
  }, [onError]);
  useEffect(() => {
    onSubmitRef.current = onSubmit;
  }, [onSubmit]);
  useEffect(() => {
    onAdditionalDetailsRef.current = onAdditionalDetails;
  }, [onAdditionalDetails]);
  useEffect(() => {
    const completeHandler = result => onCompleteRef.current?.(result, SessionHelper);
    const errorHandler = error => onErrorRef.current?.(error, SessionHelper);
    SessionHelper.assignCompletionHandler(completeHandler);
    SessionHelper.assignErrorHandler(errorHandler);
    return () => {
      SessionHelper.removeAllListeners();
      SessionHelper.hide(true);
    };
  }, []);
  useEffect(() => {
    if (session && !sessionContext) {
      SessionHelper.createSession(session, configRef.current).then(sessionResponse => setSessionContext(sessionResponse)).catch(error => {
        const errorDTO = {
          message: String(error),
          errorCode: ErrorCode.sessionError
        };
        onErrorRef.current?.(errorDTO, SessionHelper);
      });
    }
  }, [session, sessionContext]);
  const start = useCallback(typeName => {
    const validPaymentMethods = checkPaymentMethodsResponse(currentPaymentMethods);
    const {
      nativeComponent,
      paymentMethod
    } = getWrapper(typeName, validPaymentMethods);
    removeEventListeners(nativeComponent);
    const listeners = startEventListeners(nativeComponent, eventHandlerRefs);
    storeEventListeners(nativeComponent, listeners);
    if (paymentMethod) {
      const singlePaymentMethods = {
        paymentMethods: [paymentMethod]
      };
      const singlePaymentConfig = {
        ...configRef.current,
        dropin: {
          skipListWhenSinglePaymentMethod: true
        }
      };
      nativeComponent.open(singlePaymentMethods, singlePaymentConfig);
    } else {
      nativeComponent.open(validPaymentMethods, configRef.current);
    }
  }, [eventHandlerRefs, currentPaymentMethods, removeEventListeners, storeEventListeners]);
  const checkoutContextValue = useMemo(() => ({
    start,
    config,
    paymentMethods: currentPaymentMethods,
    isReady: currentPaymentMethods !== undefined
  }), [currentPaymentMethods, start, config]);
  return /*#__PURE__*/_jsx(AdyenCheckoutContext.Provider, {
    value: checkoutContextValue,
    children: /*#__PURE__*/_jsx(AdyenComponentContext.Provider, {
      value: useMemo(() => ({
        subscribe,
        unsubscribe
      }), [subscribe, unsubscribe]),
      children: children
    })
  });
};
//# sourceMappingURL=AdyenCheckout.js.map