@betterstore/react 0.3.77 → 0.3.79

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @betterstore/sdk
 
+## 0.3.79
+
+### Patch Changes
+
+- bug fixes
+
+## 0.3.78
+
+### Patch Changes
+
+- bug fixes payment
+
 ## 0.3.77
 
 ### Patch Changes

package/dist/components/checkout-embed/checkout-form.d.ts

@@ -16,11 +16,9 @@ interface CheckoutFormProps {
     locale?: StripeElementLocale;
     setShippingCost: (cost: number) => void;
     exchangeRate: number;
-    setCheckout: (checkout: any) => void;
-    setPaymentSecret: (paymentSecret: string) => void;
-    setPublicKey: (publicKey: string) => void;
     paymentSecret: string | null;
     publicKey: string | null;
+    paymentComponentKey: number;
 }
-export default function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, setCheckout, setPaymentSecret, setPublicKey, paymentSecret, publicKey, }: CheckoutFormProps): React.JSX.Element;
+export default function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, paymentSecret, publicKey, paymentComponentKey, }: CheckoutFormProps): React.JSX.Element;
 export {};

package/dist/components/checkout-embed/steps/payment/form.d.ts

@@ -15,6 +15,7 @@ interface PaymentFormProps {
     fonts?: Fonts;
     locale?: StripeElementLocale;
     publicKey: string | null;
+    paymentComponentKey: number;
 }
-export default function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, }: PaymentFormProps): React.JSX.Element;
+export default function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, paymentComponentKey, }: PaymentFormProps): React.JSX.Element;
 export {};

