@betterstore/react 0.2.14 → 0.2.16

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @betterstore/sdk
 
+## 0.2.16
+
+### Patch Changes
+
+- better currency formatting
+
+## 0.2.15
+
+### Patch Changes
+
+- fonts config added to stripe
+
 ## 0.2.14
 
 ### Patch Changes

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

@@ -1,4 +1,5 @@
 import { CheckoutSession } from "@betterstore/sdk";
+import { StripeElementsOptions } from "@stripe/stripe-js";
 import React from "react";
 import { AppearanceConfig } from "./appearance";
 interface CheckoutFormProps {
@@ -10,6 +11,7 @@ interface CheckoutFormProps {
     customer?: CheckoutSession["customer"];
     currency: string;
     checkoutAppearance?: AppearanceConfig;
+    fonts?: StripeElementsOptions["fonts"];
 }
-export default function CheckoutForm({ checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, }: CheckoutFormProps): React.JSX.Element;
+export default function CheckoutForm({ checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, }: CheckoutFormProps): React.JSX.Element;
 export {};

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

@@ -1,4 +1,5 @@
 import { Locale } from "@/i18n";
+import { StripeElementsOptions } from "@stripe/stripe-js";
 import React from "react";
 import { AppearanceConfig } from "./appearance";
 interface CheckoutEmbedProps {
@@ -8,6 +9,7 @@ interface CheckoutEmbedProps {
         cancelUrl: string;
         successUrl: string;
         appearance?: AppearanceConfig;
+        fonts?: StripeElementsOptions["fonts"];
         locale?: Locale;
     };
 }

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

@@ -1,3 +1,4 @@
+import { StripeElementsOptions } from "@stripe/stripe-js";
 import React from "react";
 import { AppearanceConfig } from "../../appearance";
 interface PaymentFormProps {
@@ -11,6 +12,7 @@ interface PaymentFormProps {
     shippingProvider: string;
     shippingPrice: string;
     checkoutAppearance?: AppearanceConfig;
+    fonts?: StripeElementsOptions["fonts"];
 }
-export default function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, }: PaymentFormProps): React.JSX.Element;
+export default function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, }: PaymentFormProps): React.JSX.Element;
 export {};

package/dist/components/payment-element/index.d.ts

@@ -1,8 +1,9 @@
-import { Appearance } from "@stripe/stripe-js";
+import { Appearance, StripeElementsOptions } from "@stripe/stripe-js";
 import React from "react";
