@blocklet/payment-react 1.14.17 → 1.14.19

package/es/payment/form/index.js

@@ -176,7 +176,7 @@ export default function PaymentForm({
     }
   };
   const onUserLoggedIn = async () => {
-    const { data: profile } = await api.get("/api/customers/me");
+    const { data: profile } = await api.get("/api/customers/me?fallback=1");
     if (profile) {
       const values = getValues();
       if (!values.customer_name) {
@@ -250,7 +250,9 @@ export default function PaymentForm({
         if (result.data.stripeContext?.status === "succeeded") {
           setState({ paying: true });
         } else {
-          setState({ stripePaying: true });
+          setTimeout(() => {
+            setState({ stripePaying: true });
+          }, 200);
         }
       }
     } catch (err) {

package/es/payment/form/stripe.js

@@ -8,7 +8,7 @@ import { styled } from "@mui/system";
 import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 import { useSetState } from "ahooks";
-import { useEffect } from "react";
+import { useEffect, useCallback } from "react";
 function StripeCheckoutForm({ clientSecret, intentType, customer, mode, onConfirm }) {
   const stripe = useStripe();
   const elements = useElements();
@@ -41,42 +41,46 @@ function StripeCheckoutForm({ clientSecret, intentType, customer, mode, onConfir
       }
     });
   }, [stripe, clientSecret]);
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!stripe || !elements) {
-      return;
-    }
-    try {
-      setState({ confirming: true });
-      const method = intentType === "payment_intent" ? "confirmPayment" : "confirmSetup";
-      const { error } = await stripe[method]({
-        elements,
-        redirect: "if_required",
-        confirmParams: {
-          payment_method_data: {
-            billing_details: {
-              name: customer.name,
-              phone: customer.phone,
-              email: customer.email,
-              address: customer.address
+  const handleSubmit = useCallback(
+    async (e) => {
+      e.preventDefault();
+      if (!stripe || !elements) {
+        return;
+      }
+      try {
+        setState({ confirming: true });
+        const method = intentType === "payment_intent" ? "confirmPayment" : "confirmSetup";
+        const { error } = await stripe[method]({
+          elements,
+          redirect: "if_required",
+          confirmParams: {
+            payment_method_data: {
+              billing_details: {
+                name: customer.name,
+                phone: customer.phone,
+                email: customer.email,
+                address: customer.address
+              }
             }
           }
-        }
-      });
-      setState({ confirming: false });
-      if (error) {
-        if (error.type === "validation_error") {
+        });
+        setState({ confirming: false });
+        if (error) {
+          if (error.type === "validation_error") {
+            return;
+          }
+          setState({ message: error.message });
           return;
         }
-        setState({ message: error.message });
-        return;
+        onConfirm();
+      } catch (err) {
+        console.error(err);
+        setState({ confirming: false, message: err.message });
       }
-      onConfirm();
-    } catch (err) {
-      console.error(err);
-      setState({ confirming: false, message: err.message });
-    }
-  };
+    },
+    [customer, intentType, stripe]
+    // eslint-disable-line
+  );
   return /* @__PURE__ */ jsxs(Content, { onSubmit: handleSubmit, children: [
     /* @__PURE__ */ jsx(
       PaymentElement,

package/lib/payment/form/index.js

@@ -204,7 +204,7 @@ function PaymentForm({
   const onUserLoggedIn = async () => {
     const {
       data: profile
-    } = await _api.default.get("/api/customers/me");
+    } = await _api.default.get("/api/customers/me?fallback=1");
     if (profile) {
       const values = getValues();
       if (!values.customer_name) {
@@ -292,9 +292,11 @@ function PaymentForm({
             paying: true
           });
         } else {
-          setState({
-            stripePaying: true
-          });
+          setTimeout(() => {
+            setState({
+              stripePaying: true
+            });
+          }, 200);
         }
       }
     } catch (err) {

package/lib/payment/form/stripe.js

@@ -63,7 +63,7 @@ function StripeCheckoutForm({
       }
     });
   }, [stripe, clientSecret]);
-  const handleSubmit = async e => {
+  const handleSubmit = (0, _react.useCallback)(async e => {
     e.preventDefault();
     if (!stripe || !elements) {
       return;
@@ -109,7 +109,10 @@ function StripeCheckoutForm({
         message: err.message
       });
     }
-  };
+  }, [customer, intentType, stripe]
+  // eslint-disable-line
+  );
+
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(Content, {
     onSubmit: handleSubmit,
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactStripeJs.PaymentElement, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.14.17",
+  "version": "1.14.19",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -91,7 +91,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.14.17",
+    "@blocklet/payment-types": "1.14.19",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -120,5 +120,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "822dc883b1d44a2bc92bc0739c1d2d22899fc934"
+  "gitHead": "5410d16f8fcc5c713ca9ba986af7653e5c54e5c2"
 }

package/src/payment/form/index.tsx

@@ -238,7 +238,7 @@ export default function PaymentForm({
   };
 
   const onUserLoggedIn = async () => {
-    const { data: profile } = await api.get('/api/customers/me');
+    const { data: profile } = await api.get('/api/customers/me?fallback=1');
     if (profile) {
       const values = getValues();
       if (!values.customer_name) {
@@ -315,7 +315,9 @@ export default function PaymentForm({
         if (result.data.stripeContext?.status === 'succeeded') {
           setState({ paying: true });
         } else {
-          setState({ stripePaying: true });
+          setTimeout(() => {
+            setState({ stripePaying: true });
+          }, 200);
         }
       }
     } catch (err: any) {

package/src/payment/form/stripe.tsx

@@ -8,7 +8,7 @@ import { styled } from '@mui/system';
 import { Elements, PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
 import { useSetState } from 'ahooks';
-import { useEffect } from 'react';
+import { useEffect, useCallback } from 'react';
 
 type StripeCheckoutFormProps = {
   clientSecret: string;
@@ -57,47 +57,50 @@ function StripeCheckoutForm({ clientSecret, intentType, customer, mode, onConfir
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [stripe, clientSecret]);
 
-  const handleSubmit = async (e: any) => {
-    e.preventDefault();
+  const handleSubmit = useCallback(
+    async (e: any) => {
+      e.preventDefault();
 
-    if (!stripe || !elements) {
-      return;
-    }
+      if (!stripe || !elements) {
+        return;
+      }
 
-    try {
-      setState({ confirming: true });
-      const method = intentType === 'payment_intent' ? 'confirmPayment' : 'confirmSetup';
-      const { error } = await stripe[method]({
-        elements,
-        redirect: 'if_required',
-        confirmParams: {
-          payment_method_data: {
-            billing_details: {
-              name: customer.name,
-              phone: customer.phone,
-              email: customer.email,
-              address: customer.address,
+      try {
+        setState({ confirming: true });
+        const method = intentType === 'payment_intent' ? 'confirmPayment' : 'confirmSetup';
+        const { error } = await stripe[method]({
+          elements,
+          redirect: 'if_required',
+          confirmParams: {
+            payment_method_data: {
+              billing_details: {
+                name: customer.name,
+                phone: customer.phone,
+                email: customer.email,
+                address: customer.address,
+              },
             },
           },
-        },
-      });
+        });
+
+        setState({ confirming: false });
+        if (error) {
+          if (error.type === 'validation_error') {
+            return;
+          }
 
-      setState({ confirming: false });
-      if (error) {
-        if (error.type === 'validation_error') {
+          setState({ message: error.message as string });
           return;
         }
 
-        setState({ message: error.message as string });
-        return;
+        onConfirm();
+      } catch (err: any) {
+        console.error(err);
+        setState({ confirming: false, message: err.message as string });
       }
-
-      onConfirm();
-    } catch (err: any) {
-      console.error(err);
-      setState({ confirming: false, message: err.message as string });
-    }
-  };
+    },
+    [customer, intentType, stripe] // eslint-disable-line
+  );
 
   return (
     <Content onSubmit={handleSubmit}>