ios – Stripe Apple pay integration on internet

I’m making an attempt to Combine Apple and Google pay in stripe checkout kind.
I’ve adopted https://help.stripe.com/questions/enable-apple-pay-on-your-stripe-account
information. Area is verified. after I test cost strategies in stripe dashboard, It reveals each google pay and apple pay are activated with inexperienced coloration.

Opening checkout kind I solely see google pay however not apple pay button. I’ve checked it from safari and chrome in mac and even used USA VPN however nonetheless its not displaying apple pay button. Are you able to assist me out what step I’m lacking?

import {
  Parts,
  PaymentElement,
  useElements,
  useStripe,
} from "@stripe/react-stripe-js";
import { loadStripe, StripePaymentElementOptions } from "@stripe/stripe-js";
import { useCheckoutContext } from "@context/CheckoutSessionContext";
import { displayCurrencyValue } from "@utils/foreign money";
import { DoubleButtonCardCta } from "@elements/checkout/DoubleButtonCardCta";
import { Typography } from "@elements/Typography";

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

sort StripeCheckoutForm =  null;
  brandAccent: string;
  onClickBack: () => any;
;
export const StripeCheckoutForm: FunctionComponent<StripeCheckoutForm> = ({
  ...props
}) => {
  return (
    <Parts
      choices={{
        clientSecret: props?.clientSecret ?? undefined,
        look: {
          theme: "stripe",
        },
      }}
      stripe={stripePromise}
    >
      <StripeCheckoutFormWithoutProvider {...props} />
    </Parts>
  );
};

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

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

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

  const paymentElementOptions: StripePaymentElementOptions = {
    structure: "tabs",
    phrases: {
      card: "all the time",
    },
  };

  return (
    <div className="">
      <Typography as={"h2"} variant={"h5"} className="mb-2 md:mb-5">
        Fee Methodology
      </Typography>
      <PaymentElement id="payment-element" choices={paymentElementOptions} />
      <DoubleButtonCardCta
        primaryButton={{
          textual content: `Pay ${displayCurrencyValue(
            firstPurchase?.selectedPrice?.localValue ?? 0,
            firstPurchase?.selectedPrice?.foreign money
          )}`,
          onClick: handlePayment,
          isProcessing: firstPurchase.isHandlingFinalPayment,
          isDisabled: !stripe || !parts,
          buttonColor: brandAccent,
        }}
        secondaryButton={{
          textual content: "Return",
          onClick: onClickBack,
        }}
      />
    </div>
  );
};