-declare function PaymentElement({ paymentSecret, checkoutAppearance, onSuccess, onError, children, }: {
+declare function PaymentElement({ paymentSecret, checkoutAppearance, fonts, onSuccess, onError, children, }: {
     paymentSecret: string;
     checkoutAppearance?: Appearance;
+    fonts?: StripeElementsOptions["fonts"];
     onSuccess?: () => void;
     onError?: () => void;
     children: React.ReactNode;

package/dist/index.cjs.js

@@ -20772,11 +20772,44 @@ var Client = class {
   }
 };
 var client_default = Client;
+var Helpers = class {
+  constructor(proxy) {
+    this.proxy = proxy;
+  }
+  formatPrice(priceInCents, currency, exchangeRate) {
+    const amount = priceInCents / 100 * (exchangeRate != null ? exchangeRate : 1);
+    const isWhole = amount % 1 === 0;
+    const formattedPrice = new Intl.NumberFormat(void 0, {
+      style: "currency",
+      currency,
+      minimumFractionDigits: isWhole ? 0 : 2,
+      maximumFractionDigits: isWhole ? 0 : 2
+    }).format(amount);
+    return formattedPrice;
+  }
+  getExchangeRate(baseCurrency, targetCurrency) {
+    return __async(this, null, function* () {
+      const { data } = yield axios.get(
+        `https://api.exchangerate-api.com/v4/latest/${baseCurrency}`
+      );
+      const rate = data.rates[targetCurrency];
+      if (!rate) {
+        throw new Error("Could not get exchange rate for target currency");
+      }
+      return rate;
+    });
+  }
+};
+var helpers_default = Helpers;
 function createStoreClient(config) {
-  return new client_default(config.proxy);
+  return new client_default(config == null ? void 0 : config.proxy);
+}
+function createStoreHelpers(config) {
+  return new helpers_default(void 0 );
 }
 
 const storeClient = createStoreClient({ proxy: "/api/betterstore" });
+const storeHelpers = createStoreHelpers();
 
 function Appearance({ appearance, }) {
     React.useEffect(() => {
@@ -31660,18 +31693,19 @@ var CheckoutForm$2 = React.memo(CheckoutForm$1);
 
 const publicStripeKey = "pk_test_51OjSZ2JoDmiuDQz4Vub296KIgTCy4y8NJos59h93bq3sLe3veuXnV9XVmvvWDFlt3aEWHY4pOuIXyahEjjKZwezn00qo4U5fQS";
 const stripePromise = stripeJs.loadStripe(publicStripeKey);
-function PaymentElement({ paymentSecret, checkoutAppearance, onSuccess, onError, children, }) {
+function PaymentElement({ paymentSecret, checkoutAppearance, fonts, onSuccess, onError, children, }) {
     const options = {
         locale: "en",
         appearance: checkoutAppearance,
         clientSecret: paymentSecret,
+        fonts: fonts,
     };
     return (React.createElement(reactStripeJs.Elements, { stripe: stripePromise, options: options },
         React.createElement(CheckoutForm$2, { onSuccess: onSuccess, onError: onError, children: children })));
 }
 var PaymentElement$1 = React.memo(PaymentElement);
 
-function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, }) {
+function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, }) {
     const { t } = reactI18next.useTranslation();
     return (React.createElement("div", { className: "space-y-6" },
         React.createElement("div", null,
@@ -31699,7 +31733,7 @@ function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack,
                         " \u00B7 ",
                         shippingPrice)),
                 React.createElement(Button, { variant: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
-        React.createElement("div", { className: "mt-8" }, paymentSecret && (React.createElement(PaymentElement$1, { checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance), paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError },
+        React.createElement("div", { className: "mt-8" }, paymentSecret && (React.createElement(PaymentElement$1, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance), paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError },
             React.createElement("div", { className: "flex justify-between items-center pt-8" },
                 React.createElement(Button, { type: "button", variant: "ghost", onClick: onBack },
                     React.createElement(lucideReact.ChevronLeft, null),
@@ -31796,7 +31830,7 @@ const motionSettings = {
     exit: { opacity: 0 },
     transition: { duration: 0.2 },
 };
-function CheckoutForm({ checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, }) {
+function CheckoutForm({ checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, }) {
     const { formData, setFormData, step, setStep } = useFormStore(checkoutId)();
     const [paymentSecret, setPaymentSecret] = React.useState(null);
     const [shippingRates, setShippingRates] = React.useState([]);
@@ -31923,7 +31957,7 @@ function CheckoutForm({ checkoutId, onSuccess, onError, cancelUrl, clientSecret,
             step === "shipping" && formData.customer && (React.createElement(motion.div, Object.assign({ key: "shipping" }, motionSettings, { className: "absolute w-full" }),
                 React.createElement(ShippingMethodForm, { shippingRates: shippingRates, initialData: formData.shipping, onSubmit: handleShippingSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address) }))),
             step === "payment" && formData.customer && formData.shipping && (React.createElement(motion.div, Object.assign({ key: "payment" }, motionSettings, { className: "absolute w-full" }),
-                React.createElement(PaymentForm, { checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), shippingProvider: formData.shipping.provider, shippingPrice: formData.shipping.amount.toString() + " " + currency }))))));
+                React.createElement(PaymentForm, { fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), shippingProvider: formData.shipping.provider, shippingPrice: formData.shipping.amount.toString() + " " + currency }))))));
 }
 
 function CheckoutFormLoading() {
@@ -31952,9 +31986,6 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchan
         return acc + ((_b = (_a = item.product) === null || _a === void 0 ? void 0 : _a.priceInCents) !== null && _b !== void 0 ? _b : 0) * item.quantity;
     }, 0);
     const total = subtotal + (tax !== null && tax !== void 0 ? tax : 0) + (shipping !== null && shipping !== void 0 ? shipping : 0);
-    const formatPrice = (cents) => {
-        return `${((cents / 100) * exchangeRate).toFixed(2)} ${currency}`;
-    };
     return (React.createElement("div", { className: "grid gap-5" },
         React.createElement("div", { className: "flex justify-between items-center" },
             React.createElement("h2", null, t("CheckoutEmbed.Summary.title")),
@@ -31964,18 +31995,18 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchan
         React.createElement("div", { className: "grid gap-3" },
             React.createElement("div", { className: "flex justify-between" },
                 React.createElement("p", null, t("CheckoutEmbed.Summary.subtotal")),
-                React.createElement("p", null, formatPrice(subtotal))),
+                React.createElement("p", null, storeHelpers.formatPrice(subtotal, currency, exchangeRate))),
             React.createElement("div", { className: "flex justify-between" },
                 React.createElement("p", null, t("CheckoutEmbed.Summary.shipping")),
                 React.createElement("p", null, !!shipping
-                    ? formatPrice(shipping)
+                    ? storeHelpers.formatPrice(shipping, currency, exchangeRate)
                     : t("CheckoutEmbed.Summary.calculatedAtNextStep"))),
             !!tax && (React.createElement("div", { className: "flex justify-between" },
                 React.createElement("p", null, t("CheckoutEmbed.Summary.tax")),
-                React.createElement("p", null, formatPrice(tax)))),
+                React.createElement("p", null, storeHelpers.formatPrice(tax, currency, exchangeRate)))),
             React.createElement("div", { className: "flex font-bold justify-between  items-center" },
                 React.createElement("p", null, t("CheckoutEmbed.Summary.total")),
-                React.createElement("p", null, formatPrice(total)))),
+                React.createElement("p", null, storeHelpers.formatPrice(total, currency, exchangeRate)))),
         React.createElement("hr", null),
         lineItems.map((item, index) => {
             var _a, _b, _c, _d, _e;
@@ -31987,7 +32018,7 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchan
                     React.createElement("h3", { className: "text-lg font-medium" }, (_c = item.product) === null || _c === void 0 ? void 0 : _c.title),
                     React.createElement("p", { className: "text-muted-foreground text-sm" }, item.variantOptions.map((option) => option.name).join(" / "))),
                 React.createElement("div", { className: "text-right" },
-                    React.createElement("p", { className: "text-lg font-medium" }, formatPrice((_e = (_d = item.product) === null || _d === void 0 ? void 0 : _d.priceInCents) !== null && _e !== void 0 ? _e : 0)))));
+                    React.createElement("p", { className: "text-lg font-medium" }, storeHelpers.formatPrice((_e = (_d = item.product) === null || _d === void 0 ? void 0 : _d.priceInCents) !== null && _e !== void 0 ? _e : 0, currency, exchangeRate)))));
         })));
 }
 
