@paykka/card-checkout-ui 0.5.17 → 0.7.0

package/dist/es/components/EncryptedCard/index.js

@@ -0,0 +1,408 @@
+import { setApiUrl, setCDNUrl } from "../../config.js";
+import { CoreContext } from "../../core/context.js";
+import { create } from "../../core/create.js";
+import "../../utils/card-brand/brands.js";
+import { getBrowserInfo } from "../../utils/system-info/get-browser-info.js";
+import { w, F, h, A, y, u } from "../../core.js";
+import { useBEM } from "../../hooks/useBEM.js";
+import { useI18n } from "../../hooks/useI18n.js";
+import { defaultInputStyleConfig } from "../../types/index.js";
+import { intersection } from "../../utils/index.js";
+import { EFieldType, SecuredFieldsProvider } from "../SecuredFieldsProvider/index.js";
+import { CardNumberField } from "../CardNumberField/index.js";
+import { CardExpireDateField } from "../CardExpireDateField/index.js";
+import { CardSecurityCodeField } from "../CardSecurityCodeField/index.js";
+import { verifyClientKey } from "../../api/modules/encrypted-card/index.js";
+import { formItemLabelClassName, formItemErrorMessageClassName } from "../internal/Form/type.js";
+import "../internal/Form/context.js";
+import "../internal/Form/FormItem.js";
+import "../internal/Form/Form.js";
+import { CombinedCardInfo } from "../CombinedCardInfo/index.js";
+import "../internal/Input/Input.js";
+import { inputWrapperClassName } from "../internal/Input/type.js";
+import { separateInputStyle, genComponentStyle, loadStyle } from "../../utils/style.js";
+import { createPromise } from "../../utils/create-promise.js";
+const ENCRYPTED_CARD_WRAPPER_ID = "encryptedCardWrapper";
+const ENCRYPTED_CARD_ITEM_ATTR = "data-eci";
+var EEncryptedCardType = /* @__PURE__ */ ((EEncryptedCardType2) => {
+  EEncryptedCardType2["CARD"] = "card";
+  EEncryptedCardType2["CARD_NUMBER"] = "cardNumber";
+  EEncryptedCardType2["CVV"] = "securityCode";
+  EEncryptedCardType2["EXPIRE_DATE"] = "expiryDate";
+  return EEncryptedCardType2;
+})(EEncryptedCardType || {});
+const { bem } = useBEM("encrypted");
+const cvvClassName = bem("cvv");
+const cardNumberClassName = bem("card-number");
+const expireDateClassName = bem("expire-date");
+const combinedEncryptedFieldClassName = bem("combined-encrypted-field");
+const encryptedCardStyleId = "encryptedCardStyle";
+const EncryptedCard = w((props, ref) => {
+  const { brands, locale, clientKey, merchantId, sandbox, styles, showLabel = true } = props;
+  F(ref, () => ({
+    encrypt: () => {
+      var _a;
+      validatePromise.current = createPromise();
+      Object.keys(fieldValidStatusMap.current).forEach((key) => {
+        fieldValidStatusMap.current[key] = null;
+      });
+      (_a = SFPRef.current) == null ? void 0 : _a.validate();
+      validatePromise.current.then(() => {
+        var _a2;
+        console.log("校验通过");
+        (_a2 = SFPRef.current) == null ? void 0 : _a2.encryptCard({
+          merchantId,
+          clientKey
+        });
+      }).catch(() => {
+        console.log("校验失败");
+      });
+    }
+  }));
+  const { i18n } = useI18n(locale || getBrowserInfo().language);
+  const [single, setSingle] = h(false);
+  const [showEncryptedCard, setShowEncryptedCard] = h(false);
+  const [isReady, setIsReady] = h(false);
+  const [supportedBrands, setSupportedBrands] = h([]);
+  const [targetElement, setTargetElement] = h(null);
+  const [inputStyle, setInputStyle] = h({});
+  const wrapperDomMap = A({
+    [EEncryptedCardType.CARD]: null,
+    [EEncryptedCardType.CARD_NUMBER]: null,
+    [EEncryptedCardType.CVV]: null,
+    [EEncryptedCardType.EXPIRE_DATE]: null
+  });
+  const SFPRef = A(null);
+  const combinedEncryptedFieldComp = A(null);
+  const cardNumberFieldComp = A(null);
+  const cardExpireDateFieldComp = A(null);
+  const cardSecurityCodeFieldComp = A(null);
+  const combinedEncryptedFieldRef = A(null);
+  const cardNumberFieldRef = A(null);
+  const cardExpireDateFieldRef = A(null);
+  const cardSecurityCodeFieldRef = A(null);
+  const fieldRefMap = {
+    [EFieldType.CARD_NUMBER]: cardNumberFieldRef,
+    [EFieldType.CVV]: cardSecurityCodeFieldRef,
+    [EFieldType.EXPIRE_DATE]: cardExpireDateFieldRef
+  };
+  const processStyles = () => {
+    if (!styles) {
+      return;
+    }
+    const { input, label, errorMessage, inputWrapper } = separateInputStyle(styles);
+    input && setInputStyle(input);
+    if (!document.querySelector(`style#${encryptedCardStyleId}`)) {
+      const parentId = ENCRYPTED_CARD_WRAPPER_ID;
+      const inputWrapperPrefix = `#${parentId} .${inputWrapperClassName}`;
+      const labelPrefix = `#${parentId} .${formItemLabelClassName}`;
+      const errorMessagePrefix = `#${parentId} .${formItemErrorMessageClassName}`;
+      const inputWrapperStyle = genComponentStyle(
+        Object.entries(inputWrapper || {}).map(([type, style2]) => {
+          return {
+            selector: type === "base" ? inputWrapperPrefix : `${inputWrapperPrefix}--${type}`,
+            style: style2
+          };
+        })
+      );
+      const labelStyle = genComponentStyle(
+        Object.entries(label || {}).map(([type, style2]) => {
+          return {
+            selector: type === "base" ? labelPrefix : `${labelPrefix}--${type}`,
+            style: style2
+          };
+        })
+      );
+      const errorMessageStyle = genComponentStyle([
+        {
+          selector: errorMessagePrefix,
+          style: errorMessage
+        }
+      ]);
+      const style = `${inputWrapperStyle}${labelStyle}${errorMessageStyle}`;
+      console.log(style);
+      loadStyle(style, { id: encryptedCardStyleId });
+    }
+  };
+  const classNameMap = {
+    [EFieldType.CARD_NUMBER]: cardNumberClassName,
+    [EFieldType.CVV]: cvvClassName,
+    [EFieldType.EXPIRE_DATE]: expireDateClassName
+  };
+  const updateFieldStyles = (fieldType, type) => {
+    var _a, _b;
+    const className = single ? combinedEncryptedFieldClassName : classNameMap[fieldType];
+    const parent = document.querySelector(`#${ENCRYPTED_CARD_WRAPPER_ID}`);
+    if (!parent) {
+      return;
+    }
+    const inputWrapper = (_a = parent.querySelector(`.${className}`)) == null ? void 0 : _a.querySelector(`.${inputWrapperClassName}`);
+    const label = (_b = parent.querySelector(`.${className}`)) == null ? void 0 : _b.querySelector(`.${formItemLabelClassName}`);
+    if (type === "focus") {
+      inputWrapper == null ? void 0 : inputWrapper.classList.add(`${inputWrapperClassName}--focus`);
+      label == null ? void 0 : label.classList.add(`.${formItemLabelClassName}--focus`);
+    } else if (type === "blur") {
+      inputWrapper == null ? void 0 : inputWrapper.classList.remove(`${inputWrapperClassName}--focus`);
+      label == null ? void 0 : label.classList.remove(`.${formItemLabelClassName}--focus`);
+    } else if (type === "valid") {
+      inputWrapper == null ? void 0 : inputWrapper.classList.add(`${inputWrapperClassName}--success`);
+      label == null ? void 0 : label.classList.add(`.${formItemLabelClassName}--success`);
+    } else if (type === "invalid") {
+      inputWrapper == null ? void 0 : inputWrapper.classList.add(`${inputWrapperClassName}--error`);
+      label == null ? void 0 : label.classList.add(`.${formItemLabelClassName}--error`);
+    } else {
+      inputWrapper == null ? void 0 : inputWrapper.classList.remove(`${inputWrapperClassName}--success`);
+      inputWrapper == null ? void 0 : inputWrapper.classList.remove(`${inputWrapperClassName}--error`);
+      label == null ? void 0 : label.classList.remove(`.${formItemLabelClassName}--success`);
+      label == null ? void 0 : label.classList.remove(`.${formItemLabelClassName}--error`);
+    }
+  };
+  y(() => {
+    initEncryptedCard();
+  }, []);
+  const authorize = async () => {
+    if (!clientKey) {
+      throw new Error("clientKey is required");
+    }
+    return verifyClientKey(clientKey, merchantId);
+  };
+  const getBrands = (realBrands) => {
+    if (!(brands == null ? void 0 : brands.length)) {
+      return realBrands;
+    }
+    const bothBrands = intersection(brands, realBrands || []);
+    if (!bothBrands.length) {
+      throw new Error("No available card brands");
+    }
+    return bothBrands;
+  };
+  const initEncryptedCard = async () => {
+    var _a, _b;
+    if (sandbox) {
+      setApiUrl("https://checkout-sandbox.aq.paykka.com");
+      setCDNUrl("https://checkout-sandbox.aq.paykka.com/cp");
+    }
+    let authRes = await authorize();
+    if (authRes) {
+      const supportedBrands2 = getBrands(authRes.brands);
+      setSupportedBrands(supportedBrands2);
+      (_a = props.onReady) == null ? void 0 : _a.call(props, true, { brands: supportedBrands2 });
+    } else {
+      (_b = props.onReady) == null ? void 0 : _b.call(props, false);
+      return;
+    }
+    const encryptedCardWrapper = document.getElementById(ENCRYPTED_CARD_WRAPPER_ID);
+    setTargetElement(encryptedCardWrapper);
+    if (!encryptedCardWrapper) {
+      return;
+    }
+    const getEncryptedCardItems = (attr) => {
+      return encryptedCardWrapper.querySelector(
+        `[${ENCRYPTED_CARD_ITEM_ATTR}="${attr}"]`
+      );
+    };
+    const cardElement = getEncryptedCardItems(EEncryptedCardType.CARD);
+    if (cardElement) {
+      setSingle(true);
+      setShowEncryptedCard(true);
+      wrapperDomMap.current[EEncryptedCardType.CARD] = cardElement;
+    } else {
+      const cardNumberElement = getEncryptedCardItems(EEncryptedCardType.CARD_NUMBER);
+      const cvvElement = getEncryptedCardItems(EEncryptedCardType.CVV);
+      const expireDateElement = getEncryptedCardItems(EEncryptedCardType.EXPIRE_DATE);
+      if (cardNumberElement && cvvElement && expireDateElement) {
+        setSingle(false);
+        setShowEncryptedCard(true);
+        wrapperDomMap.current[EEncryptedCardType.CARD_NUMBER] = cardNumberElement;
+        wrapperDomMap.current[EEncryptedCardType.CVV] = cvvElement;
+        wrapperDomMap.current[EEncryptedCardType.EXPIRE_DATE] = expireDateElement;
+      }
+    }
+    processStyles();
+  };
+  y(() => {
+    showEncryptedCard && embedEncryptedCard();
+  }, [showEncryptedCard]);
+  const embedEncryptedCard = () => {
+    if (single) {
+      const cardWrapper = wrapperDomMap.current[EEncryptedCardType.CARD];
+      const combinedEncryptedField = create(CombinedCardInfo, {
+        supportedCardBrands: supportedBrands,
+        security: true,
+        className: combinedEncryptedFieldClassName
+      });
+      combinedEncryptedFieldComp.current = combinedEncryptedField;
+      combinedEncryptedFieldRef.current = combinedEncryptedField.ref;
+      combinedEncryptedField.mount(cardWrapper);
+    } else {
+      const cardNumberWrapper = wrapperDomMap.current[EEncryptedCardType.CARD_NUMBER];
+      const cardNumberField = create(CardNumberField, {
+        supportedCardBrands: supportedBrands,
+        security: true,
+        showLabel,
+        className: cardNumberClassName
+      });
+      cardNumberFieldComp.current = cardNumberField;
+      cardNumberFieldRef.current = cardNumberField.ref;
+      cardNumberField.mount(cardNumberWrapper);
+      const cvvWrapper = wrapperDomMap.current[EEncryptedCardType.CVV];
+      const cvvField = create(CardSecurityCodeField, {
+        security: true,
+        showLabel,
+        className: cvvClassName
+      });
+      cardSecurityCodeFieldComp.current = cvvField;
+      cardSecurityCodeFieldRef.current = cvvField.ref;
+      cvvField.mount(cvvWrapper);
+      const expireDateWrapper = wrapperDomMap.current[EEncryptedCardType.EXPIRE_DATE];
+      const expireDateField = create(CardExpireDateField, {
+        security: true,
+        showLabel,
+        className: expireDateClassName
+      });
+      cardExpireDateFieldComp.current = expireDateField;
+      cardExpireDateFieldRef.current = expireDateField.ref;
+      expireDateField.mount(expireDateWrapper);
+    }
+    setIsReady(true);
+  };
+  const onFieldsFocus = (data) => {
+    var _a, _b, _c, _d;
+    const fieldRef = single ? combinedEncryptedFieldRef : fieldRefMap[data.fieldType];
+    if (data.focus) {
+      (_a = fieldRef.current) == null ? void 0 : _a.focus();
+      (_b = props.onFocus) == null ? void 0 : _b.call(props, data.fieldType);
+      updateFieldStyles(data.fieldType, "focus");
+    } else {
+      (_c = fieldRef.current) == null ? void 0 : _c.blur();
+      (_d = props.onBlur) == null ? void 0 : _d.call(props, data.fieldType);
+      updateFieldStyles(data.fieldType, "blur");
+    }
+  };
+  const onBinValueChanged = (data) => {
+    var _a, _b;
+    const field = single ? combinedEncryptedFieldRef : cardNumberFieldRef;
+    (_a = field.current) == null ? void 0 : _a.binValueChanged(data.binValue);
+    (_b = props.onBinChanged) == null ? void 0 : _b.call(props, {
+      binValue: data.binValue,
+      brand: data.brand
+    });
+  };
+  const onAuthorized = (data) => {
+    var _a;
+    (_a = props.onReady) == null ? void 0 : _a.call(props, data.success);
+  };
+  const validatePromise = A(createPromise());
+  const validateOrder = [EFieldType.CARD_NUMBER, EFieldType.EXPIRE_DATE, EFieldType.CVV];
+  const fieldValidStatusMap = A({
+    [EFieldType.CARD_NUMBER]: null,
+    [EFieldType.EXPIRE_DATE]: null,
+    [EFieldType.CVV]: null
+  });
+  const onValidated = (data) => {
+    fieldValidStatusMap.current[data.fieldType].status = data.status;
+    const results = Object.values(fieldValidStatusMap.current);
+    if (results.includes(null)) {
+      return;
+    } else {
+      const validateResult = results.every((result) => result.status === "success");
+      if (validateResult) {
+        validatePromise.current.resolve(true);
+      } else {
+        validatePromise.current.reject(false);
+      }
+    }
+  };
+  const onFieldValidStatusChanged = (data) => {
+    var _a, _b, _c, _d, _e;
+    const fieldRef = single ? combinedEncryptedFieldRef : fieldRefMap[data.fieldType];
+    const error = data.errorTip && i18n.get(data.errorTip);
+    (_a = props.onValidationChanged) == null ? void 0 : _a.call(props, {
+      fieldType: data.fieldType,
+      status: data.status
+    });
+    fieldValidStatusMap.current[data.fieldType] = {
+      status: data.status,
+      errorTip: error
+    };
+    if (single) {
+      for (const key of validateOrder) {
+        const currResult = fieldValidStatusMap.current[key];
+        if ((currResult == null ? void 0 : currResult.status) === "error") {
+          (_b = fieldRef.current) == null ? void 0 : _b.resetValidation(currResult.status, currResult.errorTip);
+          return;
+        }
+      }
+      const isSuccess = Object.values(fieldValidStatusMap.current).every(
+        (result) => (result == null ? void 0 : result.status) === "success"
+      );
+      if (isSuccess) {
+        (_c = fieldRef.current) == null ? void 0 : _c.resetValidation("success");
+      } else {
+        (_d = fieldRef.current) == null ? void 0 : _d.resetValidation("unValidate");
+      }
+    } else {
+      (_e = fieldRef.current) == null ? void 0 : _e.resetValidation(data.status, error);
+      const type = data.status === "success" ? "valid" : data.status === "error" ? "invalid" : "base";
+      updateFieldStyles(data.fieldType, type);
+    }
+  };
+  const onFrameActivated = (data) => {
+    var _a;
+    (_a = props.onActivated) == null ? void 0 : _a.call(props, data.fieldType);
+  };
+  const onCardEncrypted = (data) => {
+    var _a;
+    (_a = props.onCardEncrypted) == null ? void 0 : _a.call(props, data.encryptedInfo);
+  };
+  const onCardEncryptionFailed = () => {
+    var _a;
+    (_a = props.onCardEncryptionFailed) == null ? void 0 : _a.call(props);
+  };
+  const onBrand = (data) => {
+    var _a, _b;
+    const field = single ? combinedEncryptedFieldRef : cardNumberFieldRef;
+    (_a = field.current) == null ? void 0 : _a.brandChanged(data.brand);
+    (_b = props.onBrand) == null ? void 0 : _b.call(props, data.brand);
+  };
+  return /* @__PURE__ */ u(CoreContext.Provider, { value: { i18n }, children: isReady && i18n.ready.value && /* @__PURE__ */ u(
+    SecuredFieldsProvider,
+    {
+      ref: SFPRef,
+      targetElement,
+      i18n,
+      style: inputStyle || defaultInputStyleConfig,
+      supportedCardBrands: supportedBrands,
+      onFocus: onFieldsFocus,
+      onBinValue: onBinValueChanged,
+      onBrand,
+      onAuthorized,
+      onValidStatusChanged: onFieldValidStatusChanged,
+      onActivated: onFrameActivated,
+      onCardEncrypted,
+      onCardEncryptionFailed,
+      onValidated
+    }
+  ) });
+});
+class PayKKaEncryptedCard {
+  constructor() {
+  }
+  static init(props) {
+    const container = document.querySelector("body");
+    const encryptedCard = create(EncryptedCard, props);
+    encryptedCard.mount(container);
+    return encryptedCard.ref;
+  }
+  static setEnv(env) {
+    setApiUrl(env.apiUrl);
+    setCDNUrl(env.cdnUrl);
+  }
+}
+export {
+  EEncryptedCardType,
+  ENCRYPTED_CARD_ITEM_ATTR,
+  ENCRYPTED_CARD_WRAPPER_ID,
+  EncryptedCard,
+  PayKKaEncryptedCard
+};