@paykka/card-checkout-ui 0.5.17 → 0.6.0

package/dist/es/components/index.js

@@ -9,10 +9,12 @@ import "../core/context.js";
 import "../i18n/util.js";
 import "../i18n/locales/index.js";
 import "./CardExpireDateField/index.js";
+import "./internal/Form/type.js";
 import "./internal/Form/context.js";
 import "./internal/Form/FormItem.js";
 import "./internal/Form/Form.js";
 import "./internal/Input/Input.js";
+import "./internal/Input/type.js";
 import "./CardNumberField/index.js";
 import "./CardSecurityCodeField/index.js";
 import "./CardSelector/index.js";
@@ -25,3 +27,5 @@ import "./WechatPay/index.js";
 import "./ApplePay/index.js";
 import "./GooglePay/index.js";
 import "./Sepa/index.js";
+import "./EncryptedCard/index.js";
+import "./CombinedEncryptedField/index.js";

package/dist/es/components/internal/Form/FormItem.js

@@ -1,18 +1,14 @@
 import { w, F, x, h, y, u } from "../../../core.js";
 import "./form-item.js";
 import { COMMON_CLASS_NAME } from "../../../constant.js";
-import { useBEM } from "../../../hooks/useBEM.js";
-import "../../../core/context.js";
 import { isNil } from "../../../utils/is.js";
 import "../../../utils/card-brand/brands.js";
 import "../../../utils/system-info/get-browser-info.js";
 import { normalizedClass } from "../../../utils/format.js";
 import { set } from "../../../utils/obj.js";
-import "../../../i18n/util.js";
-import "../../../i18n/locales/index.js";
 import { FormItemContext, FormContext } from "./context.js";
+import { formItemBEM, formItemLabelClassName, formItemErrorMessageClassName } from "./type.js";
 import { getActiveRules } from "./util.js";
