@betterstore/react 0.3.76 → 0.3.78

package/CHANGELOG.md

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

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

@@ -16,11 +16,8 @@ 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;
 }
-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, }: CheckoutFormProps): 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

@@ -35293,10 +35293,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, }) {
     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,28 +35449,6 @@ 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();
-        }
-    }, [step, checkoutId, clientSecret, paymentSecret, onError]);
     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 }));
@@ -35503,7 +35480,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 +35491,6 @@ function DiscountCode({ applyDiscountCode, revalidateDiscounts, }) {
         setIsLoading(true);
         try {
             yield applyDiscountCode(discountCode);
-            // await revalidateDiscounts();
             setDiscountCode("");
             toast.success(t("CheckoutEmbed.Summary.discountCodeSuccess"));
         }
@@ -35537,7 +35513,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 +35586,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,6 +35702,7 @@ 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 [checkout, setCheckout] = React.useState(null);
@@ -35776,16 +35753,33 @@ 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();
+        }
     });
     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();
         }
         else {
             const newCheckout = yield storeClient.revalidateDiscounts(clientSecret, checkoutId);
@@ -35794,29 +35788,26 @@ 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();
         }
     });
     React.useEffect(() => {
         const interval = setTimeout(() => {
-            revalidateDiscounts();
+            if (step !== "payment") {
+                revalidateDiscounts();
+            }
         }, 1000 * 5);
         return () => clearInterval(interval);
     }, []);
     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 }))),
             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

@@ -35273,10 +35273,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, }) {
     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,28 +35429,6 @@ 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();
-        }
-    }, [step, checkoutId, clientSecret, paymentSecret, onError]);
     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 }));
@@ -35483,7 +35460,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 +35471,6 @@ function DiscountCode({ applyDiscountCode, revalidateDiscounts, }) {
         setIsLoading(true);
         try {
             yield applyDiscountCode(discountCode);
-            // await revalidateDiscounts();
             setDiscountCode("");
             toast.success(t("CheckoutEmbed.Summary.discountCodeSuccess"));
         }
@@ -35517,7 +35493,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 +35566,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,6 +35682,7 @@ 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 [checkout, setCheckout] = useState(null);
@@ -35756,16 +35733,33 @@ 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();
+        }
     });
     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();
         }
         else {
             const newCheckout = yield storeClient.revalidateDiscounts(clientSecret, checkoutId);
@@ -35774,29 +35768,26 @@ 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();
         }
     });
     useEffect(() => {
         const interval = setTimeout(() => {
-            revalidateDiscounts();
+            if (step !== "payment") {
+                revalidateDiscounts();
+            }
         }, 1000 * 5);
         return () => clearInterval(interval);
     }, []);
     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 }))),
             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.76",
+  "version": "0.3.78",
   "description": "E-commerce for Developers",
   "private": false,
   "publishConfig": {