@betterstore/react 0.3.42 → 0.3.44

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @betterstore/sdk
 
+## 0.3.44
+
+### Patch Changes
+
+- bug fixes
+
+## 0.3.43
+
+### Patch Changes
+
+- bug fixes
+
 ## 0.3.42
 
 ### Patch Changes

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

@@ -1,10 +1,10 @@
 import { Appearance as StripeAppearance, StripeElementsOptions } from "@stripe/stripe-js";
 export type Themes = "dark" | "light";
+export type Fonts = StripeElementsOptions["fonts"];
 export type AppearanceConfig = {
     theme?: Themes;
     borderRadius?: number;
     font?: string;
-    fontSources?: StripeElementsOptions["fonts"];
     colors?: {
         background?: string;
         foreground?: string;
@@ -21,7 +21,8 @@ export type AppearanceConfig = {
         ring?: string;
     };
 };
-export default function Appearance({ appearance, }: {
+export default function Appearance({ appearance, fonts, }: {
     appearance?: AppearanceConfig;
+    fonts?: Fonts;
 }): null;
-export declare const convertCheckoutAppearanceToStripeAppearance: (appearance?: AppearanceConfig, fonts?: StripeElementsOptions["fonts"]) => StripeAppearance;
+export declare const convertCheckoutAppearanceToStripeAppearance: (appearance?: AppearanceConfig, fonts?: Fonts) => StripeAppearance;

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

@@ -1,7 +1,7 @@
 import { CheckoutSession, createStoreClient } from "@betterstore/sdk";
-import { StripeElementLocale, StripeElementsOptions } from "@stripe/stripe-js";
+import { StripeElementLocale } from "@stripe/stripe-js";
 import React from "react";
-import { AppearanceConfig } from "./appearance";
+import { AppearanceConfig, Fonts } from "./appearance";
 interface CheckoutFormProps {
     storeClient: ReturnType<typeof createStoreClient>;
     checkoutId: string;
@@ -12,7 +12,7 @@ interface CheckoutFormProps {
     customer?: CheckoutSession["customer"];
     currency: string;
     checkoutAppearance?: AppearanceConfig;
-    fonts?: StripeElementsOptions["fonts"];
+    fonts?: Fonts;
     locale?: StripeElementLocale;
     setShippingCost: (cost: number) => void;
     exchangeRate: number;

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

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

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

@@ -1,6 +1,6 @@
-import { StripeElementLocale, StripeElementsOptions } from "@stripe/stripe-js";
+import { StripeElementLocale } from "@stripe/stripe-js";
 import React from "react";
-import { AppearanceConfig } from "../../appearance";
+import { AppearanceConfig, Fonts } from "../../appearance";
 interface PaymentFormProps {
     paymentSecret: string | null;
     onSuccess: () => void;
@@ -12,7 +12,7 @@ interface PaymentFormProps {
     shippingName: string;
     shippingPrice: string;
     checkoutAppearance?: AppearanceConfig;
-    fonts?: StripeElementsOptions["fonts"];
+    fonts?: Fonts;
     locale?: StripeElementLocale;
     publicKey: string | null;
 }

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

@@ -1,11 +1,12 @@
-import { Appearance, StripeElementLocale, StripeElementsOptions } from "@stripe/stripe-js";
+import { Appearance, StripeElementLocale } from "@stripe/stripe-js";
 import React from "react";
+import { Fonts } from "../checkout-embed/appearance";
 declare function PaymentElement({ paymentSecret, publicKey, checkoutAppearance, locale, fonts, onSuccess, onError, children, setSubmitting, }: {
     paymentSecret: string;
     publicKey: string | null;
     checkoutAppearance?: Appearance;
     locale?: StripeElementLocale;
-    fonts?: StripeElementsOptions["fonts"];
+    fonts?: Fonts;
     onSuccess?: () => void;
     onError?: () => void;
     children: React.ReactNode;

package/dist/index.cjs.js

@@ -568,27 +568,30 @@ const appearance = {
     variables: {
         fontFamily: '-apple-system, BlinkMacSystemFont, "Geist", "Gill Sans", sans-serif'}};
 
-function Appearance({ appearance, }) {
+function Appearance({ appearance, fonts, }) {
     React.useEffect(() => {
+        var _a;
         const variables = getVariablesFromAppearanceConfig(appearance);
-        if (variables) {
+        const iframe = document.querySelector("iframe");
+        const iframeDoc = (iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument) || ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.document);
+        if (variables && iframeDoc) {
             Object.entries(variables).forEach(([key, value]) => {
-                document.documentElement.style.setProperty(key, value);
+                iframeDoc.documentElement.style.setProperty(key, value);
             });
         }
         // Load fonts if provided
-        if (appearance === null || appearance === void 0 ? void 0 : appearance.fontSources) {
-            appearance.fontSources.forEach((font) => {
+        if (fonts && iframeDoc) {
+            fonts.forEach((font) => {
                 if ("cssSrc" in font) {
                     // Handle CSS font source
-                    const link = document.createElement("link");
+                    const link = iframeDoc.createElement("link");
                     link.rel = "stylesheet";
                     link.href = font.cssSrc;
-                    document.head.appendChild(link);
+                    iframeDoc.head.appendChild(link);
                 }
                 else if ("family" in font) {
                     // Handle custom font source
-                    const style = document.createElement("style");
+                    const style = iframeDoc.createElement("style");
                     style.textContent = `
             @font-face {
               font-family: '${font.family}';
@@ -597,11 +600,11 @@ function Appearance({ appearance, }) {
               font-style: ${font.style || "normal"};
             }
           `;
-                    document.head.appendChild(style);
+                    iframeDoc.head.appendChild(style);
                 }
             });
         }
-    }, [appearance]);
+    }, [appearance, fonts]);
     return null;
 }
 const getVariablesFromAppearanceConfig = (appearance) => {
@@ -12081,7 +12084,7 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
     }, []);
     return (React.createElement(IframeWrapper, null,
         React.createElement("div", { className: "checkout-embed scrollbar-hidden mx-auto max-w-[1200px] min-h-screen overflow-x-hidden gap-6 md:gap-0 py-4 md:py-12 flex flex-col md:grid md:grid-cols-7 " },
-            React.createElement(Appearance, { appearance: appearance }),
+            React.createElement(Appearance, { appearance: appearance, fonts: config.fonts }),
             React.createElement("div", { className: "md:col-span-4 px-4 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-3 px-4 md:px-8 order-first md:order-last" },
                 React.createElement(Toaster, null),

package/dist/index.mjs

@@ -545,27 +545,30 @@ const appearance = {
     variables: {
         fontFamily: '-apple-system, BlinkMacSystemFont, "Geist", "Gill Sans", sans-serif'}};
 
-function Appearance({ appearance, }) {
+function Appearance({ appearance, fonts, }) {
     useEffect(() => {
+        var _a;
         const variables = getVariablesFromAppearanceConfig(appearance);
-        if (variables) {
+        const iframe = document.querySelector("iframe");
+        const iframeDoc = (iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument) || ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.document);
+        if (variables && iframeDoc) {
             Object.entries(variables).forEach(([key, value]) => {
-                document.documentElement.style.setProperty(key, value);
+                iframeDoc.documentElement.style.setProperty(key, value);
             });
         }
         // Load fonts if provided
-        if (appearance === null || appearance === void 0 ? void 0 : appearance.fontSources) {
-            appearance.fontSources.forEach((font) => {
+        if (fonts && iframeDoc) {
+            fonts.forEach((font) => {
                 if ("cssSrc" in font) {
                     // Handle CSS font source
-                    const link = document.createElement("link");
+                    const link = iframeDoc.createElement("link");
                     link.rel = "stylesheet";
                     link.href = font.cssSrc;
-                    document.head.appendChild(link);
+                    iframeDoc.head.appendChild(link);
                 }
                 else if ("family" in font) {
                     // Handle custom font source
-                    const style = document.createElement("style");
+                    const style = iframeDoc.createElement("style");
                     style.textContent = `
             @font-face {
               font-family: '${font.family}';
@@ -574,11 +577,11 @@ function Appearance({ appearance, }) {
               font-style: ${font.style || "normal"};
             }
           `;
-                    document.head.appendChild(style);
+                    iframeDoc.head.appendChild(style);
                 }
             });
         }
-    }, [appearance]);
+    }, [appearance, fonts]);
     return null;
 }
 const getVariablesFromAppearanceConfig = (appearance) => {
@@ -12058,7 +12061,7 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
     }, []);
     return (React__default.createElement(IframeWrapper, null,
         React__default.createElement("div", { className: "checkout-embed scrollbar-hidden mx-auto max-w-[1200px] min-h-screen overflow-x-hidden 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 }),
+            React__default.createElement(Appearance, { appearance: appearance, fonts: config.fonts }),
             React__default.createElement("div", { className: "md:col-span-4 px-4 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-3 px-4 md:px-8 order-first md:order-last" },
                 React__default.createElement(Toaster, null),

package/package.json

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