apple pay

src/components/Detail/Deposit.tsx

@@ -2,7 +2,7 @@ import { BalanceIcon, WithdrawIcon, Visa, MasterCard, PaypalIcon, ApplepayIcon,
 import { Button, Radio } from "~/components/UI";
 import  { BsPlusLg } from 'react-icons/bs'
 import { ReactNode, useState } from "react";
-import { Stripe } from "./Payments";
+import { Applepay, Stripe } from "./Payments";
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 
@@ -32,7 +32,9 @@ const Deposit: React.FC = () => {
   const selectPaymentMethod = (value: string) => {
     setUsedMethod(value);
   }
+
 
+
   const paymentList: paymentListProps[] = [
     {
       text:"Credit Card / Debit Card",
@@ -98,10 +100,19 @@ const Deposit: React.FC = () => {
             </div>
           </div>
           <div className={`w-0.5 h-[290px] bg-[#B4C7D8] col-span-1 ${top && usedMethod === 'stripe' ? "block" : "hidden"}`}></div>     
-          <div className={`col-span-3 ${top && usedMethod === 'stripe' ? "block" : "hidden"}`}>
+          <div className={`col-span-3`}>
               <Elements stripe={stripePromise}>
-                <Stripe />
+                {
+                  top && usedMethod === 'stripe' ?
+                  <Stripe />
+                  :
+                  top && usedMethod === 'apple' ?
+                  <Applepay />
+                  :
+                  ''
+                }
               </Elements>
+
           </div>
         </div>
         <div className="mt-10">

src/components/Detail/Payments/Applepay.tsx

@@ -0,0 +1,51 @@
+import { useState, useEffect } from "react";
+import { useStripe, PaymentRequestButtonElement } from "@stripe/react-stripe-js";
+
+export const Applepay = () => {
+    const stripe = useStripe() as any;
+    const [paymentRequest, setPaymentRequest] = useState<any>(null);
+    useEffect(() => {
+        if (stripe) {
+          const pr = stripe.paymentRequest({
+            country: "US",
+            currency: "usd",
+            total: {
+              label: "Membership",
+              amount: 2000,
+            },
+            requestPayerName: false,
+            requestPayerEmail: false,
+            // disableWallets: ["googlePay", "browserCard"],
+          });
+
+          pr.canMakePayment().then((result: any) => {
+            console.warn(result);
+            if (result) {
+              setPaymentRequest(pr);
+            }
+          });
+        }
+    },[stripe]);
+
+    const onPaymentSubmit = () => {
+        paymentRequest.on("paymentmethod", handlePaymentRequest);
+    };
+    const handlePaymentRequest = async (event: any) => {
+        console.warn(event);
+    }
+
+    return (
+        <>
+        <form>
+            {
+                paymentRequest && (
+                    <PaymentRequestButtonElement 
+                        options={{ paymentRequest }}
+                        onClick={onPaymentSubmit}
+                    />
+                )
+            }
+        </form>
+        </>
+    )
+}

src/components/Detail/Payments/index.ts

@@ -1 +1,2 @@
-export * from './Stripe';
+export * from './Stripe';
+export * from './Applepay';