@@ -32065,7 +32096,7 @@ function CheckoutEmbed({ checkoutId, config }) {
     }
     return (React.createElement("div", { className: "checkout-embed mx-auto max-w-[1200px] min-h-screen overflow-x-hidden py-8 md:py-12 grid md:grid-cols-7 " },
         React.createElement(Appearance, { appearance: appearance }),
-        React.createElement("div", { className: "md:col-span-4 px-4 md:px-8" }, loading ? (React.createElement(CheckoutFormLoading, null)) : (React.createElement(CheckoutForm, { 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 }))),
+        React.createElement("div", { className: "md:col-span-4 px-4 md:px-8" }, loading ? (React.createElement(CheckoutFormLoading, null)) : (React.createElement(CheckoutForm, { 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 }))),
         React.createElement("div", { className: "md:col-span-3 px-4 md:px-8 order-first md:order-last" }, loading ? (React.createElement(CheckoutSummaryLoading, null)) : (React.createElement(CheckoutSummary, { currency: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _b !== void 0 ? _b : "", lineItems: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _c !== void 0 ? _c : [], shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, cancelUrl: cancelUrl, exchangeRate: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _d !== void 0 ? _d : 1 })))));
 }
 var index = React.memo(CheckoutEmbed);

package/dist/index.mjs

@@ -20749,11 +20749,44 @@ var Client = class {
   }
 };
 var client_default = Client;
+var Helpers = class {
+  constructor(proxy) {
+    this.proxy = proxy;
+  }
+  formatPrice(priceInCents, currency, exchangeRate) {
+    const amount = priceInCents / 100 * (exchangeRate != null ? exchangeRate : 1);
+    const isWhole = amount % 1 === 0;
+    const formattedPrice = new Intl.NumberFormat(void 0, {
+      style: "currency",
+      currency,
+      minimumFractionDigits: isWhole ? 0 : 2,
+      maximumFractionDigits: isWhole ? 0 : 2
+    }).format(amount);
+    return formattedPrice;
+  }
+  getExchangeRate(baseCurrency, targetCurrency) {
+    return __async(this, null, function* () {
+      const { data } = yield axios.get(
+        `https://api.exchangerate-api.com/v4/latest/${baseCurrency}`
+      );
+      const rate = data.rates[targetCurrency];
+      if (!rate) {
+        throw new Error("Could not get exchange rate for target currency");
+      }
+      return rate;
+    });
+  }
+};
+var helpers_default = Helpers;
 function createStoreClient(config) {
-  return new client_default(config.proxy);
+  return new client_default(config == null ? void 0 : config.proxy);
+}
+function createStoreHelpers(config) {
+  return new helpers_default(void 0 );
 }
 
 const storeClient = createStoreClient({ proxy: "/api/betterstore" });
