@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 { NativeEventEmitter } from 'react-native';
import { Event, ErrorCode } from '../core';
import { AdyenCheckoutContext } from '../hooks/useAdyenCheckout';
import { getWrapper } from '../modules/base/getWrapper';
import { SessionHelper } from '../modules/session/SessionHelperModule';
import { checkConfiguration, checkPaymentMethodsResponse } from './utils';

/**
 * Props for AdyenCheckout
 */
import { jsx as _jsx } from "react/jsx-runtime";
export const AdyenCheckout = ({
  config,
  paymentMethods,
  session,
  onSubmit,
  onError,
  onAdditionalDetails,
  onComplete,
  children
}) => {
  const subscriptions = useRef([]);
  const [sessionContext, setSessionContext] = useState(undefined);
  const currentPaymentMethods = useMemo(() => {
    return paymentMethods ?? sessionContext?.paymentMethods;
  }, [paymentMethods, sessionContext]);
  function removeEventListeners() {
    subscriptions.current.forEach(s => s.remove());
  }
  useEffect(() => {
    return () => {
      removeEventListeners();
    };
  }, []);
  useEffect(() => {
    if (session && !sessionContext) {
      SessionHelper.createSession(session, config).then(sessionResponse => {
        setSessionContext(sessionResponse);
      }).catch(error => {
        onError({
          message: String(error),
          errorCode: ErrorCode.sessionError
        }, SessionHelper);
      });
    }
  }, [session, sessionContext, config, onError, setSessionContext]);
  const startEventListeners = useCallback(nativeComponent => {
    removeEventListeners();
    const eventEmitter = new NativeEventEmitter(nativeComponent);
    function submitPayment(data, extra) {
      const payload = {
        ...data,
        returnUrl: data.returnUrl ?? config.returnUrl
      };
      onSubmit?.(payload, nativeComponent, extra);
    }
    subscriptions.current = [eventEmitter.addListener(Event.onSubmit, response => submitPayment(response.paymentData, response.extra)), eventEmitter.addListener(Event.onError, error => onError?.(error, nativeComponent))];
    if (nativeComponent.isSupported(Event.onComplete)) {
      subscriptions.current.push(eventEmitter.addListener(Event.onComplete, data => onComplete?.(data, nativeComponent)));
    }
    if (nativeComponent.isSupported(Event.onAdditionalDetails)) {
      subscriptions.current.push(eventEmitter.addListener(Event.onAdditionalDetails, data => onAdditionalDetails?.(data, nativeComponent)));
    }
    const onDisableStoredPaymentMethodCallback = config.dropin?.onDisableStoredPaymentMethod;
    if (onDisableStoredPaymentMethodCallback && nativeComponent.isSupported(Event.onDisableStoredPaymentMethod)) {
      const nativeModule = nativeComponent;
      subscriptions.current.push(eventEmitter.addListener(Event.onDisableStoredPaymentMethod, data => onDisableStoredPaymentMethodCallback(data, () => {
        nativeModule.removeStored(true);
      }, () => {
        nativeModule.removeStored(false);
      })));
    }
    const onUpdateAddressCallback = config.card?.onUpdateAddress;
    const onConfirmAddressCallback = config.card?.onConfirmAddress;
    if (onUpdateAddressCallback && onConfirmAddressCallback && nativeComponent.isSupported(Event.onAddressUpdate) && nativeComponent.isSupported(Event.onAddressConfirm)) {
      const nativeModule = nativeComponent;
      subscriptions.current.push(eventEmitter.addListener(Event.onAddressUpdate, async prompt => {
        onUpdateAddressCallback(prompt, nativeModule);
      }), eventEmitter.addListener(Event.onAddressConfirm, address => {
        onConfirmAddressCallback(address, nativeModule);
      }));
    }
    const onBalanceCheckCallback = config.partialPayment?.onBalanceCheck;
    const onOrderRequestCallback = config.partialPayment?.onOrderRequest;
    const onOrderCancelCallback = config.partialPayment?.onOrderCancel;
    if (onBalanceCheckCallback && onOrderRequestCallback && onOrderCancelCallback && nativeComponent.isSupported(Event.onCheckBalance) && nativeComponent.isSupported(Event.onRequestOrder) && nativeComponent.isSupported(Event.onCancelOrder)) {
      const component = nativeComponent;
      subscriptions.current.push(eventEmitter.addListener(Event.onCheckBalance, async paymentData => {
        onBalanceCheckCallback(paymentData, balance => {
          component.provideBalance(true, balance, undefined);
        }, error => {
          component.provideBalance(false, undefined, error);
        });
      }), eventEmitter.addListener(Event.onRequestOrder, () => {
        onOrderRequestCallback(order => {
          component.provideOrder(true, order, undefined);
        }, error => {
          component.provideOrder(false, undefined, error);
        });
      }), eventEmitter.addListener(Event.onCancelOrder, ({
        order,
        shouldUpdatePaymentMethods
      }) => {
        onOrderCancelCallback(order, shouldUpdatePaymentMethods, component);
      }));
    }
    const onBinLookupCallback = config.card?.onBinLookup;
    if (onBinLookupCallback && nativeComponent.isSupported(Event.onBinLookup)) {
      subscriptions.current.push(eventEmitter.addListener(Event.onBinLookup, onBinLookupCallback));
    }
    const onBinValueCallback = config.card?.onBinValue;
    if (onBinValueCallback && nativeComponent.isSupported(Event.onBinValue)) {
      subscriptions.current.push(eventEmitter.addListener(Event.onBinValue, onBinValueCallback));
    }
  }, [onSubmit, onAdditionalDetails, onComplete, onError, config]);
  const start = useCallback(typeName => {
    const validPaymentMethods = checkPaymentMethodsResponse(currentPaymentMethods);
    const {
      nativeComponent,
      paymentMethod
    } = getWrapper(typeName, validPaymentMethods);
    checkConfiguration(config);
    startEventListeners(nativeComponent);
    if (paymentMethod) {
      const singlePaymentMethods = {
        paymentMethods: [paymentMethod]
      };
      const singlePaymentConfig = {
        ...config,
        dropin: {
          skipListWhenSinglePaymentMethod: true
        }
      };
      nativeComponent.open(singlePaymentMethods, singlePaymentConfig);
    } else {
      nativeComponent.open(validPaymentMethods, config);
    }
  }, [config, currentPaymentMethods, startEventListeners]);
  return /*#__PURE__*/_jsx(AdyenCheckoutContext.Provider, {
    value: {
      start,
      config,
      paymentMethods: currentPaymentMethods,
      isReady: currentPaymentMethods !== undefined
    },
    children: children
  });
};
//# sourceMappingURL=AdyenCheckout.js.map