-const { bem } = useBEM("form-item");
 const isEmpty = (value) => isNil(value) || value === "";
 const FormItem = w((props, ref) => {
   const {
@@ -23,7 +19,8 @@ const FormItem = w((props, ref) => {
     onValidationStatusChange,
     className,
     style,
-    showErrorMessage = true
+    showErrorMessage = true,
+    showLabel = true
   } = props;
   F(ref, () => ({
     validate: internalValidate,
@@ -136,24 +133,31 @@ const FormItem = w((props, ref) => {
       path && (formContext == null ? void 0 : formContext.setFormItems((prev) => prev.filter((item) => item !== internalRef)));
     };
   }, []);
-  return /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem(), className), style, children: [
-    !isNil(label) && /* @__PURE__ */ u("div", { className: bem("label"), children: label }),
-    /* @__PURE__ */ u(
-      FormItemContext.Provider,
-      {
-        value: {
-          rule: props.rule,
-          validateBlur,
-          validateChange,
-          resetValidation,
-          validationResult,
-          setValue
-        },
-        children
-      }
-    ),
-    showErrorMessage && validationResult.status === "error" && /* @__PURE__ */ u("div", { className: bem("error-text"), children: getFirstError().message })
-  ] });
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: normalizedClass(COMMON_CLASS_NAME, formItemBEM.bem(), className),
+      style,
+      children: [
+        showLabel && !isNil(label) && /* @__PURE__ */ u("div", { className: formItemLabelClassName, children: label }),
+        /* @__PURE__ */ u(
+          FormItemContext.Provider,
+          {
+            value: {
+              rule: props.rule,
+              validateBlur,
+              validateChange,
+              resetValidation,
+              validationResult,
+              setValue
+            },
+            children
+          }
+        ),
+        showErrorMessage && validationResult.status === "error" && /* @__PURE__ */ u("div", { className: formItemErrorMessageClassName, children: getFirstError().message })
+      ]
+    }
+  );
 });
 export {
   FormItem

package/dist/es/components/internal/Form/index.js

@@ -1,3 +1,4 @@
+import "./type.js";
 import "./context.js";
 import "./FormItem.js";
 import "./Form.js";

package/dist/es/components/internal/Form/type.js

@@ -1 +1,15 @@
-
+import { useBEM } from "../../../hooks/useBEM.js";
+import "../../../core.js";
+import "../../../core/context.js";
+import "../../../utils/card-brand/brands.js";
+import "../../../utils/system-info/get-browser-info.js";
+import "../../../i18n/util.js";
+import "../../../i18n/locales/index.js";
+const formItemBEM = useBEM("form-item");
+const formItemLabelClassName = formItemBEM.bem("label");
+const formItemErrorMessageClassName = formItemBEM.bem("error-text");
+export {
+  formItemBEM,
+  formItemErrorMessageClassName,
+  formItemLabelClassName
+};

package/dist/es/components/internal/Input/Input.js

@@ -1,19 +1,16 @@
 import { w, F, x, h, A, w$1, u } from "../../../core.js";
 import "./input2.js";
 import { COMMON_CLASS_NAME } from "../../../constant.js";
-import { useBEM } from "../../../hooks/useBEM.js";
-import "../../../core/context.js";
 import "../../../utils/card-brand/brands.js";
 import "../../../utils/system-info/get-browser-info.js";
 import { normalizedClass } from "../../../utils/format.js";
-import "../../../i18n/util.js";
-import "../../../i18n/locales/index.js";
+import "../Form/type.js";
 import { FormItemContext } from "../Form/context.js";
 import "../Form/FormItem.js";
 import "../Form/Form.js";
 import { IconError } from "../icons/IconError.js";
 import { IconSuccess } from "../icons/IconSuccess.js";
-const { bem } = useBEM("input");
+import { inputBEM } from "./type.js";
 const statusIconMap = {
   error: IconError,
   success: IconSuccess
@@ -74,13 +71,13 @@ const Input = w((props, ref) => {
     formItemContext == null ? void 0 : formItemContext.validateChange(value);
   }
   const inputWrapperClass = w$1(() => {
-    const inputWrapper = bem("input-wrapper", [
+    const inputWrapper = inputBEM.bem("input-wrapper", [
       status,
       {
         focus: isFocus
       }
     ]);
-    const inputWrapperDisabled = bem("input-wrapper-disabled");
+    const inputWrapperDisabled = inputBEM.bem("input-wrapper-disabled");
     return disabled ? `${inputWrapper} ${inputWrapperDisabled}` : `${inputWrapper}`;
   });
   function onCompositionStart(e) {
@@ -92,16 +89,17 @@ const Input = w((props, ref) => {
     isComposing = false;
     onInput(e);
   }
-  return /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem(), inputClassName), style, onClick: () => {
+  return /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, inputBEM.bem(), inputClassName), onClick: () => {
     var _a;
     return (_a = inputRef.current) == null ? void 0 : _a.focus();
-  }, children: /* @__PURE__ */ u("div", { className: inputWrapperClass, children: [
+  }, children: /* @__PURE__ */ u("div", { className: `${inputWrapperClass}`, style, children: [
+    !!props.leftIcon && /* @__PURE__ */ u("div", { class: inputBEM.bem("left-icon"), children: props.leftIcon }),
     children ? children : /* @__PURE__ */ u(
       "input",
       {
         ref: inputRef,
         ...props,
-        class: bem("input"),
+        class: inputBEM.bem("input"),
         onFocus,
         onBlur,
         onInput,
@@ -110,7 +108,7 @@ const Input = w((props, ref) => {
         autocomplete: "off"
       }
     ),
-    !!rightIcon && /* @__PURE__ */ u("div", { class: bem("right-icon"), children: rightIcon })
+    !!rightIcon && /* @__PURE__ */ u("div", { class: inputBEM.bem("right-icon"), children: rightIcon })
   ] }) });
 });
 export {

package/dist/es/components/internal/Input/index.js

@@ -1 +1,2 @@
 import "./Input.js";
+import "./type.js";

package/dist/es/components/internal/Input/type.js

@@ -1 +1,13 @@
-
+import { useBEM } from "../../../hooks/useBEM.js";
+import "../../../core.js";
+import "../../../core/context.js";
+import "../../../utils/card-brand/brands.js";
+import "../../../utils/system-info/get-browser-info.js";
+import "../../../i18n/util.js";
+import "../../../i18n/locales/index.js";
+const inputBEM = useBEM("input");
+const inputWrapperClassName = inputBEM.bem("input-wrapper");
+export {
+  inputBEM,
+  inputWrapperClassName
+};

package/dist/es/components/internal/Select/Select.js

@@ -6,11 +6,13 @@ import "../../../utils/card-brand/brands.js";
 import "../../../utils/system-info/get-browser-info.js";
 import "../../../i18n/util.js";
 import "../../../i18n/locales/index.js";
+import "../Form/type.js";
 import { FormItemContext } from "../Form/context.js";
 import "../Form/FormItem.js";
 import "../Form/Form.js";
 import { IconArrowDown } from "../icons/IconArrowDown.js";
 import { Input } from "../Input/Input.js";
+import "../Input/type.js";
 import { SelectMenu } from "./SelectMenu.js";
 import { SelectMenuItem } from "./SelectMenuItem.js";
 const { bem } = useBEM("select");

package/dist/es/config.js

@@ -7,9 +7,10 @@ let apiUrl = "https://checkout.aq.paykka.com";
 let cdnOrigin = "https://checkout.aq.paykka.com";
 let cdnDir = "/cp";
 let cdnUrl = `${cdnOrigin}${cdnDir}`;
-let radarEnv = void 0;
+let fraudDetectionEnv = void 0;
 let customReqHeaders = {};
 let customLocale = void 0;
+let hidePaymentButton = false;
 function setApiUrl(url) {
   apiUrl = url;
 }
@@ -17,10 +18,10 @@ function setCDNUrl(url) {
   const urlInfo = new URL(url);
   cdnOrigin = urlInfo.origin;
   cdnDir = urlInfo.pathname;
-  cdnUrl = `${cdnOrigin}${cdnDir}`;
+  cdnUrl = `${cdnOrigin}${cdnDir === "/" ? "" : cdnDir}`;
 }
-function setRadarEnv(env) {
-  radarEnv = env;
+function setFraudDetectionEnv(env) {
+  fraudDetectionEnv = env;
 }
 function setCustomReqHeaders(headers) {
   customReqHeaders = headers;
@@ -28,16 +29,21 @@ function setCustomReqHeaders(headers) {
 function setCustomLocale(locale) {
   customLocale = locale;
 }
+function setCheckoutConfig(params) {
+  hidePaymentButton = params.hidePaymentButton || false;
+}
 export {
   apiUrl,
   cdnOrigin,
   cdnUrl,
   customLocale,
   customReqHeaders,
-  radarEnv,
+  fraudDetectionEnv,
+  hidePaymentButton,
   setApiUrl,
   setCDNUrl,
+  setCheckoutConfig,
   setCustomLocale,
   setCustomReqHeaders,
-  setRadarEnv
+  setFraudDetectionEnv
 };

package/dist/es/constant.js

@@ -17,6 +17,15 @@ var PaymentMethod = /* @__PURE__ */ ((PaymentMethod2) => {
   PaymentMethod2["SEPA_DEBIT"] = "SEPA_DEBIT";
   return PaymentMethod2;
 })(PaymentMethod || {});
+const CardPaymentMethods = [
+  "VISA",
+  "MASTER_CARD",
+  "JCB",
+  "AMEX",
+  "DINERS_CLUB",
+  "DISCOVER"
+  /* DISCOVER */
+];
 var PaymentType = /* @__PURE__ */ ((PaymentType2) => {
   PaymentType2["PURCHASE"] = "PURCHASE";
   PaymentType2["PREPARE_AUTHORIZE"] = "PREPARE_AUTHORIZE";
@@ -40,6 +49,7 @@ var SessionMode = /* @__PURE__ */ ((SessionMode2) => {
 })(SessionMode || {});
 export {
   COMMON_CLASS_NAME,
+  CardPaymentMethods,
   EAddressType,
   PREFIX,
   PaymentMethod,

package/dist/es/core/PayKKaCheckout.js

@@ -0,0 +1,62 @@
+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;
+};
+import { create } from "./create.js";
+import { Session } from "./Session.js";
+import { setCheckoutConfig, setCDNUrl, setFraudDetectionEnv, setCustomLocale, setApiUrl } from "../config.js";
+const _PayKKaCheckout = class _PayKKaCheckout {
+  constructor(config) {
+    __publicField(this, "config");
+    if (_PayKKaCheckout.instance) {
+      return _PayKKaCheckout.instance;
+    }
+    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");
+    }
+    _PayKKaCheckout.session = new Session(sessionId, clientKey);
+    _PayKKaCheckout.session.ready().then(() => {
+      var _a;
+      const { paymentMethod = [] } = ((_a = _PayKKaCheckout.session) == null ? void 0 : _a.checkout) || {};
+      onPaymentMethodsReady == null ? void 0 : onPaymentMethodsReady(paymentMethod);
+    }).catch((error) => {
+      onInitError == null ? void 0 : onInitError(error);
+      console.log(error);
+    });
+  }
+  static getSession() {
+    return _PayKKaCheckout.session;
+  }
+  create(component, props) {
+    return create(component, props);
+  }
+};
+__publicField(_PayKKaCheckout, "session");
+__publicField(_PayKKaCheckout, "instance", null);
+let PayKKaCheckout = _PayKKaCheckout;
+export {
+  PayKKaCheckout
+};

package/dist/es/core/query.js

@@ -5,12 +5,7 @@ import "../core.js";
 import "../i18n/locales/index.js";
 import { onceGetCheckoutInfo } from "../api/modules/checkout/index.js";
 async function querySession({ sessionId, clientKey }, options) {
-  try {
-    return await onceGetCheckoutInfo({ sessionId, clientKey }, options);
-  } catch (error) {
-    console.log("[PayKKa Checkout UI]:", error);
-    return {};
-  }
+  return onceGetCheckoutInfo({ sessionId, clientKey }, options);
 }
 export {
   querySession

package/dist/es/core.js

@@ -675,6 +675,36 @@ 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++) {
@@ -3887,7 +3917,7 @@ function t() {
 }
 var o = void 0;
 var h = void 0, s$1 = 0, f = 0, v = 0;
-function e$1(i2) {
+function e(i2) {
   if (void 0 !== o) {
     var t2 = i2.n;
     if (void 0 === t2 || t2.t !== o) {
@@ -3978,7 +4008,7 @@ u.prototype.peek = function() {
   }
 };
 Object.defineProperty(u.prototype, "value", { get: function() {
-  var i2 = e$1(this);
+  var i2 = e(this);
   if (void 0 !== i2)
     i2.i = this.i;
   return this.v;
@@ -4109,7 +4139,7 @@ y.prototype.N = function() {
 Object.defineProperty(y.prototype, "value", { get: function() {
   if (1 & this.f)
     throw new Error("Cycle detected");
-  var i2 = e$1(this);
+  var i2 = e(this);
   this.h();
   if (void 0 !== i2)
     i2.i = this.i;
@@ -4392,36 +4422,6 @@ 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,
+  e$1 as e,
   h$1 as h,
   index,
   inputToRGB,

package/dist/es/hooks/useI18n.js

@@ -7,7 +7,7 @@ import "../i18n/locales/index.js";
 function useI18n(locale) {
   const coreContext = x(CoreContext);
   const [_i18n] = h((coreContext == null ? void 0 : coreContext.i18n) ?? new I18n());
-  locale && _i18n.load(locale);
+  _i18n.load(locale);
   return { i18n: _i18n };
 }
 export {

package/dist/es/hooks/usePayState.js

@@ -2,34 +2,27 @@ 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 { Session } from "../core/Session.js";
-import { customLocale, radarEnv } from "../config.js";
-import { getPayKKaRadarInstance } from "../out/radar.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";
-let _session;
-function usePayState(props) {
+function usePayState() {
   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 [payKKaRadar, setPayKKaRadar] = h(null);
-  y(() => {
-    setSessionReady(false);
-    if (!_session) {
-      _session = new Session(props.sessionId, props.clientKey);
-    }
-    setSession(_session);
-    _session.ready().then(() => setSessionReady(true)).catch(() => setSessionReady(false));
-  }, [props.sessionId]);
+  const [fraudDetection, setFraudDetection] = h(null);
+  setSession(PayKKaCheckout.getSession());
   const { i18n } = useI18n(customLocale);
   y(() => {
     if (session) {
       session.ready().then(() => {
+        setSessionReady(true);
         i18n.load(session.checkout.locale || customLocale);
-        const payKKaRadar2 = getPayKKaRadarInstance(radarEnv);
-        setPayKKaRadar(payKKaRadar2);
-        payKKaRadar2 == null ? void 0 : payKKaRadar2.createPayKKaRadar();
+        const fraudDetection2 = getFraudDetectionInstance(fraudDetectionEnv);
+        setFraudDetection(fraudDetection2);
+        fraudDetection2 == null ? void 0 : fraudDetection2.createFraudDetection();
       });
     }
   }, [session]);
@@ -45,7 +38,7 @@ function usePayState(props) {
     sessionReady,
     setSessionReady,
     i18n,
-    payKKaRadar
+    fraudDetection
   };
 }
 export {

package/dist/es/index.js

@@ -15,13 +15,16 @@ import { GooglePay } from "./components/GooglePay/index.js";
 import { SecuredIframe } from "./components/SecuredIframe/index.js";
 import { Sepa } from "./components/Sepa/index.js";
 import { IBANField } from "./components/CardIBANField/index.js";
+import { EEncryptedCardType, ENCRYPTED_CARD_ITEM_ATTR, ENCRYPTED_CARD_WRAPPER_ID, EncryptedCard, PayKKaEncryptedCard } from "./components/EncryptedCard/index.js";
+import { CombinedEncryptedField } from "./components/CombinedEncryptedField/index.js";
 import "./core/context.js";
 import { create } from "./core/create.js";
 import { Session } from "./core/Session.js";
 import { querySession } from "./core/query.js";
+import { PayKKaCheckout } from "./core/PayKKaCheckout.js";
 import { I18n } from "./i18n/I18n.js";
 import { LocaleKey } from "./i18n/locales/index.js";
-import { setApiUrl, setCDNUrl, setCustomLocale, setCustomReqHeaders, setRadarEnv } from "./config.js";
+import { setApiUrl, setCDNUrl, setCheckoutConfig, setCustomLocale, setCustomReqHeaders, setFraudDetectionEnv } from "./config.js";
 import "./utils/card-brand/brands.js";
 import { getFingerprint } from "./utils/system-info/finger-print.js";
 import "./utils/system-info/get-browser-info.js";
@@ -36,10 +39,17 @@ export {
   CardNumberField,
   CardSecurityCodeField,
   CardSelector,
+  CombinedEncryptedField,
+  EEncryptedCardType,
+  ENCRYPTED_CARD_ITEM_ATTR,
+  ENCRYPTED_CARD_WRAPPER_ID,
+  EncryptedCard,
   GooglePay,
   I18n,
   IBANField,
   LocaleKey,
+  PayKKaCheckout,
+  PayKKaEncryptedCard,
   SecuredIframe,
   Sepa,
   Session,
@@ -50,7 +60,8 @@ export {
   querySession,
   setApiUrl,
   setCDNUrl,
+  setCheckoutConfig,
   setCustomLocale,
   setCustomReqHeaders,
-  setRadarEnv
+  setFraudDetectionEnv
 };