+const storeHelpers = createStoreHelpers();
 
 function Appearance({ appearance, }) {
     useEffect(() => {
@@ -31637,18 +31670,19 @@ var CheckoutForm$2 = memo$1(CheckoutForm$1);
 
 const publicStripeKey = "pk_test_51OjSZ2JoDmiuDQz4Vub296KIgTCy4y8NJos59h93bq3sLe3veuXnV9XVmvvWDFlt3aEWHY4pOuIXyahEjjKZwezn00qo4U5fQS";
 const stripePromise = loadStripe(publicStripeKey);
-function PaymentElement({ paymentSecret, checkoutAppearance, onSuccess, onError, children, }) {
+function PaymentElement({ paymentSecret, checkoutAppearance, fonts, onSuccess, onError, children, }) {
     const options = {
         locale: "en",
         appearance: checkoutAppearance,
         clientSecret: paymentSecret,
+        fonts: fonts,
     };
     return (React__default.createElement(Elements, { stripe: stripePromise, options: options },
         React__default.createElement(CheckoutForm$2, { onSuccess: onSuccess, onError: onError, children: children })));
 }
 var PaymentElement$1 = memo$1(PaymentElement);
 
-function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, }) {
+function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, }) {
     const { t } = useTranslation();
     return (React__default.createElement("div", { className: "space-y-6" },
         React__default.createElement("div", null,
@@ -31676,7 +31710,7 @@ function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack,
                         " \u00B7 ",
                         shippingPrice)),
                 React__default.createElement(Button, { variant: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
-        React__default.createElement("div", { className: "mt-8" }, paymentSecret && (React__default.createElement(PaymentElement$1, { checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance), paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError },
+        React__default.createElement("div", { className: "mt-8" }, paymentSecret && (React__default.createElement(PaymentElement$1, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance), paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError },
             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),
@@ -31773,7 +31807,7 @@ const motionSettings = {
     exit: { opacity: 0 },
     transition: { duration: 0.2 },
 };
-function CheckoutForm({ checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, }) {
+function CheckoutForm({ checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, }) {
     const { formData, setFormData, step, setStep } = useFormStore(checkoutId)();
     const [paymentSecret, setPaymentSecret] = useState(null);
     const [shippingRates, setShippingRates] = useState([]);
@@ -31900,7 +31934,7 @@ function CheckoutForm({ checkoutId, onSuccess, onError, cancelUrl, clientSecret,
             step === "shipping" && formData.customer && (React__default.createElement(motion.div, Object.assign({ key: "shipping" }, motionSettings, { className: "absolute w-full" }),
                 React__default.createElement(ShippingMethodForm, { shippingRates: shippingRates, initialData: formData.shipping, onSubmit: handleShippingSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address) }))),
             step === "payment" && formData.customer && formData.shipping && (React__default.createElement(motion.div, Object.assign({ key: "payment" }, motionSettings, { className: "absolute w-full" }),
-                React__default.createElement(PaymentForm, { checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), shippingProvider: formData.shipping.provider, shippingPrice: formData.shipping.amount.toString() + " " + currency }))))));
+                React__default.createElement(PaymentForm, { fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), shippingProvider: formData.shipping.provider, shippingPrice: formData.shipping.amount.toString() + " " + currency }))))));
 }
 
 function CheckoutFormLoading() {
@@ -31929,9 +31963,6 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchan
         return acc + ((_b = (_a = item.product) === null || _a === void 0 ? void 0 : _a.priceInCents) !== null && _b !== void 0 ? _b : 0) * item.quantity;
     }, 0);
     const total = subtotal + (tax !== null && tax !== void 0 ? tax : 0) + (shipping !== null && shipping !== void 0 ? shipping : 0);
