Stripe Apple pay integration on web

Question

I am trying to Integrate Apple and Google pay in stripe checkout form. I have followed https://support.stripe.com/questions/enable-apple-pay-on-your-stripe-account guide. Domain is verified. when I check payment methods in stripe dashboard, It shows both google pay and apple pay are activated with green color.

Opening checkout form I only see google pay but not apple pay button. I have checked it from safari and chrome in mac and even used USA VPN but still its not showing apple pay button. Can you help me out what step I am missing?

import {
  Elements,
  PaymentElement,
  useElements,
  useStripe,
} from "@stripe/react-stripe-js";
import { loadStripe, StripePaymentElementOptions } from "@stripe/stripe-js";
import { useCheckoutContext } from "@context/CheckoutSessionContext";
import { displayCurrencyValue } from "@utils/currency";
import { DoubleButtonCardCta } from "@components/checkout/DoubleButtonCardCta";
import { Typography } from "@components/Typography";

const key = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;
const stripePromise = loadStripe(key as string);

type StripeCheckoutForm = {
  clientSecret?: string | null;
  brandAccent: string;
  onClickBack: () => any;
};
export const StripeCheckoutForm: FunctionComponent<StripeCheckoutForm> = ({
  ...props
}) => {
  return (
    <Elements
      options={{
        clientSecret: props?.clientSecret ?? undefined,
        appearance: {
          theme: "stripe",
        },
      }}
      stripe={stripePromise}
    >
      <StripeCheckoutFormWithoutProvider {...props} />
    </Elements>
  );
};

const StripeCheckoutFormWithoutProvider: FunctionComponent<
  StripeCheckoutForm
> = ({ brandAccent, onClickBack }) => {
  const { setCheckoutStep, firstPurchase, onSuccessfulFirstPurchase } =
    useCheckoutContext();

  const stripe = useStripe();
  const elements = useElements();

  const handlePayment = useCallback(async () => {
    const paymentResult = await firstPurchase.handleFinalPayment(
      stripe,
      elements
    );
    if (paymentResult?.paymentIntent) {
      onSuccessfulFirstPurchase();
    }
  }, [elements, firstPurchase, onSuccessfulFirstPurchase, stripe]);

  const paymentElementOptions: StripePaymentElementOptions = {
    layout: "tabs",
    terms: {
      card: "always",
    },
  };

  return (
    <div className="">
      <Typography as={"h2"} variant={"h5"} className="mb-2 md:mb-5">
        Payment Method
      </Typography>
      <PaymentElement id="payment-element" options={paymentElementOptions} />
      <DoubleButtonCardCta
        primaryButton={{
          text: `Pay ${displayCurrencyValue(
            firstPurchase?.selectedPrice?.localValue ?? 0,
            firstPurchase?.selectedPrice?.currency
          )}`,
          onClick: handlePayment,
          isProcessing: firstPurchase.isHandlingFinalPayment,
          isDisabled: !stripe || !elements,
          buttonColor: brandAccent,
        }}
        secondaryButton={{
          text: "Go back",
          onClick: onClickBack,
        }}
      />
    </div>
  );
};