package/dist/components/checkout-embed/steps/summary/discount-code.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-export default function DiscountCode({ applyDiscountCode, revalidateDiscounts, }: {
+export default function DiscountCode({ applyDiscountCode, }: {
     applyDiscountCode: (code: string) => Promise<void>;
-    revalidateDiscounts: () => Promise<void>;
 }): React.JSX.Element;

package/dist/components/checkout-embed/steps/summary/index.d.ts

@@ -1,6 +1,6 @@
 import { CheckoutSession, LineItem } from "@betterstore/sdk";
 import React from "react";
-export default function CheckoutSummary({ appliedDiscounts, lineItems, shipping, tax, currency, onCancel, exchangeRate, applyDiscountCode, revalidateDiscounts, removeDiscount, }: {
+export default function CheckoutSummary({ appliedDiscounts, lineItems, shipping, tax, currency, onCancel, exchangeRate, applyDiscountCode, removeDiscount, }: {
     appliedDiscounts: CheckoutSession["appliedDiscounts"];
     lineItems: LineItem[];
     shipping?: number | null;
@@ -9,6 +9,5 @@ export default function CheckoutSummary({ appliedDiscounts, lineItems, shipping,
     exchangeRate: number;
     onCancel: () => void;
     applyDiscountCode: (code: string) => Promise<void>;
-    revalidateDiscounts: () => Promise<void>;
     removeDiscount: (id: string) => Promise<void>;
 }): React.JSX.Element;

package/dist/index.cjs.js

@@ -35081,15 +35081,9 @@ function PaymentElement({ paymentSecret, publicKey, checkoutAppearance, locale,
 }
 var PaymentElement$1 = React.memo(PaymentElement);
 
-function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, }) {
+function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, paymentComponentKey, }) {
     const [isSubmitting, setIsSubmitting] = React.useState(false);
-    const [key, setKey] = React.useState(0);
     const { t } = useTranslation();
-    React.useEffect(() => {
-        if (paymentSecret) {
-            setKey((prev) => prev + 1);
-        }
-    }, [paymentSecret]);
     return (React.createElement("div", { className: "space-y-6" },
         React.createElement("div", null,
             React.createElement("h2", { className: "mb-2" }, t("CheckoutEmbed.Payment.title")),
@@ -35116,7 +35110,7 @@ function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack,
                         " \u00B7 ",
                         shippingPrice)),
                 React.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
-        React.createElement("div", { className: "mt-8" }, paymentSecret && (React.createElement(PaymentElement$1, { key: key, fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting, publicKey: publicKey },
+        React.createElement("div", { className: "mt-8" }, paymentSecret && (React.createElement(PaymentElement$1, { key: paymentComponentKey, fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting, publicKey: publicKey },
             React.createElement("div", { className: "flex justify-between items-center pt-8" },
                 React.createElement(Button, { type: "button", variant: "ghost", onClick: onBack },
                     React.createElement(ChevronLeft, null),
@@ -35293,10 +35287,9 @@ const resetFormStore = (formData) => {
     localStorage.setItem("checkout", JSON.stringify(Object.assign(Object.assign({}, currentState), { state: Object.assign(Object.assign({}, currentState.state), { step: "customer", formData: { customer: formData.customer } }) })));
 };
 
-function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, setCheckout, setPaymentSecret, setPublicKey, paymentSecret, publicKey, }) {
+function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, paymentSecret, publicKey, paymentComponentKey, }) {
     const { formData, setFormData, step, setStep, checkoutId: storedCheckoutId, setCheckoutId, } = useFormStore();
     const [shippingRates, setShippingRates] = React.useState([]);
-    const paymentSecretPromiseRef = React.useRef(null);
     const validateStep = React.useCallback(() => {
         if (step === "customer")
             return;
@@ -35450,31 +35443,9 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
     const handleDoubleBack = () => {
         setStep("customer");
     };
-    React.useEffect(() => {
-        const generatePaymentSecret = () => __awaiter(this, void 0, void 0, function* () {
-            try {
-                const { paymentSecret, publicKey, checkoutSession: newCheckout, } = yield storeClient.generateCheckoutPaymentSecret(clientSecret, checkoutId);
-                setPaymentSecret(paymentSecret);
-                setPublicKey(publicKey);
-                setCheckout(newCheckout);
-            }
-            catch (error) {
-                console.error("Failed to generate payment secret:", error);
-                onError();
-            }
-            finally {
-                paymentSecretPromiseRef.current = null;
-            }
-        });
-        if (step === "payment" &&
-            !paymentSecret &&
-            !paymentSecretPromiseRef.current) {
-            paymentSecretPromiseRef.current = generatePaymentSecret();
-        }
-    }, [paymentSecret]);
     const renderStep = () => {
         if (step === "payment" && formData.customer && formData.shipping) {
-            return (React.createElement(PaymentForm, { locale: locale, fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), shippingName: formData.shipping.name, shippingPrice: storeHelpers.formatPrice(formData.shipping.price, currency, exchangeRate), publicKey: publicKey }));
+            return (React.createElement(PaymentForm, { paymentComponentKey: paymentComponentKey, locale: locale, fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), shippingName: formData.shipping.name, shippingPrice: storeHelpers.formatPrice(formData.shipping.price, currency, exchangeRate), publicKey: publicKey }));
         }
         if (step === "shipping" && formData.customer) {
             return (React.createElement(ShippingMethodForm, { setFormData: setFormData, formData: formData, shippingRates: shippingRates, initialData: formData.shipping, onSubmit: handleShippingSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), currency: currency, exchangeRate: exchangeRate, locale: locale, countryCode: formData.customer.address.countryCode }));
@@ -35503,7 +35474,7 @@ function InputGroupLoading({ className }) {
         React.createElement(Skeleton, { className: "w-full h-10" })));
 }
 
-function DiscountCode({ applyDiscountCode, revalidateDiscounts, }) {
+function DiscountCode({ applyDiscountCode, }) {
     const { t } = useTranslation();
     const [discountCode, setDiscountCode] = React.useState("");
     const [isLoading, setIsLoading] = React.useState(false);
@@ -35514,7 +35485,6 @@ function DiscountCode({ applyDiscountCode, revalidateDiscounts, }) {
         setIsLoading(true);
         try {
             yield applyDiscountCode(discountCode);
-            // await revalidateDiscounts();
             setDiscountCode("");
             toast.success(t("CheckoutEmbed.Summary.discountCodeSuccess"));
         }
@@ -35537,7 +35507,7 @@ function DiscountCode({ applyDiscountCode, revalidateDiscounts, }) {
         error && React.createElement("p", { className: "text-red-500 mt-2 text-sm" }, error)));
 }
 
-function CheckoutSummary({ appliedDiscounts, lineItems, shipping, tax, currency, onCancel, exchangeRate, applyDiscountCode, revalidateDiscounts, removeDiscount, }) {
+function CheckoutSummary({ appliedDiscounts, lineItems, shipping, tax, currency, onCancel, exchangeRate, applyDiscountCode, removeDiscount, }) {
     var _a, _b;
     const { formData } = useFormStore();
     const [isOpen, setIsOpen] = React.useState(false);
@@ -35610,7 +35580,7 @@ function CheckoutSummary({ appliedDiscounts, lineItems, shipping, tax, currency,
                     "hidden md:grid": !isOpen,
                     grid: isOpen,
                 }) },
-                React.createElement(DiscountCode, { applyDiscountCode: applyDiscountCode, revalidateDiscounts: revalidateDiscounts })))),
+                React.createElement(DiscountCode, { applyDiscountCode: applyDiscountCode })))),
         React.createElement("hr", { className: clsx("order-5 md:order-none", {
                 "hidden md:block": !isOpen,
                 block: isOpen,
@@ -35726,8 +35696,10 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
     const iframeRef = React.useRef(null);
     React.useMemo(() => createI18nInstance(locale), []);
     const { formData, step } = useFormStore();
+    const paymentSecretPromiseRef = React.useRef(null);
     const [paymentSecret, setPaymentSecret] = React.useState(null);
     const [publicKey, setPublicKey] = React.useState(null);
+    const [paymentComponentKey, setPaymentComponentKey] = React.useState(0);
     const [checkout, setCheckout] = React.useState(null);
     const [loading, setLoading] = React.useState(true);
     React.useEffect(() => {
@@ -35776,16 +35748,35 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
             return;
         setCheckout(Object.assign(Object.assign({}, checkout), { shipping: cost }));
     };
+    function generatePaymentSecret() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { paymentSecret, publicKey, checkoutSession } = yield storeClient.generateCheckoutPaymentSecret(clientSecret, checkoutId);
+            setPaymentSecret(paymentSecret);
+            setPublicKey(publicKey);
+            setCheckout(checkoutSession);
+        });
+    }
+    React.useEffect(() => {
+        if (step === "payment" &&
+            !paymentSecret &&
+            !paymentSecretPromiseRef.current) {
+            paymentSecretPromiseRef.current = generatePaymentSecret().finally(() => {
+                paymentSecretPromiseRef.current = null;
+            });
+        }
+    }, [paymentSecret, step]);
     const applyDiscountCode = (code) => __awaiter(this, void 0, void 0, function* () {
         const newCheckout = yield storeClient.applyDiscountCode(clientSecret, checkoutId, code);
         setCheckout(newCheckout);
+        if (step === "payment") {
+            yield generatePaymentSecret();
+            setPaymentComponentKey((prev) => prev + 1);
+        }
     });
     const revalidateDiscounts = () => __awaiter(this, void 0, void 0, function* () {
         if (step === "payment") {
-            const { paymentSecret, publicKey, checkoutSession } = yield storeClient.generateCheckoutPaymentSecret(clientSecret, checkoutId);
-            setPaymentSecret(paymentSecret);
-            setPublicKey(publicKey);
-            setCheckout(checkoutSession);
+            yield generatePaymentSecret();
+            setPaymentComponentKey((prev) => prev + 1);
         }
         else {
             const newCheckout = yield storeClient.revalidateDiscounts(clientSecret, checkoutId);
@@ -35794,14 +35785,10 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
     });
     const removeDiscount = (id) => __awaiter(this, void 0, void 0, function* () {
         const newCheckout = yield storeClient.removeDiscount(clientSecret, checkoutId, id);
+        setCheckout(newCheckout);
         if (step === "payment") {
-            const { paymentSecret, publicKey, checkoutSession } = yield storeClient.generateCheckoutPaymentSecret(clientSecret, checkoutId);
-            setPaymentSecret(paymentSecret);
-            setPublicKey(publicKey);
-            setCheckout(checkoutSession);
-        }
-        else {
-            setCheckout(newCheckout);
+            yield generatePaymentSecret();
+            setPaymentComponentKey((prev) => prev + 1);
         }
     });
     React.useEffect(() => {
@@ -35815,10 +35802,10 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
     return (React.createElement(IframeWrapper, { iframeRef: iframeRef },
         React.createElement("div", { className: "checkout-embed h-max gap-6 md:gap-0 py-4 md:py-12 flex flex-col md:grid md:grid-cols-7 " },
             React.createElement(Appearance, { appearance: appearance, fonts: config.fonts, iframeRef: iframeRef }),
-            React.createElement("div", { className: "md:col-span-4 px-4 h-max md:px-8" }, loading ? (React.createElement(CheckoutFormLoading, null)) : (React.createElement(CheckoutForm, { locale: locale, setShippingCost: setShippingCost, storeClient: storeClient, fonts: config.fonts, checkoutAppearance: appearance, currency: (_a = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _a !== void 0 ? _a : "", customer: checkout === null || checkout === void 0 ? void 0 : checkout.customer, cancelUrl: cancelUrl, checkoutId: checkoutId, clientSecret: clientSecret, onSuccess: onSuccess, onError: onError, exchangeRate: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _b !== void 0 ? _b : 1, setCheckout: setCheckout, setPublicKey: setPublicKey, publicKey: publicKey, setPaymentSecret: setPaymentSecret, paymentSecret: paymentSecret }))),
+            React.createElement("div", { className: "md:col-span-4 px-4 h-max md:px-8" }, loading ? (React.createElement(CheckoutFormLoading, null)) : (React.createElement(CheckoutForm, { locale: locale, setShippingCost: setShippingCost, storeClient: storeClient, fonts: config.fonts, checkoutAppearance: appearance, currency: (_a = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _a !== void 0 ? _a : "", customer: checkout === null || checkout === void 0 ? void 0 : checkout.customer, cancelUrl: cancelUrl, checkoutId: checkoutId, clientSecret: clientSecret, onSuccess: onSuccess, onError: onError, exchangeRate: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _b !== void 0 ? _b : 1, publicKey: publicKey, paymentSecret: paymentSecret, paymentComponentKey: paymentComponentKey }))),
             React.createElement("div", { className: "md:col-span-3 px-4 md:px-8 h-max order-first md:order-last" },
                 React.createElement(Toaster, null),
-                loading ? (React.createElement(CheckoutSummaryLoading, null)) : (React.createElement(CheckoutSummary, { currency: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _c !== void 0 ? _c : "", lineItems: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _d !== void 0 ? _d : [], shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, onCancel: onCancel, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1, applyDiscountCode: applyDiscountCode, appliedDiscounts: (_f = checkout === null || checkout === void 0 ? void 0 : checkout.appliedDiscounts) !== null && _f !== void 0 ? _f : [], revalidateDiscounts: revalidateDiscounts, removeDiscount: removeDiscount }))))));
+                loading ? (React.createElement(CheckoutSummaryLoading, null)) : (React.createElement(CheckoutSummary, { currency: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _c !== void 0 ? _c : "", lineItems: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _d !== void 0 ? _d : [], shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, onCancel: onCancel, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1, applyDiscountCode: applyDiscountCode, appliedDiscounts: (_f = checkout === null || checkout === void 0 ? void 0 : checkout.appliedDiscounts) !== null && _f !== void 0 ? _f : [], removeDiscount: removeDiscount }))))));
 }
 const CheckoutEmbed = React.memo(CheckoutEmbedComponent);
 

package/dist/index.mjs

@@ -35061,15 +35061,9 @@ function PaymentElement({ paymentSecret, publicKey, checkoutAppearance, locale,
 }
 var PaymentElement$1 = memo(PaymentElement);
 
-function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, }) {
+function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, paymentComponentKey, }) {
     const [isSubmitting, setIsSubmitting] = useState(false);
-    const [key, setKey] = useState(0);
     const { t } = useTranslation();
-    useEffect(() => {
-        if (paymentSecret) {
-            setKey((prev) => prev + 1);
-        }
-    }, [paymentSecret]);
     return (React__default.createElement("div", { className: "space-y-6" },
         React__default.createElement("div", null,
             React__default.createElement("h2", { className: "mb-2" }, t("CheckoutEmbed.Payment.title")),
@@ -35096,7 +35090,7 @@ function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack,
                         " \u00B7 ",
                         shippingPrice)),
                 React__default.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
-        React__default.createElement("div", { className: "mt-8" }, paymentSecret && (React__default.createElement(PaymentElement$1, { key: key, fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting, publicKey: publicKey },
+        React__default.createElement("div", { className: "mt-8" }, paymentSecret && (React__default.createElement(PaymentElement$1, { key: paymentComponentKey, fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting, publicKey: publicKey },
             React__default.createElement("div", { className: "flex justify-between items-center pt-8" },
                 React__default.createElement(Button, { type: "button", variant: "ghost", onClick: onBack },
                     React__default.createElement(ChevronLeft, null),
@@ -35273,10 +35267,9 @@ const resetFormStore = (formData) => {
     localStorage.setItem("checkout", JSON.stringify(Object.assign(Object.assign({}, currentState), { state: Object.assign(Object.assign({}, currentState.state), { step: "customer", formData: { customer: formData.customer } }) })));
 };
 
-function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, setCheckout, setPaymentSecret, setPublicKey, paymentSecret, publicKey, }) {
+function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, paymentSecret, publicKey, paymentComponentKey, }) {
     const { formData, setFormData, step, setStep, checkoutId: storedCheckoutId, setCheckoutId, } = useFormStore();
     const [shippingRates, setShippingRates] = useState([]);
-    const paymentSecretPromiseRef = useRef(null);
     const validateStep = useCallback(() => {
         if (step === "customer")
             return;
@@ -35430,31 +35423,9 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
     const handleDoubleBack = () => {
         setStep("customer");
     };
-    useEffect(() => {
-        const generatePaymentSecret = () => __awaiter(this, void 0, void 0, function* () {
-            try {
-                const { paymentSecret, publicKey, checkoutSession: newCheckout, } = yield storeClient.generateCheckoutPaymentSecret(clientSecret, checkoutId);
-                setPaymentSecret(paymentSecret);
-                setPublicKey(publicKey);
-                setCheckout(newCheckout);
-            }
-            catch (error) {
-                console.error("Failed to generate payment secret:", error);
-                onError();
-            }
-            finally {
-                paymentSecretPromiseRef.current = null;
-            }
-        });
-        if (step === "payment" &&
-            !paymentSecret &&
-            !paymentSecretPromiseRef.current) {
-            paymentSecretPromiseRef.current = generatePaymentSecret();
-        }
-    }, [paymentSecret]);
     const renderStep = () => {
         if (step === "payment" && formData.customer && formData.shipping) {
-            return (React__default.createElement(PaymentForm, { locale: locale, fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), shippingName: formData.shipping.name, shippingPrice: storeHelpers.formatPrice(formData.shipping.price, currency, exchangeRate), publicKey: publicKey }));
+            return (React__default.createElement(PaymentForm, { paymentComponentKey: paymentComponentKey, locale: locale, fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), shippingName: formData.shipping.name, shippingPrice: storeHelpers.formatPrice(formData.shipping.price, currency, exchangeRate), publicKey: publicKey }));
         }
         if (step === "shipping" && formData.customer) {
             return (React__default.createElement(ShippingMethodForm, { setFormData: setFormData, formData: formData, shippingRates: shippingRates, initialData: formData.shipping, onSubmit: handleShippingSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), currency: currency, exchangeRate: exchangeRate, locale: locale, countryCode: formData.customer.address.countryCode }));
@@ -35483,7 +35454,7 @@ function InputGroupLoading({ className }) {
         React__default.createElement(Skeleton, { className: "w-full h-10" })));
 }
 
-function DiscountCode({ applyDiscountCode, revalidateDiscounts, }) {
+function DiscountCode({ applyDiscountCode, }) {
     const { t } = useTranslation();
     const [discountCode, setDiscountCode] = useState("");
     const [isLoading, setIsLoading] = useState(false);
@@ -35494,7 +35465,6 @@ function DiscountCode({ applyDiscountCode, revalidateDiscounts, }) {
         setIsLoading(true);
         try {
             yield applyDiscountCode(discountCode);
-            // await revalidateDiscounts();
             setDiscountCode("");
             toast.success(t("CheckoutEmbed.Summary.discountCodeSuccess"));
         }
@@ -35517,7 +35487,7 @@ function DiscountCode({ applyDiscountCode, revalidateDiscounts, }) {
         error && React__default.createElement("p", { className: "text-red-500 mt-2 text-sm" }, error)));
 }
 
-function CheckoutSummary({ appliedDiscounts, lineItems, shipping, tax, currency, onCancel, exchangeRate, applyDiscountCode, revalidateDiscounts, removeDiscount, }) {
+function CheckoutSummary({ appliedDiscounts, lineItems, shipping, tax, currency, onCancel, exchangeRate, applyDiscountCode, removeDiscount, }) {
     var _a, _b;
     const { formData } = useFormStore();
     const [isOpen, setIsOpen] = useState(false);
@@ -35590,7 +35560,7 @@ function CheckoutSummary({ appliedDiscounts, lineItems, shipping, tax, currency,
                     "hidden md:grid": !isOpen,
                     grid: isOpen,
                 }) },
-                React__default.createElement(DiscountCode, { applyDiscountCode: applyDiscountCode, revalidateDiscounts: revalidateDiscounts })))),
+                React__default.createElement(DiscountCode, { applyDiscountCode: applyDiscountCode })))),
         React__default.createElement("hr", { className: clsx("order-5 md:order-none", {
                 "hidden md:block": !isOpen,
                 block: isOpen,
@@ -35706,8 +35676,10 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
     const iframeRef = React__default.useRef(null);
     React__default.useMemo(() => createI18nInstance(locale), []);
     const { formData, step } = useFormStore();
+    const paymentSecretPromiseRef = useRef(null);
     const [paymentSecret, setPaymentSecret] = useState(null);
     const [publicKey, setPublicKey] = useState(null);
+    const [paymentComponentKey, setPaymentComponentKey] = useState(0);
     const [checkout, setCheckout] = useState(null);
     const [loading, setLoading] = useState(true);
     useEffect(() => {
@@ -35756,16 +35728,35 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
             return;
         setCheckout(Object.assign(Object.assign({}, checkout), { shipping: cost }));
     };
+    function generatePaymentSecret() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { paymentSecret, publicKey, checkoutSession } = yield storeClient.generateCheckoutPaymentSecret(clientSecret, checkoutId);
+            setPaymentSecret(paymentSecret);
+            setPublicKey(publicKey);
+            setCheckout(checkoutSession);
+        });
+    }
+    useEffect(() => {
+        if (step === "payment" &&
+            !paymentSecret &&
+            !paymentSecretPromiseRef.current) {
+            paymentSecretPromiseRef.current = generatePaymentSecret().finally(() => {
+                paymentSecretPromiseRef.current = null;
+            });
+        }
+    }, [paymentSecret, step]);
     const applyDiscountCode = (code) => __awaiter(this, void 0, void 0, function* () {
         const newCheckout = yield storeClient.applyDiscountCode(clientSecret, checkoutId, code);
         setCheckout(newCheckout);
+        if (step === "payment") {
+            yield generatePaymentSecret();
+            setPaymentComponentKey((prev) => prev + 1);
+        }
     });
     const revalidateDiscounts = () => __awaiter(this, void 0, void 0, function* () {
         if (step === "payment") {
-            const { paymentSecret, publicKey, checkoutSession } = yield storeClient.generateCheckoutPaymentSecret(clientSecret, checkoutId);
-            setPaymentSecret(paymentSecret);
-            setPublicKey(publicKey);
-            setCheckout(checkoutSession);
+            yield generatePaymentSecret();
+            setPaymentComponentKey((prev) => prev + 1);
         }
         else {
             const newCheckout = yield storeClient.revalidateDiscounts(clientSecret, checkoutId);
@@ -35774,14 +35765,10 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
     });
     const removeDiscount = (id) => __awaiter(this, void 0, void 0, function* () {
         const newCheckout = yield storeClient.removeDiscount(clientSecret, checkoutId, id);
+        setCheckout(newCheckout);
         if (step === "payment") {
-            const { paymentSecret, publicKey, checkoutSession } = yield storeClient.generateCheckoutPaymentSecret(clientSecret, checkoutId);
-            setPaymentSecret(paymentSecret);
-            setPublicKey(publicKey);
-            setCheckout(checkoutSession);
-        }
-        else {
-            setCheckout(newCheckout);
+            yield generatePaymentSecret();
+            setPaymentComponentKey((prev) => prev + 1);
         }
     });
     useEffect(() => {
@@ -35795,10 +35782,10 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
     return (React__default.createElement(IframeWrapper, { iframeRef: iframeRef },
         React__default.createElement("div", { className: "checkout-embed h-max gap-6 md:gap-0 py-4 md:py-12 flex flex-col md:grid md:grid-cols-7 " },
             React__default.createElement(Appearance, { appearance: appearance, fonts: config.fonts, iframeRef: iframeRef }),
-            React__default.createElement("div", { className: "md:col-span-4 px-4 h-max md:px-8" }, loading ? (React__default.createElement(CheckoutFormLoading, null)) : (React__default.createElement(CheckoutForm, { locale: locale, setShippingCost: setShippingCost, storeClient: storeClient, fonts: config.fonts, checkoutAppearance: appearance, currency: (_a = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _a !== void 0 ? _a : "", customer: checkout === null || checkout === void 0 ? void 0 : checkout.customer, cancelUrl: cancelUrl, checkoutId: checkoutId, clientSecret: clientSecret, onSuccess: onSuccess, onError: onError, exchangeRate: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _b !== void 0 ? _b : 1, setCheckout: setCheckout, setPublicKey: setPublicKey, publicKey: publicKey, setPaymentSecret: setPaymentSecret, paymentSecret: paymentSecret }))),
+            React__default.createElement("div", { className: "md:col-span-4 px-4 h-max md:px-8" }, loading ? (React__default.createElement(CheckoutFormLoading, null)) : (React__default.createElement(CheckoutForm, { locale: locale, setShippingCost: setShippingCost, storeClient: storeClient, fonts: config.fonts, checkoutAppearance: appearance, currency: (_a = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _a !== void 0 ? _a : "", customer: checkout === null || checkout === void 0 ? void 0 : checkout.customer, cancelUrl: cancelUrl, checkoutId: checkoutId, clientSecret: clientSecret, onSuccess: onSuccess, onError: onError, exchangeRate: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _b !== void 0 ? _b : 1, publicKey: publicKey, paymentSecret: paymentSecret, paymentComponentKey: paymentComponentKey }))),
             React__default.createElement("div", { className: "md:col-span-3 px-4 md:px-8 h-max order-first md:order-last" },
                 React__default.createElement(Toaster, null),
-                loading ? (React__default.createElement(CheckoutSummaryLoading, null)) : (React__default.createElement(CheckoutSummary, { currency: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _c !== void 0 ? _c : "", lineItems: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _d !== void 0 ? _d : [], shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, onCancel: onCancel, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1, applyDiscountCode: applyDiscountCode, appliedDiscounts: (_f = checkout === null || checkout === void 0 ? void 0 : checkout.appliedDiscounts) !== null && _f !== void 0 ? _f : [], revalidateDiscounts: revalidateDiscounts, removeDiscount: removeDiscount }))))));
+                loading ? (React__default.createElement(CheckoutSummaryLoading, null)) : (React__default.createElement(CheckoutSummary, { currency: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _c !== void 0 ? _c : "", lineItems: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _d !== void 0 ? _d : [], shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, onCancel: onCancel, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1, applyDiscountCode: applyDiscountCode, appliedDiscounts: (_f = checkout === null || checkout === void 0 ? void 0 : checkout.appliedDiscounts) !== null && _f !== void 0 ? _f : [], removeDiscount: removeDiscount }))))));
 }
 const CheckoutEmbed = memo(CheckoutEmbedComponent);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@betterstore/react",
-  "version": "0.3.77",
+  "version": "0.3.79",
   "description": "E-commerce for Developers",
   "private": false,
   "publishConfig": {