-    const formatPrice = (cents) => {
-        return `${((cents / 100) * exchangeRate).toFixed(2)} ${currency}`;
-    };
     return (React__default.createElement("div", { className: "grid gap-5" },
         React__default.createElement("div", { className: "flex justify-between items-center" },
             React__default.createElement("h2", null, t("CheckoutEmbed.Summary.title")),
@@ -31941,18 +31972,18 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchan
         React__default.createElement("div", { className: "grid gap-3" },
             React__default.createElement("div", { className: "flex justify-between" },
                 React__default.createElement("p", null, t("CheckoutEmbed.Summary.subtotal")),
-                React__default.createElement("p", null, formatPrice(subtotal))),
+                React__default.createElement("p", null, storeHelpers.formatPrice(subtotal, currency, exchangeRate))),
             React__default.createElement("div", { className: "flex justify-between" },
                 React__default.createElement("p", null, t("CheckoutEmbed.Summary.shipping")),
                 React__default.createElement("p", null, !!shipping
-                    ? formatPrice(shipping)
+                    ? storeHelpers.formatPrice(shipping, currency, exchangeRate)
                     : t("CheckoutEmbed.Summary.calculatedAtNextStep"))),
             !!tax && (React__default.createElement("div", { className: "flex justify-between" },
                 React__default.createElement("p", null, t("CheckoutEmbed.Summary.tax")),
-                React__default.createElement("p", null, formatPrice(tax)))),
+                React__default.createElement("p", null, storeHelpers.formatPrice(tax, currency, exchangeRate)))),
             React__default.createElement("div", { className: "flex font-bold justify-between  items-center" },
                 React__default.createElement("p", null, t("CheckoutEmbed.Summary.total")),
-                React__default.createElement("p", null, formatPrice(total)))),
+                React__default.createElement("p", null, storeHelpers.formatPrice(total, currency, exchangeRate)))),
         React__default.createElement("hr", null),
         lineItems.map((item, index) => {
             var _a, _b, _c, _d, _e;
@@ -31964,7 +31995,7 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchan
                     React__default.createElement("h3", { className: "text-lg font-medium" }, (_c = item.product) === null || _c === void 0 ? void 0 : _c.title),
                     React__default.createElement("p", { className: "text-muted-foreground text-sm" }, item.variantOptions.map((option) => option.name).join(" / "))),
                 React__default.createElement("div", { className: "text-right" },
-                    React__default.createElement("p", { className: "text-lg font-medium" }, formatPrice((_e = (_d = item.product) === null || _d === void 0 ? void 0 : _d.priceInCents) !== null && _e !== void 0 ? _e : 0)))));
+                    React__default.createElement("p", { className: "text-lg font-medium" }, storeHelpers.formatPrice((_e = (_d = item.product) === null || _d === void 0 ? void 0 : _d.priceInCents) !== null && _e !== void 0 ? _e : 0, currency, exchangeRate)))));
         })));
 }
 
@@ -32042,7 +32073,7 @@ function CheckoutEmbed({ checkoutId, config }) {
     }
     return (React__default.createElement("div", { className: "checkout-embed mx-auto max-w-[1200px] min-h-screen overflow-x-hidden py-8 md:py-12 grid md:grid-cols-7 " },
         React__default.createElement(Appearance, { appearance: appearance }),
-        React__default.createElement("div", { className: "md:col-span-4 px-4 md:px-8" }, loading ? (React__default.createElement(CheckoutFormLoading, null)) : (React__default.createElement(CheckoutForm, { 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 }))),
+        React__default.createElement("div", { className: "md:col-span-4 px-4 md:px-8" }, loading ? (React__default.createElement(CheckoutFormLoading, null)) : (React__default.createElement(CheckoutForm, { 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 }))),
         React__default.createElement("div", { className: "md:col-span-3 px-4 md:px-8 order-first md:order-last" }, loading ? (React__default.createElement(CheckoutSummaryLoading, null)) : (React__default.createElement(CheckoutSummary, { currency: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _b !== void 0 ? _b : "", lineItems: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _c !== void 0 ? _c : [], shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, cancelUrl: cancelUrl, exchangeRate: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _d !== void 0 ? _d : 1 })))));
 }
 var index = memo$1(CheckoutEmbed);

package/dist/lib/betterstore.d.ts

@@ -8,3 +8,8 @@ export declare const storeClient: {
     retrieveCustomer(clientSecret: string, idOrEmail: string): Promise<import("@betterstore/sdk").Customer>;
     updateCustomer(clientSecret: string, customerId: string, params: import("@betterstore/sdk").CustomerUpdateParams): Promise<import("@betterstore/sdk").Customer>;
 };
+export declare const storeHelpers: {
+    proxy?: string;
+    formatPrice(priceInCents: number, currency: string, exchangeRate?: number): string;
+    getExchangeRate(baseCurrency: string, targetCurrency: string): Promise<number>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@betterstore/react",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "description": "E-commerce for Developers",
   "private": false,
   "publishConfig": {
@@ -19,7 +19,7 @@
   "author": "Better Store",
   "license": "MIT",
   "devDependencies": {
-    "@betterstore/sdk": "^0.3.16",
+    "@betterstore/sdk": "^0.3.21",
     "@changesets/cli": "^2.28.1",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-json": "^6.1.0",