Chase Payment Module

export const ChasePaymentForm: FC<Props> = ({
  ...
}) => {
  const { chaseUidUrl, loading, ready, error } = useChaseHpf(...);

  return (
    <section className="flex flex-col gap-4">
      {chaseUidUrl && ready && (
        // Loads HPF in iframe with the UID URL
        <iframe
          id="chase-hpf-iframe"
          className="..."
          src={chaseUidUrl}
          referrerPolicy="strict-origin-when-cross-origin"
        />
      )}
    </section>
  );
};

export const useChaseHpf = (...) => {
  // Calls Broadleaf Chase Payment Module to initialize the UID for the form
  const { chaseUidUrl, loading } = useChaseUid();
  const completePayment = useCallback(
    async (data: PaymentCompletionResponse) => {
      const request: CreatePaymentRequest = {
        name: "Credit Card",
        type: DefaultPaymentType.CREDIT_CARD,
        gatewayType: PaymentGatewayType.CHASE_ORBITAL,
        amount: cart?.cartPricing?.total ?? { amount: 0, currency: "USD" },
        paymentMethodProperties: {
          paymentInstrumentType: "CREATED_HPS_PROFILE",
          hpsUid: data.uid
        },
        ...
      };

      // Creates a payment in PaymentTransactionService during HPF completePayment callback
      await submitCreatePaymentRequest(createPaymentRequest);
    },
    [
      cart?.cartPricing?.total,
      ...
      submitCreatePaymentRequest,
    ],
  );

  const hpfReady = useCallback(() => {
    setReady(true);
  }, []);

  useEffect(() => {
    const hpfScript = document.getElementById("chase-hpf-script");
    const hpfIsReady = typeof window.hpfReady === "function";
    if (hpfScript && hpfIsReady) {
      setReady(true);
      return;
    }

    attachCallbacks({
      handlePaymentErrors,
      handleTransactionErrors,
      completePayment,
      hpfReady,
      scrollRelay,
      startPayment,
      cancelPayment,
    });

    if (hpfScript) {
      return;
    }
    // Dynamically inject the Chase HPF script after handlers are set
    const script = document.createElement("script");
    script.src = chaseScriptSrc;
    script.id = "chase-hpf-script";
    script.async = true;
    script.onerror = (e) => {
      logger.error("Failed to load Chase HPF script.", e);
    };
    script.onload = () => {
      hpfReady();
    };
    document.body.appendChild(script);
  }, [
    cancelPayment,
    chaseScriptSrc,
    completePayment,
    handlePaymentErrors,
    handleTransactionErrors,
    hpfReady,
    scrollRelay,
    startPayment,
  ]);

  return { chaseUidUrl, ready, error, loading };
}


export const useChaseUid = () => {
  ...
  const makeRequest = useCallback(async () => {
    if (!cartId) {
      return;
    }
    try {
      setLoading(true);

      // Calls uid-init endpoint in Chase Payment Module
      const response: BroadleafHPSOrderAbstractionInitResponse =
        await getUid(appState);
      const url = new URL(response.hpsBaseRequestUrl);
      url.searchParams.set("uid", response.uid);
      setChaseUidUrl(url.toString());
    } catch (error) {
      logger.error("Error fetching Chase UID:", error);
    } finally {
      setLoading(false);
    }
  }, [appState, cartId]);

  useEffect(() => {
    if (cartId) {
      makeRequest();
    }
  }, [cartId, makeRequest]);

  return { chaseUidUrl, loading, refetch: makeRequest };
}