@betterstore/react 0.6.11 → 0.6.12

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

@@ -1 +1 @@
-{"version":3,"file":"checkout-form.d.ts","sourceRoot":"","sources":["../../../src/components/checkout-embed/checkout-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAGhB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAcvD,UAAU,iBAAiB;IACzB,WAAW,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;IAClD,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,CAAC,EAAE,gBAAgB,CAAC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,SAAS,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;CACzC;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,WAAW,EACX,UAAU,EACV,SAAS,EACT,OAAO,EACP,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,kBAAkB,EAClB,KAAK,EACL,MAAM,EACN,eAAe,EACf,YAAY,EACZ,aAAa,EACb,SAAS,EACT,mBAAmB,EACnB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,wBAAwB,EACxB,SAAS,GACV,EAAE,iBAAiB,2CA2SnB"}
+{"version":3,"file":"checkout-form.d.ts","sourceRoot":"","sources":["../../../src/components/checkout-embed/checkout-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAGhB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAcvD,UAAU,iBAAiB;IACzB,WAAW,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;IAClD,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,CAAC,EAAE,gBAAgB,CAAC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,SAAS,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;CACzC;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,WAAW,EACX,UAAU,EACV,SAAS,EACT,OAAO,EACP,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,kBAAkB,EAClB,KAAK,EACL,MAAM,EACN,eAAe,EACf,YAAY,EACZ,aAAa,EACb,SAAS,EACT,mBAAmB,EACnB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,wBAAwB,EACxB,SAAS,GACV,EAAE,iBAAiB,2CA4SnB"}

package/dist/components/checkout-embed/steps/customer/address-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"address-utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/checkout-embed/steps/customer/address-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,eAAO,MAAM,aAAa,GAAI,SAAS,gBAAgB,CAAC,SAAS,CAAC,KAAG,MAcpE,CAAC"}
+{"version":3,"file":"address-utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/checkout-embed/steps/customer/address-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,eAAO,MAAM,aAAa,GAAI,SAAS,gBAAgB,CAAC,SAAS,CAAC,KAAG,MAMpE,CAAC"}

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

@@ -15,7 +15,8 @@ interface PaymentFormProps {
     locale?: StripeElementLocale;
     publicKey: string | null;
     paymentComponentKey: number;
+    currency: string;
 }
-export default function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingFormData, address, checkoutAppearance, fonts, locale, publicKey, paymentComponentKey, }: PaymentFormProps): import("react/jsx-runtime").JSX.Element;
+export default function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, currency, contactEmail, shippingFormData, address, checkoutAppearance, fonts, locale, publicKey, paymentComponentKey, }: PaymentFormProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=form.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../../src/components/checkout-embed/steps/payment/form.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAIxD,OAAO,EACL,gBAAgB,EAEhB,KAAK,EACN,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,UAAU,gBAAgB;IACxB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,WAAW,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,gBAAgB,CAAC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,OAAO,EACP,kBAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,mBAAmB,GACpB,EAAE,gBAAgB,2CAoGlB"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../../src/components/checkout-embed/steps/payment/form.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAIxD,OAAO,EACL,gBAAgB,EAEhB,KAAK,EACN,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,UAAU,gBAAgB;IACxB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,WAAW,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,gBAAgB,CAAC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,OAAO,EACP,kBAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,mBAAmB,GACpB,EAAE,gBAAgB,2CA8HlB"}

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

@@ -0,0 +1,8 @@
+type IconProps = React.HTMLAttributes<SVGElement>;
+export declare const Icons: {
+    apple: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+    google: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+    paypal: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+};
+export {};
+//# sourceMappingURL=icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../../src/components/checkout-embed/steps/payment/icons.tsx"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;AAElD,eAAO,MAAM,KAAK;mBACD,SAAS;oBA+BR,SAAS;oBAoBT,SAAS;CA6B1B,CAAC"}

