@paykka/card-checkout-ui 0.6.0 → 0.8.0

package/dist/es/components/internal/icons/IconCard.js

@@ -0,0 +1,42 @@
+import { u } from "../../../core.js";
+import { COMMON_CLASS_NAME } from "../../../constant.js";
+import { isUndefined } from "../../../utils/is.js";
+import "../../../utils/card-brand/brands.js";
+import "../../../utils/system-info/get-browser-info.js";
+import { normalizedClass } from "../../../utils/format.js";
+const IconCard = ({ size, style, className }) => {
+  const computedSize = !isUndefined(size) ? `${size}px` : "1em";
+  return /* @__PURE__ */ u(
+    "svg",
+    {
+      width: computedSize,
+      height: computedSize,
+      viewBox: "0 0 22 22",
+      fill: "none",
+      style,
+      xmlns: "http://www.w3.org/2000/svg",
+      className: normalizedClass(COMMON_CLASS_NAME, className),
+      children: [
+        /* @__PURE__ */ u("g", { "clip-path": "url(#clip0_646_2366)", children: /* @__PURE__ */ u("g", { "clip-path": "url(#clip1_646_2366)", children: [
+          /* @__PURE__ */ u(
+            "path",
+            {
+              "fill-rule": "evenodd",
+              "clip-rule": "evenodd",
+              d: "M1.66667 8.33337C0.746192 8.33337 0 9.07957 0 10L0 11.6667H20V10C20 9.07957 19.2538 8.33337 18.3333 8.33337H1.66667ZM20 14.1667H0L0 20C0 20.9205 0.746192 21.6667 1.66667 21.6667H18.3333C19.2538 21.6667 20 20.9205 20 20V14.1667Z",
+              fill: "#1F1F1F"
+            }
+          ),
+          /* @__PURE__ */ u("rect", { x: "3.33203", y: "16.6667", width: "4.16667", height: "2.5", rx: "0.625", fill: "white" })
+        ] }) }),
+        /* @__PURE__ */ u("defs", { children: [
+          /* @__PURE__ */ u("clipPath", { id: "clip0_646_2366", children: /* @__PURE__ */ u("rect", { width: "30", height: "30", rx: "3.2", fill: "white" }) }),
+          /* @__PURE__ */ u("clipPath", { id: "clip1_646_2366", children: /* @__PURE__ */ u("rect", { width: "20", height: "13.75", fill: "white", transform: "translate(0 8.125)" }) })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  IconCard
+};

package/dist/es/config.js

@@ -1,8 +1,6 @@
 import "./utils/card-brand/brands.js";
 import "./utils/system-info/get-browser-info.js";
-import "./i18n/util.js";
 import "./core.js";
-import "./i18n/locales/index.js";
 let apiUrl = "https://checkout.aq.paykka.com";
 let cdnOrigin = "https://checkout.aq.paykka.com";
 let cdnDir = "/cp";

package/dist/es/constant.js

@@ -17,6 +17,15 @@ var PaymentMethod = /* @__PURE__ */ ((PaymentMethod2) => {
   PaymentMethod2["SEPA_DEBIT"] = "SEPA_DEBIT";
   return PaymentMethod2;
 })(PaymentMethod || {});
+var PaymentCategory = /* @__PURE__ */ ((PaymentCategory2) => {
+  PaymentCategory2["CARD"] = "card";
+  PaymentCategory2["APPLE_PAY"] = "applePay";
+  PaymentCategory2["GOOGLE_PAY"] = "googlePay";
+  PaymentCategory2["SEPA_DEBIT"] = "sepaDebit";
+  PaymentCategory2["WECHAT_PAY"] = "wechatPay";
+  PaymentCategory2["ALI_PAY"] = "aliPay";
+  return PaymentCategory2;
+})(PaymentCategory || {});
 const CardPaymentMethods = [
   "VISA",
   "MASTER_CARD",
@@ -43,8 +52,9 @@ var EAddressType = /* @__PURE__ */ ((EAddressType2) => {
   return EAddressType2;
 })(EAddressType || {});
 var SessionMode = /* @__PURE__ */ ((SessionMode2) => {
-  SessionMode2["HOSTED"] = "HOST";
-  SessionMode2["EMBEDDED"] = "EMBEDDED";
+  SessionMode2["HOSTED"] = "HOSTED";
+  SessionMode2["DROP_IN"] = "DROP_IN";
+  SessionMode2["COMPONENT"] = "COMPONENT";
   return SessionMode2;
 })(SessionMode || {});
 export {
@@ -52,6 +62,7 @@ export {
   CardPaymentMethods,
   EAddressType,
   PREFIX,
+  PaymentCategory,
   PaymentMethod,
   PaymentType,
   SessionMode

package/dist/es/core/PayKKaCheckout.js

@@ -1,62 +1,126 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
   return value;
 };
+var _config, _envConfig, _session, _componentInsts;
 import { create } from "./create.js";
 import { Session } from "./Session.js";
-import { setCheckoutConfig, setCDNUrl, setFraudDetectionEnv, setCustomLocale, setApiUrl } from "../config.js";
-const _PayKKaCheckout = class _PayKKaCheckout {
+import { setApiUrl, setCDNUrl, setFraudDetectionEnv, setCheckoutConfig, setCustomLocale } from "../config.js";
+import { PayKKaError } from "./error.js";
+import { apiEnv, cdnEnv, fraudDetectionEnv } from "./environment.js";
+import { isEmptyObject } from "../utils/is.js";
+import "../utils/card-brand/brands.js";
+import "../utils/system-info/get-browser-info.js";
+class PayKKaCheckout {
   constructor(config) {
-    __publicField(this, "config");
-    if (_PayKKaCheckout.instance) {
-      return _PayKKaCheckout.instance;
-    }
-    this.config = config;
+    __privateAdd(this, _config, void 0);
+    __privateAdd(this, _envConfig, void 0);
+    __privateAdd(this, _session, void 0);
+    __privateAdd(this, _componentInsts, []);
+    __privateSet(this, _config, config);
     this.init();
-    _PayKKaCheckout.instance = this;
   }
   init() {
-    const {
-      sandbox,
-      sessionId,
-      clientKey,
-      locale,
-      fraudDetectionEnv,
-      hidePaymentButton,
-      onPaymentMethodsReady,
-      onInitError
-    } = this.config;
-    fraudDetectionEnv && setFraudDetectionEnv(fraudDetectionEnv);
-    locale && setCustomLocale(locale);
-    setCheckoutConfig({
-      hidePaymentButton
-    });
-    if (sandbox) {
-      setApiUrl("https://checkout-sandbox.aq.paykka.com");
-      setCDNUrl("https://checkout-sandbox.aq.paykka.com/cp");
+    this.initEnv();
+    this.initLocale();
+    this.initExtraParams();
+    this.initSession();
+  }
+  initSession() {
+    const { sessionId, clientKey, onPaymentMethodsReady, onInitError } = __privateGet(this, _config);
+    if (!sessionId) {
+      onInitError == null ? void 0 : onInitError(new PayKKaError("ERROR", "SessionId is required"));
+      return;
     }
-    _PayKKaCheckout.session = new Session(sessionId, clientKey);
-    _PayKKaCheckout.session.ready().then(() => {
-      var _a;
-      const { paymentMethod = [] } = ((_a = _PayKKaCheckout.session) == null ? void 0 : _a.checkout) || {};
+    __privateSet(this, _session, new Session(sessionId, clientKey));
+    __privateGet(this, _session).ready().then(() => {
+      var _a, _b;
+      if (isEmptyObject((_a = __privateGet(this, _session)) == null ? void 0 : _a.checkout)) {
+        onInitError == null ? void 0 : onInitError(new PayKKaError("ERROR", "Checkout is empty"));
+        return;
+      }
+      const { paymentMethod = [] } = ((_b = __privateGet(this, _session)) == null ? void 0 : _b.checkout) || {};
       onPaymentMethodsReady == null ? void 0 : onPaymentMethodsReady(paymentMethod);
     }).catch((error) => {
       onInitError == null ? void 0 : onInitError(error);
-      console.log(error);
     });
   }
-  static getSession() {
-    return _PayKKaCheckout.session;
+  /**
+   * 初始化环境配置
+   * _envConfig 优先级高于 env
+   */
+  initEnv() {
+    const { env, _envConfig: _envConfig2, onInitError } = __privateGet(this, _config);
+    if (!env) {
+      onInitError == null ? void 0 : onInitError(new PayKKaError("ERROR", "Env is required"));
+      return;
+    }
+    setApiUrl((_envConfig2 == null ? void 0 : _envConfig2.api) || apiEnv[env]);
+    setCDNUrl((_envConfig2 == null ? void 0 : _envConfig2.cdn) || cdnEnv[env]);
+    setFraudDetectionEnv((_envConfig2 == null ? void 0 : _envConfig2.fraudDetection) || fraudDetectionEnv[env]);
+  }
+  initLocale() {
+    const { locale } = __privateGet(this, _config);
+    locale && setCustomLocale(locale);
+  }
+  initExtraParams() {
+    const { hidePaymentButton = false } = __privateGet(this, _config);
+    setCheckoutConfig({
+      hidePaymentButton
+    });
+  }
+  get session() {
+    return __privateGet(this, _session);
   }
+  get envConfig() {
+    return __privateGet(this, _envConfig);
+  }
+  get config() {
+    return __privateGet(this, _config);
+  }
+  /** 创建组件，把 session 作为组件的 props 传递 */
   create(component, props) {
-    return create(component, props);
+    var _a;
+    const { onSubmit, onSuccess, onError, onTimeout, onExpired } = __privateGet(this, _config);
+    const coreProps = this.getCoreProps();
+    const componentInst = create(component, {
+      onSubmit,
+      onSuccess,
+      onError,
+      onTimeout,
+      onExpired,
+      ...props,
+      ...coreProps
+    });
+    (_a = __privateGet(this, _componentInsts)) == null ? void 0 : _a.push(componentInst);
+    return componentInst;
   }
-};
-__publicField(_PayKKaCheckout, "session");
-__publicField(_PayKKaCheckout, "instance", null);
-let PayKKaCheckout = _PayKKaCheckout;
+  getCoreProps() {
+    return {
+      session: __privateGet(this, _session),
+      core: this,
+      threeDSFrame: __privateGet(this, _config).threeDSFrame
+    };
+  }
+}
+_config = new WeakMap();
+_envConfig = new WeakMap();
+_session = new WeakMap();
+_componentInsts = new WeakMap();
 export {
   PayKKaCheckout
 };

package/dist/es/core/Session.js

@@ -26,24 +26,24 @@ import "../utils/card-brand/brands.js";
 import "../utils/system-info/get-browser-info.js";
 import { generateColors } from "../utils/colors.js";
 import { createPromise } from "../utils/create-promise.js";
-import "../i18n/util.js";
 import "../core.js";
-import "../i18n/locales/index.js";
+import { PayKKaError } from "./error.js";
 import { querySession } from "./query.js";
 class Session {
   constructor(sessionId, clientKey) {
     __privateAdd(this, _init);
     __privateAdd(this, _genColors);
-    __privateAdd(this, _readyPromise, createPromise());
     __publicField(this, "sessionId");
     __publicField(this, "clientKey");
     __publicField(this, "checkout");
     __publicField(this, "colors", null);
+    __privateAdd(this, _readyPromise, createPromise());
     this.sessionId = sessionId;
     this.clientKey = clientKey;
     __privateMethod(this, _init, init_fn).call(this).then(() => __privateGet(this, _readyPromise).resolve(true)).catch((err) => {
-      console.log(err);
-      return __privateGet(this, _readyPromise).reject(false);
+      return __privateGet(this, _readyPromise).reject(
+        new PayKKaError("API_ERROR", err.message, { code: err.code })
+      );
     });
   }
   ready() {
@@ -61,7 +61,8 @@ init_fn = async function() {
 };
 _genColors = new WeakSet();
 genColors_fn = function() {
-  const { payButtonBackgroundColor } = this.checkout.theme || {};
+  var _a;
+  const { payButtonBackgroundColor } = ((_a = this.checkout) == null ? void 0 : _a.theme) || {};
   if (payButtonBackgroundColor) {
     const colors = generateColors(payButtonBackgroundColor, {
       theme: "default",

package/dist/es/core/environment.js

@@ -0,0 +1,26 @@
+const apiEnv = {
+  eu: "https://checkout.eu.paykka.com",
+  hk: "https://checkout.aq.paykka.com",
+  sandbox: "https://checkout-sandbox.aq.paykka.com"
+};
+const cdnEnv = {
+  eu: "https://checkout.eu.paykka.com/cp",
+  hk: "https://checkout.aq.paykka.com/cp",
+  sandbox: "https://checkout-sandbox.aq.paykka.com/cp"
+};
+const fraudDetectionEnv = {
+  eu: {
+    SR: "pk_live_51QSXl2G2tOepMLcRVNu0S2T6MxyB1AIgCP5g7qMQvAviQS37v0wkPhJRKqfcbTql6ZkCkGktux4ixfXuZtFy6ZpP00awbGlLEq"
+  },
+  hk: {
+    SR: "pk_live_51QSXh9Azq7GQL5iqwZNLz3KJ896MIUnai4H7H0z9DtlklJkgoH1VAlHKy382vWPqDm80nTy8MKUdJIKs0fFbTlKx006WcKWEDu"
+  },
+  sandbox: {
+    SR: "pk_test_51QaC2P5VarcojPHdg13yagk5TqrGkIkeK8I21BgQUZe8BzyRmbtmOg3dKsXjkxt6JlsjyjJMTvBH9dFMCZWRxOkt00tWQ1eHFU"
+  }
+};
+export {
+  apiEnv,
+  cdnEnv,
+  fraudDetectionEnv
+};

package/dist/es/core/error.js

@@ -0,0 +1,21 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class PayKKaError extends Error {
+  constructor(type, message, info) {
+    super(message);
+    /** 错误类型 */
+    __publicField(this, "type");
+    /** 错误代码 */
+    __publicField(this, "code");
+    this.type = type;
+    this.code = info == null ? void 0 : info.code;
+    this.cause = info == null ? void 0 : info.cause;
+  }
+}
+export {
+  PayKKaError
+};

package/dist/es/core/index.js

@@ -2,5 +2,3 @@ import "./context.js";
 import "../core.js";
 import "../utils/card-brand/brands.js";
 import "../utils/system-info/get-browser-info.js";
-import "../i18n/util.js";
-import "../i18n/locales/index.js";

package/dist/es/core/query.js

@@ -1,8 +1,6 @@
 import "../utils/card-brand/brands.js";
 import "../utils/system-info/get-browser-info.js";
-import "../i18n/util.js";
 import "../core.js";
-import "../i18n/locales/index.js";
 import { onceGetCheckoutInfo } from "../api/modules/checkout/index.js";
 async function querySession({ sessionId, clientKey }, options) {
   return onceGetCheckoutInfo({ sessionId, clientKey }, options);

package/dist/es/core.js

@@ -675,36 +675,6 @@ l$3.diffed = function(n2) {
   var t2 = n2.props, e2 = n2.__e;
   null != e2 && "textarea" === n2.type && "value" in t2 && t2.value !== e2.value && (e2.value = null == t2.value ? "" : t2.value);
 };
-function e$1(e2, n2) {
-  return n2 = n2 || {}, new Promise(function(t2, r2) {
-    var s2 = new XMLHttpRequest(), o2 = [], u2 = {}, a2 = function e3() {
-      return { ok: 2 == (s2.status / 100 | 0), statusText: s2.statusText, status: s2.status, url: s2.responseURL, text: function() {
-        return Promise.resolve(s2.responseText);
-      }, json: function() {
-        return Promise.resolve(s2.responseText).then(JSON.parse);
-      }, blob: function() {
-        return Promise.resolve(new Blob([s2.response]));
-      }, clone: e3, headers: { keys: function() {
-        return o2;
-      }, entries: function() {
-        return o2.map(function(e4) {
-          return [e4, s2.getResponseHeader(e4)];
-        });
-      }, get: function(e4) {
-        return s2.getResponseHeader(e4);
-      }, has: function(e4) {
-        return null != s2.getResponseHeader(e4);
-      } } };
-    };
-    for (var i2 in s2.open(n2.method || "get", e2, true), s2.onload = function() {
-      s2.getAllResponseHeaders().toLowerCase().replace(/^(.+?):/gm, function(e3, n3) {
-        u2[n3] || o2.push(u2[n3] = n3);
-      }), t2(a2());
-    }, s2.onerror = r2, s2.withCredentials = "include" == n2.credentials, n2.headers)
-      s2.setRequestHeader(i2, n2.headers[i2]);
-    s2.send(n2.body || null);
-  });
-}
 var __assign = function() {
   __assign = Object.assign || function __assign2(t2) {
     for (var s2, i2 = 1, n2 = arguments.length; i2 < n2; i2++) {
@@ -3917,7 +3887,7 @@ function t() {
 }
 var o = void 0;
 var h = void 0, s$1 = 0, f = 0, v = 0;
-function e(i2) {
+function e$1(i2) {
   if (void 0 !== o) {
     var t2 = i2.n;
     if (void 0 === t2 || t2.t !== o) {
@@ -4008,7 +3978,7 @@ u.prototype.peek = function() {
   }
 };
 Object.defineProperty(u.prototype, "value", { get: function() {
-  var i2 = e(this);
+  var i2 = e$1(this);
   if (void 0 !== i2)
     i2.i = this.i;
   return this.v;
@@ -4139,7 +4109,7 @@ y.prototype.N = function() {
 Object.defineProperty(y.prototype, "value", { get: function() {
   if (1 & this.f)
     throw new Error("Cycle detected");
-  var i2 = e(this);
+  var i2 = e$1(this);
   this.h();
   if (void 0 !== i2)
     i2.i = this.i;
@@ -4422,6 +4392,36 @@ function useSignal(n2) {
     return d$1(n2);
   }, []);
 }
+function e(e2, n2) {
+  return n2 = n2 || {}, new Promise(function(t2, r2) {
+    var s2 = new XMLHttpRequest(), o2 = [], u2 = {}, a2 = function e3() {
+      return { ok: 2 == (s2.status / 100 | 0), statusText: s2.statusText, status: s2.status, url: s2.responseURL, text: function() {
+        return Promise.resolve(s2.responseText);
+      }, json: function() {
+        return Promise.resolve(s2.responseText).then(JSON.parse);
+      }, blob: function() {
+        return Promise.resolve(new Blob([s2.response]));
+      }, clone: e3, headers: { keys: function() {
+        return o2;
+      }, entries: function() {
+        return o2.map(function(e4) {
+          return [e4, s2.getResponseHeader(e4)];
+        });
+      }, get: function(e4) {
+        return s2.getResponseHeader(e4);
+      }, has: function(e4) {
+        return null != s2.getResponseHeader(e4);
+      } } };
+    };
+    for (var i2 in s2.open(n2.method || "get", e2, true), s2.onload = function() {
+      s2.getAllResponseHeaders().toLowerCase().replace(/^(.+?):/gm, function(e3, n3) {
+        u2[n3] || o2.push(u2[n3] = n3);
+      }), t2(a2());
+    }, s2.onerror = r2, s2.withCredentials = "include" == n2.credentials, n2.headers)
+      s2.setRequestHeader(i2, n2.headers[i2]);
+    s2.send(n2.body || null);
+  });
+}
 export {
   A$1 as A,
   B$2 as B,
@@ -4431,7 +4431,7 @@ export {
   _$3 as _,
   b$1 as b,
   d$1 as d,
-  e$1 as e,
+  e,
   h$1 as h,
   index,
   inputToRGB,

package/dist/es/hooks/index.js

@@ -2,5 +2,3 @@ import "../utils/card-brand/brands.js";
 import "../utils/system-info/get-browser-info.js";
 import "../core.js";
 import "../core/context.js";
-import "../i18n/util.js";
-import "../i18n/locales/index.js";

package/dist/es/hooks/useBreakpoints.js

@@ -0,0 +1,57 @@
+import { h, y, T } from "../core.js";
+const breakpoints = {
+  xs: 480,
+  sm: 928,
+  md: 992,
+  lg: 1200,
+  xl: 1366,
+  xxl: 1600
+};
+const useBreakpoints = () => {
+  const [width, setWidth] = h(() => {
+    return typeof window !== "undefined" ? window.innerWidth : 0;
+  });
+  y(() => {
+    if (typeof window === "undefined")
+      return;
+    const handleResize = () => {
+      setWidth(window.innerWidth);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  const sortedEntries = T(() => {
+    return Object.entries(breakpoints).sort((a, b) => a[1] - b[1]);
+  }, [breakpoints]);
+  const { matches, current } = T(() => {
+    const matches2 = {
+      xs: false,
+      sm: false,
+      md: false,
+      lg: false,
+      xl: false,
+      xxl: false
+    };
+    let current2 = null;
+    for (let i = sortedEntries.length - 1; i >= 0; i--) {
+      const [name, value] = sortedEntries[i];
+      const isMatch = width >= value;
+      matches2[name] = isMatch;
+      if (isMatch && !current2) {
+        current2 = name;
+      }
+    }
+    return { matches: matches2, current: current2 };
+  }, [width, sortedEntries]);
+  const smaller = (breakpointName) => {
+    const threshold = breakpoints[breakpointName];
+    if (threshold === void 0) {
+      return false;
+    }
+    return width < threshold;
+  };
+  return { matches, current, smaller };
+};
+export {
+  useBreakpoints
+};

package/dist/es/hooks/useI18n.js

@@ -3,11 +3,10 @@ import { CoreContext } from "../core/context.js";
 import "../utils/card-brand/brands.js";
 import "../utils/system-info/get-browser-info.js";
 import { I18n } from "../i18n/I18n.js";
-import "../i18n/locales/index.js";
 function useI18n(locale) {
   const coreContext = x(CoreContext);
   const [_i18n] = h((coreContext == null ? void 0 : coreContext.i18n) ?? new I18n());
-  _i18n.load(locale);
+  locale && _i18n.load(locale);
   return { i18n: _i18n };
 }
 export {

package/dist/es/hooks/usePayState.js

@@ -1,31 +1,30 @@
 import { h, y } from "../core.js";
-import "../core/context.js";
-import "../utils/card-brand/brands.js";
-import "../utils/system-info/get-browser-info.js";
-import { customLocale, fraudDetectionEnv } from "../config.js";
-import { PayKKaCheckout } from "../core/PayKKaCheckout.js";
 import { getFraudDetectionInstance } from "../out/fraud-detection.js";
 import { useI18n } from "./useI18n.js";
-function usePayState() {
+import { customLocale, fraudDetectionEnv } from "../config.js";
+import "../utils/card-brand/brands.js";
+import { getBrowserInfo } from "../utils/system-info/get-browser-info.js";
+import { getRealLocale } from "../i18n/util.js";
+function usePayState(session) {
   const [validated, setValidated] = h(false);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
   const [errorMsg, setErrorMsg] = h("");
-  const [session, setSession] = h(null);
   const [sessionReady, setSessionReady] = h(false);
   const [fraudDetection, setFraudDetection] = h(null);
-  setSession(PayKKaCheckout.getSession());
-  const { i18n } = useI18n(customLocale);
+  const { i18n } = useI18n();
   y(() => {
-    if (session) {
-      session.ready().then(() => {
-        setSessionReady(true);
-        i18n.load(session.checkout.locale || customLocale);
-        const fraudDetection2 = getFraudDetectionInstance(fraudDetectionEnv);
-        setFraudDetection(fraudDetection2);
-        fraudDetection2 == null ? void 0 : fraudDetection2.createFraudDetection();
-      });
-    }
-  }, [session]);
+    session.ready().then(() => {
+      var _a;
+      setSessionReady(true);
+      const locale = getRealLocale(
+        customLocale || ((_a = session.checkout) == null ? void 0 : _a.locale) || getBrowserInfo().language
+      );
+      i18n.load(locale);
+      const fraudDetection2 = getFraudDetectionInstance(fraudDetectionEnv);
+      setFraudDetection(fraudDetection2);
+      fraudDetection2 == null ? void 0 : fraudDetection2.createFraudDetection();
+    });
+  }, []);
   return {
     validated,
     setValidated,
@@ -33,12 +32,9 @@ function usePayState() {
     setSubmitButtonStatus,
     errorMsg,
     setErrorMsg,
-    session,
-    setSession,
-    sessionReady,
-    setSessionReady,
     i18n,
-    fraudDetection
+    fraudDetection,
+    sessionReady
   };
 }
 export {

package/dist/es/i18n/index.js

@@ -1,5 +1,3 @@
 import "../utils/card-brand/brands.js";
 import "../utils/system-info/get-browser-info.js";
-import "./util.js";
 import "../core.js";
-import "./locales/index.js";

package/dist/es/i18n/locales/de-DE.js

@@ -1,4 +1,7 @@
 const deDE = {
+  // Drop In
+  "dropIn.card.label": "Bankkarte",
+  "dropIn.otherPaymentMethod": "Andere Zahlungsmethode",
   // card number
   "card.cardNumber.label": "Kartennummer",
   "card.cardNumber.incomplete": "Ihre Kartennummer ist unvollständig",
@@ -21,6 +24,8 @@ const deDE = {
   "card.cardSelector.change": "Ändern",
   "card.cardSelector.useOtherCard": "Andere Karte verwenden",
   "card.storeInfo": "Meine Kartendaten für zukünftige Nutzung speichern",
+  // card info
+  "card.info.label": "Kartendaten",
   // common
   "common.pay": "Jetzt kaufen",
   "common.payProcessing": "Wird bearbeitet...",
@@ -33,6 +38,8 @@ const deDE = {
   "common.noData": "Keine Daten",
   "common.netError": "Netzwerkfehler",
   "common.unknownError": "Unbekannter Fehler",
+  "common.cancel": "Abbrechen",
+  "common.confirm": "Bestätigen",
   // common email
   "common.email.label": "E-Mail",
   "common.email.incomplete": "Bitte geben Sie Ihre E-Mail-Adresse ein",
@@ -53,7 +60,13 @@ const deDE = {
   // sepa
   "sepa.iban.label": "IBAN",
   "sepa.iban.placeholder": "DE00 0000 0000 0000 0000 00",
-  "sepa.iban.invalid": "Die eingegebene IBAN ist ungültig"
+  "sepa.iban.invalid": "Die eingegebene IBAN ist ungültig",
+  // threeDS
+  "threeDS.paymentIncomplete": "Ihre letzte Zahlung ist unvollständig,",
+  "threeDS.completeFirst": "bitte vervollständigen Sie zunächst die Bearbeitung.",
+  "threeDS.authenticationSuccessful": "Authentifizierung erfolgreich,",
+  "threeDS.authenticationFailed": "Authentifizierung fehlgeschlagen,",
+  "threeDS.returnToCheckout": "Rückkehr erfolgt in Kürze."
 };
 export {
   deDE as default