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

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

"use strict";

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { findNodeHandle } from 'react-native';
import NativeCardView from '../specs/NativeCardView';
import { useAdyenCheckout } from '../hooks/useAdyenCheckout';
import { useComponent } from '../hooks/useComponent';
import { jsx as _jsx } from "react/jsx-runtime";
const PAYMENT_METHOD_TYPE = 'scheme';

/**
 * Type-safe wrapper for the native CardView component.
 * Automatically serializes PaymentMethod and Configuration objects to JSON strings.
 */
export const CardView = ({
  paymentMethod
}) => {
  const {
    config,
    paymentMethods
  } = useAdyenCheckout();
  const {
    subscribe,
    unsubscribe
  } = useComponent();
  const nativeRef = useRef(null);
  const subscribedKey = useRef(null);
  const [size, setSize] = useState();
  const handleLayoutChange = useCallback(event => {
    setSize(event.nativeEvent);
  }, []);
  const _paymentMethod = useMemo(() => paymentMethod ?? paymentMethods?.paymentMethods?.find(x => x.type === PAYMENT_METHOD_TYPE), [paymentMethod, paymentMethods]);
  useEffect(() => {
    const tag = findNodeHandle(nativeRef.current);
    if (tag == null) return;
    const key = String(tag);
    subscribedKey.current = key;
    subscribe(key);
    return () => {
      unsubscribe(key);
      subscribedKey.current = null;
    };
  }, [_paymentMethod, subscribe, unsubscribe]);
  useEffect(() => {
    if (!_paymentMethod) {
      console.error(`No payment method found for type ${PAYMENT_METHOD_TYPE}`);
    }
  }, [_paymentMethod]);
  if (!_paymentMethod) {
    return null;
  }
  return /*#__PURE__*/_jsx(NativeCardView, {
    ref: nativeRef,
    paymentMethod: JSON.stringify(_paymentMethod),
    configuration: JSON.stringify(config),
    onLayoutChange: handleLayoutChange,
    style: {
      height: size?.height,
      width: '100%'
    }
  });
};
//# sourceMappingURL=CardView.js.map