Stripe Payment Services React Hooks

import { StripePaymentServicesClient } from '@broadleaf/stripe-payment-services-api';
import { useCreateSetupIntentRequest } from '@broadleaf/stripe-payment-services-react';
import type { ClientOptions } from '@broadleaf/commerce-core';
import { usePaymentAuthState } from '@app/common/hooks';

const options: ClientOptions = {
  applicationToken,
  baseHost,
  locale: currentLocale,
  preview,
};
const stripePaymentServicesClient = new StripePaymentServicesClient(options);
const authState = usePaymentAuthState();

const { createSetupIntent, isFetching, error } = useCreateSetupIntentRequest({
  stripePaymentServicesClient,
  authState
});

import { useMemo } from 'react';
import { useAuth } from '@broadleaf/auth-react';
import { StripePaymentServicesClient } from '@broadleaf/stripe-payment-services-api';
import { useCreateSetupIntentRequest } from '@broadleaf/stripe-payment-services-react';
import type { AuthState } from '@broadleaf/payment-js';
import type { ClientOptions } from '@broadleaf/commerce-core';

const { isAuthenticated, isLoading, getAccessToken, user } = useAuth();
const { csrMode, csrAnonymous } = useCsrContext();
const authState = useMemo<AuthState>(() => {
  const customerEmail = user?.email_address;
  const customerId = user?.customer_id;
  return {
    isAuthenticated,
    isAuthenticating: isLoading,
    getAccessToken,
    customerEmail,
    customerId,
    isCsr: csrMode,
    isAnonymousCsr: csrAnonymous,
  };
}, [csrAnonymous, csrMode, getAccessToken, isAuthenticated, isLoading, user]);
const options: ClientOptions = {
  applicationToken,
  baseHost,
  locale: currentLocale,
  preview,
};
const stripePaymentServicesClient = new StripePaymentServicesClient(options);
const {
  createSetupIntent,
  isFetching,
  error,
} = useCreateSetupIntentRequest({
  stripePaymentServicesClient,
  authState
});