gatway.ts

gistfile1.txt

import React, { useEffect, useRef, useState } from "react";

import { IFormError, IPaymentGatewayConfig } from "@types";
import { CompleteCheckout_checkoutComplete_order } from "@saleor/sdk/lib/mutations/gqlTypes/CompleteCheckout";
import { ErrorMessage } from "@components/atoms";

interface IResourceConfig {
  src: string;
  integrity: string;
  crossOrigin: string;
}

interface TapPaySubmitState {
  data?: any;
  isValid?: boolean;
}
interface TapPaySubmitDropin {
  handleAction?: (data?: any) => any;
}
interface TapPayError {
  error?: string;
}

export interface IProps {
  config: IPaymentGatewayConfig[];

  formRef?: React.RefObject<HTMLFormElement>;

  processPayment: () => void;

  submitPayment: (data: {
    confirmationData: any;
    confirmationNeeded: boolean;
  }) => Promise<any>;

  submitPaymentSuccess: (
    order?: CompleteCheckout_checkoutComplete_order
  ) => void;

  errors?: IFormError[];

  onError: (errors: IFormError[]) => void;
}

const TapPayPaymentGateway: React.FC<IProps> = ({
  config,
  formRef,
  processPayment,
  submitPayment,
  submitPaymentSuccess,
  errors,
  onError
}: IProps) => {
  const [dropin, setDropin] = useState<any>();
  const gatewayRef = useRef<HTMLDivElement>(null);

  const onSubmitTapPayForm = async (state?: TapPaySubmitState) => {
    console.log("state", state?.data);
    if (!state?.isValid) {
      onError([new Error("error in state")]);
    } else {
      console.log("state", state?.data);
      const payment = await submitPayment(state?.data);

      if (payment.errors?.length) {
        onError(payment.errors);
      } else {
        let paymentAction;
        try {
          paymentAction = JSON.parse(payment.confirmationData);
        } catch (parseError) {
          onError([new Error("error on the paymentAction")]);
        }
        try {
          console.log("confirmationData", payment);
          dropin.handleAction(paymentAction);
        } catch (error) {
          onError([new Error(error)]);
        }
      }
    }
  };

  const onTapPayError = (error?: TapPayError) => {
    if (error?.error) {
      onError([{ message: error.error }]);
    } else {
      onError([new Error("error in tappay")]);
    }
  };

  useEffect(() => {
    if (true) {
      (formRef?.current as any)?.addEventListener("submitComplete", () => {
        onSubmitTapPayForm();
      });
    }
  }, [formRef, true]);

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    processPayment();
  };

  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      <div ref={gatewayRef} />
      <ErrorMessage errors={errors} />
    </form>
  );
};

export { TapPayPaymentGateway };