Apple Pay Button - How to make an Apple Pay button using React + NextJS + Typescript + Tailwindcss

ApplePayButton.tsx

// components/ApplePayButton.tsx
import { buttonVariants } from "@/components/ui/button";
import { cn, hasApplePay } from "@/lib/utils";
import { Icons } from "@/components/icons";
import Link from "next/link";

export const ApplePayButton = () =>
  hasApplePay() && (
    <Link
      href="https://buy.stripe.com/00g7vD4Vu8zQb8k5kl?prefilled_promo_code=EARLYBIRD"
      target="_blank"
      className={cn(
        buttonVariants({ variant: "default", size: "lg" }),
        "w-full gap-1 text-xl",
      )}
    >
      <Icons.apple className="ml-2 h-5 w-5" />
      <p>Pay</p>
    </Link>
  );

icons.tsx

// components/icons.tsx
export const Icons = {
  apple: (props) => (
    <svg role="img" viewBox="0 0 24 24" {...props}>
      <path
        d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
        fill="currentColor"
      />
    </svg>
  ),
}

index.d.ts

// types/index.d.ts
declare global {
  interface Window {
    ApplePaySession: any;
  }
}

utils.ts

// lib/utils.ts
import clsx, { ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

export function hasApplePay() {
  return typeof window !== "undefined" && window.ApplePaySession;
}

Installation

1. Ensure you have shadcn/ui button installed.

npx shadcn-ui@latest add button

2. Copy paste the above code into your project

Reference

Example taken from magicuikit.com/pricing