From 07dd30f01a0d8936e0e55158a11f0f58939772ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?=
 <9116238+krzysztofzuraw@users.noreply.github.com>
Date: Fri, 18 Apr 2025 12:57:04 +0200
Subject: [PATCH] Add 3ds secure flow

---
 .../stripe/actions/initialize-transaction.ts       | 14 +++++++++++---
 .../stripe/components/stripe-checkout-form.tsx     |  5 +++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/modules/stripe/actions/initialize-transaction.ts b/src/modules/stripe/actions/initialize-transaction.ts
index 6d7818e..714372b 100644
--- a/src/modules/stripe/actions/initialize-transaction.ts
+++ b/src/modules/stripe/actions/initialize-transaction.ts
@@ -53,6 +53,14 @@ const saleorDataSchema = z.object({
   }),
 });
 
+const CardPaymentMethodSchema = z.object({
+  paymentMethod: z.literal("card"),
+  requestThreeDSecure: z
+    .enum(["any", "automatic", "challenge"])
+    .optional()
+    .default("automatic"),
+});
+
 export const initializeTransaction = actionClient
   .schema(
     z.object({
@@ -60,9 +68,9 @@ export const initializeTransaction = actionClient
       checkoutId: z.string(),
       paymentGatewayId: z.string(),
       data: z.object({
-        paymentIntent: z.object({
-          paymentMethod: z.string(),
-        }),
+        paymentIntent: z.discriminatedUnion("paymentMethod", [
+          CardPaymentMethodSchema,
+        ]),
       }),
       amount: z.number(),
       idempotencyKey: z.string(),
diff --git a/src/modules/stripe/components/stripe-checkout-form.tsx b/src/modules/stripe/components/stripe-checkout-form.tsx
index 2f4f148..80a61d8 100644
--- a/src/modules/stripe/components/stripe-checkout-form.tsx
+++ b/src/modules/stripe/components/stripe-checkout-form.tsx
@@ -53,7 +53,7 @@ export const StripeCheckoutFormWrapped = (props: {
   const stripe = useStripe();
   const elements = useElements();
   const [loading, setLoading] = useState(false);
-  const [paymentMethod, setPaymentMethod] = useState<string | null>(null);
+  const [paymentMethod, setPaymentMethod] = useState<"card" | null>(null);
 
   const handleSubmit = async (event: any) => {
     if (!stripe) {
@@ -99,6 +99,7 @@ export const StripeCheckoutFormWrapped = (props: {
       data: {
         paymentIntent: {
           paymentMethod,
+          // requestThreeDSecure: "any",
         },
       },
     });
@@ -165,7 +166,7 @@ export const StripeCheckoutFormWrapped = (props: {
     <form onSubmit={handleSubmit} className="flex flex-col gap-4">
       <PaymentElement
         onChange={(event) => {
-          setPaymentMethod(event.value.type);
+          setPaymentMethod(event.value.type as "card");
         }}
       />
       <div className="flex justify-stretch">