package/dist/components/payment-element/checkout-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkout-form.d.ts","sourceRoot":"","sources":["../../../src/components/payment-element/checkout-form.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAyB,MAAM,OAAO,CAAC;qGAQ3C;IACD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;CACjD;AA+CD,wBAAkC"}
+{"version":3,"file":"checkout-form.d.ts","sourceRoot":"","sources":["../../../src/components/payment-element/checkout-form.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAyB,MAAM,OAAO,CAAC;qGAQ3C;IACD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;CACjD;AAqDD,wBAAkC"}

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

@@ -1,6 +1,9 @@
+type PaymentMethodType = "apple_pay" | "card" | "paypal" | "google_pay" | string | null;
 interface CheckoutStore {
     isSubmitting: boolean;
     setIsSubmitting: (isSubmitting: boolean) => void;
+    paymentMethod: PaymentMethodType;
+    setPaymentMethod: (paymentMethod: PaymentMethodType) => void;
 }
 export declare const useCheckout: import("zustand").UseBoundStore<import("zustand").StoreApi<CheckoutStore>>;
 export {};

package/dist/components/payment-element/useCheckout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCheckout.d.ts","sourceRoot":"","sources":["../../../src/components/payment-element/useCheckout.ts"],"names":[],"mappings":"AAEA,UAAU,aAAa;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,WAAW,4EAGrB,CAAC"}
+{"version":3,"file":"useCheckout.d.ts","sourceRoot":"","sources":["../../../src/components/payment-element/useCheckout.ts"],"names":[],"mappings":"AAEA,KAAK,iBAAiB,GAClB,WAAW,GACX,MAAM,GACN,QAAQ,GACR,YAAY,GACZ,MAAM,GACN,IAAI,CAAC;AAET,UAAU,aAAa;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,aAAa,EAAE,iBAAiB,CAAC;IACjC,gBAAgB,EAAE,CAAC,aAAa,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC9D;AAED,eAAO,MAAM,WAAW,4EAMrB,CAAC"}

package/dist/index.cjs.js

@@ -3326,7 +3326,12 @@ const CheckoutEmbed$2 = {
 	loading: "Načítání ...",
 	Payment: {
 		back: "Zpět na výběr dopravy",
-		button: "Dokončit objednávku",
+		button: {
+			"default": "Dokončit objednávku",
+			apple_pay: "Zaplatit s Apple Pay",
+			paypal: "Zaplatit s PayPal",
+			google_pay: "Zaplatit s Google Pay"
+		},
 		description: "Všechny transakce jsou zabezpečené a šifrované.",
 		title: "Platba"
 	},
@@ -3443,7 +3448,12 @@ const CheckoutEmbed$1 = {
 		title: "Payment",
 		description: "All transactions are secure and encrypted.",
 		back: "Back to shipping",
-		button: "Buy now"
+		button: {
+			"default": "Buy now",
+			apple_pay: "Pay with Apple Pay",
+			paypal: "Pay with PayPal",
+			google_pay: "Pay with Google Pay"
+		}
 	}
 };
 const Errors = {
@@ -13695,16 +13705,7 @@ objectType({
 });
 
 const formatAddress = (address) => {
-    const partWithoutComma = [address.province, address.zipCode]
-        .filter(Boolean)
-        .join(" ");
-    const parts = [
-        address.line1,
-        address.line2,
-        address.city,
-        partWithoutComma,
-        address.country,
-    ].filter(Boolean);
+    const parts = [address.line1, address.zipCode, address.country].filter(Boolean);
     return parts.join(", ");
 };
 
@@ -37976,13 +37977,19 @@ var loadStripe = function loadStripe() {
 const useCheckout = create((set) => ({
     isSubmitting: false,
     setIsSubmitting: (isSubmitting) => set({ isSubmitting }),
+    paymentMethod: null,
+    setPaymentMethod: (paymentMethod) => set({ paymentMethod }),
 }));
 
 const CheckoutForm$1 = ({ onSuccess, onError, children, setSubmitting, }) => {
     const stripe = reactStripe_umdExports.useStripe();
     const elements = reactStripe_umdExports.useElements();
-    const { setIsSubmitting } = useCheckout();
+    const { setIsSubmitting, setPaymentMethod } = useCheckout();
     const [errorMessage, setErrorMessage] = React.useState(undefined);
+    const handlePaymentMethodChange = (event) => {
+        var _a, _b;
+        setPaymentMethod((_b = (_a = event === null || event === void 0 ? void 0 : event.value) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : null);
+    };
     const handleSubmit = (event) => __awaiter(void 0, void 0, void 0, function* () {
         event.preventDefault();
         if (!stripe || !elements) {
@@ -38007,7 +38014,7 @@ const CheckoutForm$1 = ({ onSuccess, onError, children, setSubmitting, }) => {
             onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
         }
     });
-    return (jsxRuntime.jsxs("form", { className: "w-full pb-40 sm:pb-0", onSubmit: handleSubmit, children: [jsxRuntime.jsx(reactStripe_umdExports.PaymentElement, {}), errorMessage && (jsxRuntime.jsx("p", { className: "text-destructive -mb-2 mt-2 text-sm", children: errorMessage })), children] }));
+    return (jsxRuntime.jsxs("form", { className: "w-full pb-40 sm:pb-0", onSubmit: handleSubmit, children: [jsxRuntime.jsx(reactStripe_umdExports.PaymentElement, { onChange: handlePaymentMethodChange }), errorMessage && (jsxRuntime.jsx("p", { className: "text-destructive -mb-2 mt-2 text-sm", children: errorMessage })), children] }));
 };
 var CheckoutForm$2 = React.memo(CheckoutForm$1);
 
@@ -42680,10 +42687,30 @@ const convertCheckoutAppearanceToStripeAppearance = (appearance, fonts) => {
     return newAppearance;
 };
 
-function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingFormData, address, checkoutAppearance, fonts, locale, publicKey, paymentComponentKey, }) {
+const Icons = {
+    apple: (props) => (jsxRuntime.jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" }, props, { role: "img", fill: "none", children: [jsxRuntime.jsxs("g", { clipPath: "url(#clip0_4418_8987)", children: [jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.1001 19.16C19.6901 18.26 19.9101 17.8 20.3601 16.79C17.0401 15.53 16.5101 10.8 19.7901 8.98999C18.7901 7.72999 17.3801 7 16.0501 7C15.0901 7 14.4301 7.25001 13.8401 7.48001C13.3401 7.67001 12.8901 7.84 12.3301 7.84C11.7301 7.84 11.2001 7.65001 10.6401 7.45001C10.0301 7.23001 9.39006 7 8.59006 7C7.10006 7 5.51007 7.91 4.50007 9.47C3.08007 11.67 3.33007 15.79 5.62007 19.31C6.44007 20.57 7.54007 21.98 8.97007 22C9.57007 22.01 9.96007 21.83 10.3901 21.64C10.8801 21.42 11.4101 21.18 12.3401 21.18C13.2701 21.17 13.7901 21.42 14.2801 21.64C14.7001 21.83 15.0801 22.01 15.6701 22C17.1201 21.98 18.2801 20.42 19.1001 19.16Z", fill: "currentColor" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.8399 2C15.9999 3.1 15.5499 4.19001 14.9599 4.95001C14.3299 5.77001 13.2299 6.41 12.1699 6.37C11.9799 5.31 12.4699 4.21999 13.0699 3.48999C13.7399 2.68999 14.8699 2.07 15.8399 2Z", fill: "currentColor" })] }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_4418_8987", children: jsxRuntime.jsx("rect", { width: "24", height: "24", fill: "white" }) }) })] }))),
+    google: (props) => (jsxRuntime.jsxs("svg", Object.assign({ viewBox: "-3 0 262 262" }, props, { role: "img", fill: "none", children: [jsxRuntime.jsx("path", { d: "M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027", fill: "#4285F4" }), jsxRuntime.jsx("path", { d: "M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1", fill: "#34A853" }), jsxRuntime.jsx("path", { d: "M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782", fill: "#FBBC05" }), jsxRuntime.jsx("path", { d: "M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251", fill: "#EB4335" })] }))),
+    paypal: (props) => (jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "584.798", height: "720", viewBox: "0 0 154.728 190.5" }, props, { role: "img", fill: "none", children: jsxRuntime.jsxs("g", { transform: "translate(898.192 276.071)", children: [jsxRuntime.jsx("path", { clipPath: "none", d: "M-837.663-237.968a5.49 5.49 0 0 0-5.423 4.633l-9.013 57.15-8.281 52.514-.005.044.01-.044 8.281-52.514c.421-2.669 2.719-4.633 5.42-4.633h26.404c26.573 0 49.127-19.387 53.246-45.658.314-1.996.482-3.973.52-5.924v-.003h-.003c-6.753-3.543-14.683-5.565-23.372-5.565z", fill: "#001c64" }), jsxRuntime.jsx("path", { clipPath: "none", d: "M-766.506-232.402c-.037 1.951-.207 3.93-.52 5.926-4.119 26.271-26.673 45.658-53.246 45.658h-26.404c-2.701 0-4.999 1.964-5.42 4.633l-8.281 52.514-5.197 32.947a4.46 4.46 0 0 0 4.405 5.153h28.66a5.49 5.49 0 0 0 5.423-4.633l7.55-47.881c.423-2.669 2.722-4.636 5.423-4.636h16.876c26.573 0 49.124-19.386 53.243-45.655 2.924-18.649-6.46-35.614-22.511-44.026z", fill: "#0070e0" }), jsxRuntime.jsx("path", { clipPath: "none", d: "M-870.225-276.071a5.49 5.49 0 0 0-5.423 4.636l-22.489 142.608a4.46 4.46 0 0 0 4.405 5.156h33.351l8.281-52.514 9.013-57.15a5.49 5.49 0 0 1 5.423-4.633h47.782c8.691 0 16.621 2.025 23.375 5.563.46-23.917-19.275-43.666-46.412-43.666z", fill: "#003087" })] }) }))),
+};
+
+function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, currency, contactEmail, shippingFormData, address, checkoutAppearance, fonts, locale, publicKey, paymentComponentKey, }) {
     const [isSubmitting, setIsSubmitting] = React.useState(false);
     const { t } = useTranslation();
-    return (jsxRuntime.jsxs("div", { className: "space-y-6", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h2", { className: "mb-2", children: t("CheckoutEmbed.Payment.title") }), jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: t("CheckoutEmbed.Payment.description") })] }), jsxRuntime.jsxs("div", { className: "space-y-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.contact") }), " ", jsxRuntime.jsx("span", { className: "text-muted-foreground", children: contactEmail })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onDoubleBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.address") }), " ", jsxRuntime.jsx("span", { className: "text-muted-foreground", children: address })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onDoubleBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("div", { className: "flex gap-1", children: [jsxRuntime.jsx("p", { className: "font-medium", children: t("CheckoutEmbed.Shipping.shipping") }), " ", jsxRuntime.jsx("div", { className: "text-muted-foreground flex flex-col gap-1", children: Object.entries(shippingFormData).map(([id, shipmentFormData]) => (jsxRuntime.jsxs("p", { children: [shipmentFormData.displayName, " \u00B7", " ", shipmentFormData.priceInCents] }, id))) })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onBack, children: t("CheckoutEmbed.Shipping.change") })] })] }), jsxRuntime.jsx("div", { className: "mt-8", children: paymentSecret && (jsxRuntime.jsx(PaymentElement$1, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting, publicKey: publicKey, children: jsxRuntime.jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 mt-8 px-4 sm:static sm:px-0", children: jsxRuntime.jsxs("div", { className: "bg-background flex flex-col-reverse items-center justify-between gap-2 pb-4 sm:flex-row sm:bg-transparent sm:pb-0", children: [jsxRuntime.jsxs(Button, { className: "w-full sm:w-fit", type: "button", variant: "ghost", onClick: onBack, children: [jsxRuntime.jsx(ChevronLeft, {}), t("CheckoutEmbed.Payment.back")] }), jsxRuntime.jsx(SubmitButton, { className: "w-full max-sm:h-[52px] sm:w-fit", isValid: true, isSubmitting: isSubmitting, children: t("CheckoutEmbed.Payment.button") })] }) }) }, paymentComponentKey)) })] }));
+    const { paymentMethod } = useCheckout();
+    const submitButtonTextKey = paymentMethod === "apple_pay"
+        ? "apple_pay"
+        : paymentMethod === "card"
+            ? "default"
+            : paymentMethod === "paypal"
+                ? "paypal"
+                : paymentMethod === "google_pay"
+                    ? "google_pay"
+                    : "default";
+    const submitButtonText = t(`CheckoutEmbed.Payment.button.${submitButtonTextKey}`);
+    const renderButtonIcon = () => {
+        return submitButtonTextKey === "apple_pay" ? (jsxRuntime.jsx(Icons.apple, { className: "size-5 max-sm:size-[22px]" })) : submitButtonTextKey === "google_pay" ? (jsxRuntime.jsx(Icons.google, { className: "ml-1 size-4 max-sm:size-5" })) : submitButtonTextKey === "paypal" ? (jsxRuntime.jsx(Icons.paypal, { className: "ml-1 size-4 max-sm:size-5" })) : null;
+    };
+    return (jsxRuntime.jsxs("div", { className: "space-y-6", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h2", { className: "mb-2", children: t("CheckoutEmbed.Payment.title") }), jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: t("CheckoutEmbed.Payment.description") })] }), jsxRuntime.jsxs("div", { className: "space-y-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.contact") }), " ", jsxRuntime.jsx("span", { className: "text-muted-foreground", children: contactEmail })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onDoubleBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.address") }), " ", jsxRuntime.jsx("span", { className: "text-muted-foreground", children: address })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onDoubleBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("div", { className: "flex gap-1", children: [jsxRuntime.jsx("p", { className: "font-medium", children: t("CheckoutEmbed.Shipping.shipping") }), " ", jsxRuntime.jsx("div", { className: "text-muted-foreground flex flex-col gap-1", children: Object.entries(shippingFormData).map(([id, shipmentFormData]) => (jsxRuntime.jsxs("p", { children: [shipmentFormData.displayName, " \u00B7", " ", formatPrice(shipmentFormData.priceInCents, currency)] }, id))) })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onBack, children: t("CheckoutEmbed.Shipping.change") })] })] }), jsxRuntime.jsx("div", { className: "mt-8", children: paymentSecret && (jsxRuntime.jsx(PaymentElement$1, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting, publicKey: publicKey, children: jsxRuntime.jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 mt-8 px-4 sm:static sm:px-0", children: jsxRuntime.jsxs("div", { className: "bg-background flex flex-col-reverse items-center justify-between gap-2 pb-4 sm:flex-row sm:bg-transparent sm:pb-0", children: [jsxRuntime.jsxs(Button, { className: "w-full max-sm:hidden sm:w-fit", type: "button", variant: "ghost", onClick: onBack, children: [jsxRuntime.jsx(ChevronLeft, {}), t("CheckoutEmbed.Payment.back")] }), jsxRuntime.jsxs(SubmitButton, { className: "w-full max-sm:h-[52px] max-sm:text-base sm:w-fit", isValid: true, isSubmitting: isSubmitting, children: [submitButtonText, renderButtonIcon()] })] }) }) }, paymentComponentKey)) })] }));
 }
 
 function Skeleton(_a) {
@@ -42999,7 +43026,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
     };
     const renderStep = () => {
         if (step === "payment" && formData.customer && formData.shipping) {
-            return (jsxRuntime.jsx(PaymentForm, { paymentComponentKey: paymentComponentKey, locale: locale, fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, address: formatAddress(formData.customer.address), shippingFormData: formData.shipping, publicKey: publicKey }));
+            return (jsxRuntime.jsx(PaymentForm, { paymentComponentKey: paymentComponentKey, locale: locale, fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, address: formatAddress(formData.customer.address), shippingFormData: formData.shipping, publicKey: publicKey, currency: currency }));
         }
         if (step === "shipping" && formData.customer) {
             return (jsxRuntime.jsx(ShipmentsShippingMethodForm, { 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, shipments: shipments }));

package/dist/index.mjs

@@ -3306,7 +3306,12 @@ const CheckoutEmbed$2 = {
 	loading: "Načítání ...",
 	Payment: {
 		back: "Zpět na výběr dopravy",
-		button: "Dokončit objednávku",
+		button: {
+			"default": "Dokončit objednávku",
+			apple_pay: "Zaplatit s Apple Pay",
+			paypal: "Zaplatit s PayPal",
+			google_pay: "Zaplatit s Google Pay"
+		},
 		description: "Všechny transakce jsou zabezpečené a šifrované.",
 		title: "Platba"
 	},
@@ -3423,7 +3428,12 @@ const CheckoutEmbed$1 = {
 		title: "Payment",
 		description: "All transactions are secure and encrypted.",
 		back: "Back to shipping",
-		button: "Buy now"
+		button: {
+			"default": "Buy now",
+			apple_pay: "Pay with Apple Pay",
+			paypal: "Pay with PayPal",
+			google_pay: "Pay with Google Pay"
+		}
 	}
 };
 const Errors = {
@@ -13675,16 +13685,7 @@ objectType({
 });
 
 const formatAddress = (address) => {
-    const partWithoutComma = [address.province, address.zipCode]
-        .filter(Boolean)
-        .join(" ");
-    const parts = [
-        address.line1,
-        address.line2,
-        address.city,
-        partWithoutComma,
-        address.country,
-    ].filter(Boolean);
+    const parts = [address.line1, address.zipCode, address.country].filter(Boolean);
     return parts.join(", ");
 };
 
@@ -37956,13 +37957,19 @@ var loadStripe = function loadStripe() {
 const useCheckout = create((set) => ({
     isSubmitting: false,
     setIsSubmitting: (isSubmitting) => set({ isSubmitting }),
+    paymentMethod: null,
+    setPaymentMethod: (paymentMethod) => set({ paymentMethod }),
 }));
 
 const CheckoutForm$2 = ({ onSuccess, onError, children, setSubmitting, }) => {
     const stripe = reactStripe_umdExports.useStripe();
     const elements = reactStripe_umdExports.useElements();
-    const { setIsSubmitting } = useCheckout();
+    const { setIsSubmitting, setPaymentMethod } = useCheckout();
     const [errorMessage, setErrorMessage] = useState(undefined);
+    const handlePaymentMethodChange = (event) => {
+        var _a, _b;
+        setPaymentMethod((_b = (_a = event === null || event === void 0 ? void 0 : event.value) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : null);
+    };
     const handleSubmit = (event) => __awaiter(void 0, void 0, void 0, function* () {
         event.preventDefault();
         if (!stripe || !elements) {
@@ -37987,7 +37994,7 @@ const CheckoutForm$2 = ({ onSuccess, onError, children, setSubmitting, }) => {
             onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
         }
     });
-    return (jsxs("form", { className: "w-full pb-40 sm:pb-0", onSubmit: handleSubmit, children: [jsx(reactStripe_umdExports.PaymentElement, {}), errorMessage && (jsx("p", { className: "text-destructive -mb-2 mt-2 text-sm", children: errorMessage })), children] }));
+    return (jsxs("form", { className: "w-full pb-40 sm:pb-0", onSubmit: handleSubmit, children: [jsx(reactStripe_umdExports.PaymentElement, { onChange: handlePaymentMethodChange }), errorMessage && (jsx("p", { className: "text-destructive -mb-2 mt-2 text-sm", children: errorMessage })), children] }));
 };
 var CheckoutForm$1 = memo(CheckoutForm$2);
 
@@ -42660,10 +42667,30 @@ const convertCheckoutAppearanceToStripeAppearance = (appearance, fonts) => {
     return newAppearance;
 };
 
-function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingFormData, address, checkoutAppearance, fonts, locale, publicKey, paymentComponentKey, }) {
+const Icons = {
+    apple: (props) => (jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" }, props, { role: "img", fill: "none", children: [jsxs("g", { clipPath: "url(#clip0_4418_8987)", children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.1001 19.16C19.6901 18.26 19.9101 17.8 20.3601 16.79C17.0401 15.53 16.5101 10.8 19.7901 8.98999C18.7901 7.72999 17.3801 7 16.0501 7C15.0901 7 14.4301 7.25001 13.8401 7.48001C13.3401 7.67001 12.8901 7.84 12.3301 7.84C11.7301 7.84 11.2001 7.65001 10.6401 7.45001C10.0301 7.23001 9.39006 7 8.59006 7C7.10006 7 5.51007 7.91 4.50007 9.47C3.08007 11.67 3.33007 15.79 5.62007 19.31C6.44007 20.57 7.54007 21.98 8.97007 22C9.57007 22.01 9.96007 21.83 10.3901 21.64C10.8801 21.42 11.4101 21.18 12.3401 21.18C13.2701 21.17 13.7901 21.42 14.2801 21.64C14.7001 21.83 15.0801 22.01 15.6701 22C17.1201 21.98 18.2801 20.42 19.1001 19.16Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.8399 2C15.9999 3.1 15.5499 4.19001 14.9599 4.95001C14.3299 5.77001 13.2299 6.41 12.1699 6.37C11.9799 5.31 12.4699 4.21999 13.0699 3.48999C13.7399 2.68999 14.8699 2.07 15.8399 2Z", fill: "currentColor" })] }), jsx("defs", { children: jsx("clipPath", { id: "clip0_4418_8987", children: jsx("rect", { width: "24", height: "24", fill: "white" }) }) })] }))),
+    google: (props) => (jsxs("svg", Object.assign({ viewBox: "-3 0 262 262" }, props, { role: "img", fill: "none", children: [jsx("path", { d: "M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027", fill: "#4285F4" }), jsx("path", { d: "M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1", fill: "#34A853" }), jsx("path", { d: "M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782", fill: "#FBBC05" }), jsx("path", { d: "M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251", fill: "#EB4335" })] }))),
+    paypal: (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "584.798", height: "720", viewBox: "0 0 154.728 190.5" }, props, { role: "img", fill: "none", children: jsxs("g", { transform: "translate(898.192 276.071)", children: [jsx("path", { clipPath: "none", d: "M-837.663-237.968a5.49 5.49 0 0 0-5.423 4.633l-9.013 57.15-8.281 52.514-.005.044.01-.044 8.281-52.514c.421-2.669 2.719-4.633 5.42-4.633h26.404c26.573 0 49.127-19.387 53.246-45.658.314-1.996.482-3.973.52-5.924v-.003h-.003c-6.753-3.543-14.683-5.565-23.372-5.565z", fill: "#001c64" }), jsx("path", { clipPath: "none", d: "M-766.506-232.402c-.037 1.951-.207 3.93-.52 5.926-4.119 26.271-26.673 45.658-53.246 45.658h-26.404c-2.701 0-4.999 1.964-5.42 4.633l-8.281 52.514-5.197 32.947a4.46 4.46 0 0 0 4.405 5.153h28.66a5.49 5.49 0 0 0 5.423-4.633l7.55-47.881c.423-2.669 2.722-4.636 5.423-4.636h16.876c26.573 0 49.124-19.386 53.243-45.655 2.924-18.649-6.46-35.614-22.511-44.026z", fill: "#0070e0" }), jsx("path", { clipPath: "none", d: "M-870.225-276.071a5.49 5.49 0 0 0-5.423 4.636l-22.489 142.608a4.46 4.46 0 0 0 4.405 5.156h33.351l8.281-52.514 9.013-57.15a5.49 5.49 0 0 1 5.423-4.633h47.782c8.691 0 16.621 2.025 23.375 5.563.46-23.917-19.275-43.666-46.412-43.666z", fill: "#003087" })] }) }))),
+};
+
+function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, currency, contactEmail, shippingFormData, address, checkoutAppearance, fonts, locale, publicKey, paymentComponentKey, }) {
     const [isSubmitting, setIsSubmitting] = useState(false);
     const { t } = useTranslation();
-    return (jsxs("div", { className: "space-y-6", children: [jsxs("div", { children: [jsx("h2", { className: "mb-2", children: t("CheckoutEmbed.Payment.title") }), jsx("p", { className: "text-muted-foreground text-sm", children: t("CheckoutEmbed.Payment.description") })] }), jsxs("div", { className: "space-y-2", children: [jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxs("p", { children: [jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.contact") }), " ", jsx("span", { className: "text-muted-foreground", children: contactEmail })] }), jsx(Button, { variant: "link", size: "link", onClick: onDoubleBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxs("p", { children: [jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.address") }), " ", jsx("span", { className: "text-muted-foreground", children: address })] }), jsx(Button, { variant: "link", size: "link", onClick: onDoubleBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxs("div", { className: "flex gap-1", children: [jsx("p", { className: "font-medium", children: t("CheckoutEmbed.Shipping.shipping") }), " ", jsx("div", { className: "text-muted-foreground flex flex-col gap-1", children: Object.entries(shippingFormData).map(([id, shipmentFormData]) => (jsxs("p", { children: [shipmentFormData.displayName, " \u00B7", " ", shipmentFormData.priceInCents] }, id))) })] }), jsx(Button, { variant: "link", size: "link", onClick: onBack, children: t("CheckoutEmbed.Shipping.change") })] })] }), jsx("div", { className: "mt-8", children: paymentSecret && (jsx(PaymentElement, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting, publicKey: publicKey, children: jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 mt-8 px-4 sm:static sm:px-0", children: jsxs("div", { className: "bg-background flex flex-col-reverse items-center justify-between gap-2 pb-4 sm:flex-row sm:bg-transparent sm:pb-0", children: [jsxs(Button, { className: "w-full sm:w-fit", type: "button", variant: "ghost", onClick: onBack, children: [jsx(ChevronLeft, {}), t("CheckoutEmbed.Payment.back")] }), jsx(SubmitButton, { className: "w-full max-sm:h-[52px] sm:w-fit", isValid: true, isSubmitting: isSubmitting, children: t("CheckoutEmbed.Payment.button") })] }) }) }, paymentComponentKey)) })] }));
+    const { paymentMethod } = useCheckout();
+    const submitButtonTextKey = paymentMethod === "apple_pay"
+        ? "apple_pay"
+        : paymentMethod === "card"
+            ? "default"
+            : paymentMethod === "paypal"
+                ? "paypal"
+                : paymentMethod === "google_pay"
+                    ? "google_pay"
+                    : "default";
+    const submitButtonText = t(`CheckoutEmbed.Payment.button.${submitButtonTextKey}`);
+    const renderButtonIcon = () => {
+        return submitButtonTextKey === "apple_pay" ? (jsx(Icons.apple, { className: "size-5 max-sm:size-[22px]" })) : submitButtonTextKey === "google_pay" ? (jsx(Icons.google, { className: "ml-1 size-4 max-sm:size-5" })) : submitButtonTextKey === "paypal" ? (jsx(Icons.paypal, { className: "ml-1 size-4 max-sm:size-5" })) : null;
+    };
+    return (jsxs("div", { className: "space-y-6", children: [jsxs("div", { children: [jsx("h2", { className: "mb-2", children: t("CheckoutEmbed.Payment.title") }), jsx("p", { className: "text-muted-foreground text-sm", children: t("CheckoutEmbed.Payment.description") })] }), jsxs("div", { className: "space-y-2", children: [jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxs("p", { children: [jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.contact") }), " ", jsx("span", { className: "text-muted-foreground", children: contactEmail })] }), jsx(Button, { variant: "link", size: "link", onClick: onDoubleBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxs("p", { children: [jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.address") }), " ", jsx("span", { className: "text-muted-foreground", children: address })] }), jsx(Button, { variant: "link", size: "link", onClick: onDoubleBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxs("div", { className: "flex gap-1", children: [jsx("p", { className: "font-medium", children: t("CheckoutEmbed.Shipping.shipping") }), " ", jsx("div", { className: "text-muted-foreground flex flex-col gap-1", children: Object.entries(shippingFormData).map(([id, shipmentFormData]) => (jsxs("p", { children: [shipmentFormData.displayName, " \u00B7", " ", formatPrice(shipmentFormData.priceInCents, currency)] }, id))) })] }), jsx(Button, { variant: "link", size: "link", onClick: onBack, children: t("CheckoutEmbed.Shipping.change") })] })] }), jsx("div", { className: "mt-8", children: paymentSecret && (jsx(PaymentElement, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting, publicKey: publicKey, children: jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 mt-8 px-4 sm:static sm:px-0", children: jsxs("div", { className: "bg-background flex flex-col-reverse items-center justify-between gap-2 pb-4 sm:flex-row sm:bg-transparent sm:pb-0", children: [jsxs(Button, { className: "w-full max-sm:hidden sm:w-fit", type: "button", variant: "ghost", onClick: onBack, children: [jsx(ChevronLeft, {}), t("CheckoutEmbed.Payment.back")] }), jsxs(SubmitButton, { className: "w-full max-sm:h-[52px] max-sm:text-base sm:w-fit", isValid: true, isSubmitting: isSubmitting, children: [submitButtonText, renderButtonIcon()] })] }) }) }, paymentComponentKey)) })] }));
 }
 
 function Skeleton(_a) {
@@ -42979,7 +43006,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
     };
     const renderStep = () => {
         if (step === "payment" && formData.customer && formData.shipping) {
-            return (jsx(PaymentForm, { paymentComponentKey: paymentComponentKey, locale: locale, fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, address: formatAddress(formData.customer.address), shippingFormData: formData.shipping, publicKey: publicKey }));
+            return (jsx(PaymentForm, { paymentComponentKey: paymentComponentKey, locale: locale, fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, address: formatAddress(formData.customer.address), shippingFormData: formData.shipping, publicKey: publicKey, currency: currency }));
         }
         if (step === "shipping" && formData.customer) {
             return (jsx(ShipmentsShippingMethodForm, { 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, shipments: shipments }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@betterstore/react",
-  "version": "0.6.11",
+  "version": "0.6.12",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -77,7 +77,7 @@
     "world_countries_lists": "^3.2.0",
     "zod": "^3.25.30",
     "zustand": "^5.0.5",
-    "@betterstore/sdk": "0.6.11"
+    "@betterstore/sdk": "0.6.12"
   },
   "publishConfig": {
     "access": "public"