From cf7da12a23064d4d291b8ce9a6c9e1197034e8d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?=
 <9116238+krzysztofzuraw@users.noreply.github.com>
Date: Tue, 15 Apr 2025 15:27:13 +0200
Subject: [PATCH 1/2] add support for new data format comming from
 transactionInitalizeSession

---
 .../stripe/actions/initialize-transaction.ts  | 18 +++++++-
 .../components/stripe-checkout-form.tsx       | 42 +++++++++++++++++--
 2 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/src/modules/stripe/actions/initialize-transaction.ts b/src/modules/stripe/actions/initialize-transaction.ts
index dbd8ad5..6d7818e 100644
--- a/src/modules/stripe/actions/initialize-transaction.ts
+++ b/src/modules/stripe/actions/initialize-transaction.ts
@@ -40,7 +40,17 @@ const InitializeTransactionError = BaseError.subclass(
 );
 
 const saleorDataSchema = z.object({
-  stripeClientSecret: z.string(),
+  paymentIntent: z.object({
+    stripeClientSecret: z.string().optional(),
+    errors: z
+      .array(
+        z.object({
+          code: z.string(),
+          message: z.string(),
+        }),
+      )
+      .optional(),
+  }),
 });
 
 export const initializeTransaction = actionClient
@@ -49,7 +59,11 @@ export const initializeTransaction = actionClient
       envUrl: envUrlSchema,
       checkoutId: z.string(),
       paymentGatewayId: z.string(),
-      data: z.unknown(),
+      data: z.object({
+        paymentIntent: z.object({
+          paymentMethod: z.string(),
+        }),
+      }),
       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 f9f671e..c672e43 100644
--- a/src/modules/stripe/components/stripe-checkout-form.tsx
+++ b/src/modules/stripe/components/stripe-checkout-form.tsx
@@ -53,6 +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 handleSubmit = async (event: any) => {
     if (!stripe) {
@@ -79,21 +80,49 @@ export const StripeCheckoutFormWrapped = (props: {
 
     setLoading(true);
 
-    const initializeTransactionData = await initializeTransaction({
+    if (!paymentMethod) {
+      setLoading(false);
+      toast({
+        variant: "destructive",
+        title: "Error submitting checkout form",
+        description: "No payment method selected",
+      });
+      return;
+    }
+
+    const initializeTransactionResult = await initializeTransaction({
       checkoutId: props.checkoutId,
       amount: props.saleorAmount,
       envUrl: props.envUrl,
       paymentGatewayId: props.paymentGatewayId,
       idempotencyKey: getIdempotencyKey(),
+      data: {
+        paymentIntent: {
+          paymentMethod,
+        },
+      },
     });
 
-    if (!initializeTransactionData?.data) {
+    if (!initializeTransactionResult?.data) {
       setLoading(false);
       throw new BaseError("No data returned from the server");
     }
 
+    const dataErrors =
+      initializeTransactionResult?.data.data.paymentIntent?.errors ?? [];
+
+    if (dataErrors.length > 0) {
+      setLoading(false);
+      toast({
+        variant: "destructive",
+        title: dataErrors[0]?.code,
+        description: dataErrors[0]?.message,
+      });
+      return;
+    }
+
     const stripeClientSecret =
-      initializeTransactionData?.data?.data.stripeClientSecret;
+      initializeTransactionResult?.data?.data.paymentIntent.stripeClientSecret;
 
     if (!stripeClientSecret) {
       setLoading(false);
@@ -134,7 +163,11 @@ export const StripeCheckoutFormWrapped = (props: {
 
   return (
     <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-      <PaymentElement />
+      <PaymentElement
+        onChange={(event) => {
+          setPaymentMethod(event.value.type);
+        }}
+      />
       <div className="flex justify-stretch">
         <Button
           type="submit"
@@ -184,6 +217,7 @@ export const StripeCheckoutForm = ({
         amount: stripeMoney.amount,
         currency: stripeMoney.currency,
         mode: "payment",
+        paymentMethodTypes: ["card"],
       }}
     >
       <StripeCheckoutFormWrapped

From 59b9f43d8380c903cd57df7f35ba03e1ea1c58da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?=
 <9116238+krzysztofzuraw@users.noreply.github.com>
Date: Wed, 16 Apr 2025 11:31:08 +0200
Subject: [PATCH 2/2] remove hardcoded payment method

---
 src/modules/stripe/components/stripe-checkout-form.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/modules/stripe/components/stripe-checkout-form.tsx b/src/modules/stripe/components/stripe-checkout-form.tsx
index c672e43..2f4f148 100644
--- a/src/modules/stripe/components/stripe-checkout-form.tsx
+++ b/src/modules/stripe/components/stripe-checkout-form.tsx
@@ -217,7 +217,6 @@ export const StripeCheckoutForm = ({
         amount: stripeMoney.amount,
         currency: stripeMoney.currency,
         mode: "payment",
-        paymentMethodTypes: ["card"],
       }}
     >
       <StripeCheckoutFormWrapped