@paykka/card-checkout-ui 0.5.17 → 0.7.0

package/dist/types/types/message.d.ts

@@ -0,0 +1,170 @@
+import type { CardBrand, InputStylesConfig } from '.';
+import type { PayRes } from '../api';
+import type { EncryptCardRes } from '../api/modules/encrypted-card/type';
+import type { EFieldType, FieldIframeConfig } from '../components/SecuredFieldsProvider';
+import type { FormValidationStatus } from '../components/internal/Form';
+import type { LocaleKeyType } from '../i18n';
+export declare enum MessageAction {
+    /** 通知 iframe 初始化 input */
+    INIT = "init",
+    /** 表单 iframe DOM 已加载 */
+    ACTIVATED = "Activated",
+    /** 隐藏的 iframe 已经加载 */
+    HIDDEN_IFRAME_READY = "hiddenIframeReady",
+    /** 是否聚焦 */
+    FOCUS = "focus",
+    /** 卡 bin 信息改变 */
+    BIN_VALUE = "binValue",
+    /** 检测到卡品牌 */
+    BRAND = "brand",
+    /** 传递验证通过信息(附带值) */
+    VALID_WITH_VALUE = "validWithValue",
+    /** 通知隐藏 iframe 进行支付 */
+    PAYMENT = "payment",
+    /** 通知表单组件支付响应信息 */
+    AFTER_PAYMENT = "afterPayment",
+    /** 通知表单组件支付错误信息 */
+    PAYMENT_ERROR = "paymentError",
+    /** 通知表单组件支付超时 */
+    PAYMENT_TIMEOUT = "paymentTimeout",
+    /** 通知表单项验证信息 */
+    VALID_STATUS_CHANGED = "validStatusChanged",
+    /** 通知表单项校验 */
+    VALIDATE = "validate",
+    /** 通知表单项校验结果 */
+    VALIDATED = "validated",
+    /** 通知表单项配置 */
+    SET_CONFIG = "setConfig",
+    /**
+     * encrypted card
+     */
+    /** 通知 clientKey 已校验 */
+    AUTHORIZED = "authorized",
+    /** 通知隐藏 iframe 加密卡信息 */
+    ENCRYPT_CARD = "encryptCard",
+    /** 通知加密后的卡信息 */
+    CARD_ENCRYPTED = "cardEncrypted",
+    /** 通知卡信息加密错误 */
+    CARD_ENCRYPTION_FAILED = "cardEncryptionFailed",
+    /**
+     * 3DS
+     */
+    /** 通知组件查询 3DS 结果 */
+    CHECK_THREE_DS = "checkThreeDS",
+    /** 通知组件 3DS 结果页加载 */
+    THREE_DS_STATUS_INIT = "threeDSStatusInit",
+    /** 向 3DS 状态页传递配置 */
+    THREE_DS_STATUS_CONFIG = "threeDSStatusConfig"
+}
+export type Message<T extends MessageAction> = {
+    action: T;
+} & MessageMapping[T];
+type MessageMapping = {
+    [MessageAction.INIT]: InitMessage;
+    [MessageAction.FOCUS]: FocusMessage;
+    [MessageAction.BIN_VALUE]: BinValueMessage;
+    [MessageAction.VALID_WITH_VALUE]: ValidWithValueMessage;
+    [MessageAction.PAYMENT]: PaymentMessage;
+    [MessageAction.AFTER_PAYMENT]: AfterPaymentMessage;
+    [MessageAction.PAYMENT_ERROR]: PaymentErrorMessage;
+    [MessageAction.PAYMENT_TIMEOUT]: PaymentTimeoutMessage;
+    [MessageAction.VALID_STATUS_CHANGED]: ValidStatusChangedMessage;
+    [MessageAction.ENCRYPT_CARD]: EncryptCardMessage;
+    [MessageAction.CARD_ENCRYPTED]: CardEncryptedMessage;
+    [MessageAction.CARD_ENCRYPTION_FAILED]: CardEncryptionFailedMessage;
+    [MessageAction.AUTHORIZED]: AuthorizedMessage;
+    [MessageAction.BRAND]: BrandMessage;
+    [MessageAction.ACTIVATED]: ActivatedMessage;
+    [MessageAction.HIDDEN_IFRAME_READY]: {};
+    [MessageAction.VALIDATE]: {};
+    [MessageAction.VALIDATED]: ValidatedMessage;
+    [MessageAction.SET_CONFIG]: SetConfigMessage;
+    [MessageAction.CHECK_THREE_DS]: CheckThreeDSMessage;
+    [MessageAction.THREE_DS_STATUS_INIT]: {};
+    [MessageAction.THREE_DS_STATUS_CONFIG]: ThreeDSStatusConfigMessage;
+};
+export interface InitMessage {
+    config?: FieldIframeConfig;
+    /** 是否隐藏，如不隐藏则为表单iframe */
+    hidden: boolean;
+    apiUrl?: string;
+    cdnUrl?: string;
+}
+export interface FocusMessage {
+    focus: boolean;
+    fieldType: EFieldType;
+}
+export interface InvalidMessage {
+    errorTip: string;
+    fieldType: EFieldType;
+}
+export interface ValidMessage {
+    fieldType: EFieldType;
+}
+export interface BinValueMessage {
+    binValue: string;
+    fieldType: EFieldType;
+    brand?: CardBrand;
+}
+export interface ValidWithValueMessage {
+    value: string;
+    fieldType: EFieldType;
+}
+export interface PaymentMessage {
+    formData: any;
+    locale: string;
+}
+export interface AfterPaymentMessage {
+    response: PayRes;
+}
+export interface PaymentErrorMessage {
+    error: {
+        message: string;
+        code: string;
+    };
+}
+export interface ValidStatusChangedMessage {
+    status: FormValidationStatus;
+    errorTip?: string;
+    fieldType: EFieldType;
+}
+export interface PaymentTimeoutMessage {
+    message?: string;
+}
+export interface CardEncryptedMessage {
+    encryptedInfo: EncryptCardRes;
+}
+export interface CardEncryptionFailedMessage {
+    error: {
+        message: string;
+        code: string;
+    };
+}
+export interface AuthorizedMessage {
+    success: boolean;
+}
+export interface BrandMessage {
+    brand?: CardBrand;
+    fieldType: EFieldType;
+}
+export interface EncryptCardMessage {
+    merchantId: string;
+    clientKey: string;
+}
+export interface ActivatedMessage {
+    fieldType: EFieldType;
+}
+export interface ValidatedMessage {
+    status: FormValidationStatus;
+    fieldType: EFieldType;
+}
+export interface SetConfigMessage {
+    style?: InputStylesConfig;
+}
+export interface CheckThreeDSMessage {
+    status: string;
+}
+export interface ThreeDSStatusConfigMessage {
+    locale?: LocaleKeyType;
+}
+export {};

package/dist/types/utils/card-brand/brands.d.ts

@@ -1,28 +1,14 @@
 import { IconAmex, IconDinnersClub, IconDiscover, IconJcb, IconMasterCard, IconVisa } from '../../components/internal/icons';
-export declare enum CardBrandCode {
-    VISA = "VISA",
-    MASTER_CARD = "MASTER_CARD",
-    JCB = "JCB",
-    AMEX = "AMEX",
-    DISCOVER = "DISCOVER",
-    DINERS_CLUB = "DINERS_CLUB"
-}
+import { CardBrandCode } from '../../types';
 export declare const cardBrandCodes: CardBrandCode[];
-export interface CardBrand {
+export interface CardBrandConfig {
     name: string;
     code: CardBrandCode;
     pattern: RegExp;
     lengths: number[];
     order: number;
 }
-export declare const cardBrands: CardBrand[];
-export declare const cardBrandIconMap: {
-    VISA: typeof IconVisa;
-    MASTER_CARD: typeof IconMasterCard;
-    JCB: typeof IconJcb;
-    AMEX: typeof IconAmex;
-    DISCOVER: typeof IconDiscover;
-    DINERS_CLUB: typeof IconDinnersClub;
-};
+export declare const cardBrands: CardBrandConfig[];
+export declare const getCardBrandIconMap: (code: CardBrandCode) => typeof IconVisa | typeof IconMasterCard | typeof IconJcb | typeof IconAmex | typeof IconDiscover | typeof IconDinnersClub;
 export type CardBrands = (typeof cardBrands)[number]['code'];
 export declare const cardBrandsLengthList: number[];

package/dist/types/utils/card-brand/index.d.ts

@@ -1,27 +1,28 @@
-import { cardBrands, cardBrandsLengthList, cardBrandCodes, cardBrandIconMap, type CardBrand } from './brands';
-export { cardBrands, cardBrandsLengthList, cardBrandCodes, cardBrandIconMap, type CardBrand };
-export declare function getSupportedCardBrands(supportedCardBrands?: string[]): CardBrand[];
-export declare function findCardBrand(number: string, brands?: CardBrand[]): CardBrand | undefined;
-export declare function findCardBrandInfo(number: string, brands?: CardBrand[]): {
+import { cardBrands, cardBrandsLengthList, cardBrandCodes, type CardBrandConfig } from './brands';
+export { cardBrands, cardBrandsLengthList, cardBrandCodes };
+export declare function getSupportedCardBrands(supportedCardBrands?: string[]): CardBrandConfig[];
+export declare function findCardBrand(number: string, brands?: CardBrandConfig[]): CardBrandConfig | undefined;
+export declare function findCardBrandInfo(number: string, brands?: CardBrandConfig[]): {
     icon: typeof import("../../components/internal/icons").IconVisa | typeof import("../../components/internal/icons").IconMasterCard | typeof import("../../components/internal/icons").IconJcb | typeof import("../../components/internal/icons").IconAmex | typeof import("../../components/internal/icons").IconDiscover | typeof import("../../components/internal/icons").IconDinnersClub;
     name: string;
-    code: import("./brands").CardBrandCode;
+    code: import("../../types").CardBrandCode;
     pattern: RegExp;
     lengths: number[];
     order: number;
 } | undefined;
-export declare function getCardBrandInfo(brand: CardBrand): {
+export declare function getCardBrandInfo(brand: CardBrandConfig): {
     icon: typeof import("../../components/internal/icons").IconVisa | typeof import("../../components/internal/icons").IconMasterCard | typeof import("../../components/internal/icons").IconJcb | typeof import("../../components/internal/icons").IconAmex | typeof import("../../components/internal/icons").IconDiscover | typeof import("../../components/internal/icons").IconDinnersClub;
     name: string;
-    code: import("./brands").CardBrandCode;
+    code: import("../../types").CardBrandCode;
     pattern: RegExp;
     lengths: number[];
     order: number;
 };
+export type CardBrandInfo = ReturnType<typeof getCardBrandInfo>;
 export declare function finCardBrandInfoByCode(code: string): {
     icon: typeof import("../../components/internal/icons").IconVisa | typeof import("../../components/internal/icons").IconMasterCard | typeof import("../../components/internal/icons").IconJcb | typeof import("../../components/internal/icons").IconAmex | typeof import("../../components/internal/icons").IconDiscover | typeof import("../../components/internal/icons").IconDinnersClub;
     name: string;
-    code: import("./brands").CardBrandCode;
+    code: import("../../types").CardBrandCode;
     pattern: RegExp;
     lengths: number[];
     order: number;

package/dist/types/utils/format.d.ts

@@ -14,4 +14,3 @@ export declare function parseE164(phoneNumber?: string): {
     areaCode: string;
     phoneNumber: string;
 } | null;
-export declare const style2String: (style: Recordable) => string;

package/dist/types/utils/index.d.ts

@@ -7,6 +7,8 @@ export * from './deep-freeze';
 export * from './format';
 export * from './is';
 export * from './obj';
+export * from './style';
+export * from './iframe';
 export declare function getIf<T>(value: T, condition: boolean): T | undefined;
 /**
  * 将一个数值限制在指定的范围内
@@ -22,3 +24,5 @@ export declare const safeParse: <T>(dataStr: string, defaultValue?: {}) => T;
  * @return {*}
  */
 export declare function isExpired(expireDate: string): boolean;
+/** 获取两个数组的交集 */
+export declare const intersection: <T>(...arrays: T[][]) => T[];

package/dist/types/utils/load.d.ts

@@ -0,0 +1,7 @@
+/** 动态加载脚本 */
+export declare const loadScript: (params: {
+    src: string;
+    onload?: () => any;
+    onerror?: () => any;
+    extraOptions?: Partial<HTMLScriptElement>;
+}) => void;

package/dist/types/utils/style.d.ts

@@ -0,0 +1,29 @@
+import { type ElementStylesConfig, type FullElementStylesConfig } from '../types';
+/**
+ * 将对象转换为 CSS 样式字符串
+ * @param style 样式对象
+ * @returns CSS 样式字符串
+ */
+export declare const style2String: (style?: Recordable) => string;
+/** 生成 className 映射 */
+export declare const generateClassNameMap: (selector?: string) => {
+    focus: string;
+    hover: string;
+    valid: string;
+    invalid: string;
+};
+/** 动态加载样式 */
+export declare const loadStyle: (styleStr: string, extraOptions?: Partial<HTMLScriptElement>) => void;
+/** 创建 placeholder 样式 */
+export declare const createPlaceholderStyle: (selector: string, style?: Recordable) => string;
+/** 将可以直接应用到 iframe 中的 input 样式剥离出来 */
+export declare const separateInputStyle: (styles: ElementStylesConfig) => FullElementStylesConfig;
+/**
+ * 生成组件样式字符串
+ * @param style 样式对象
+ * @param selector 选择器，可以是父元素也可以是当前元素
+ */
+export declare const genComponentStyle: (list?: Array<{
+    selector: string;
+    style?: Recordable;
+}>) => string;

package/package.json

@@ -1,63 +1,63 @@
-{
-  "name": "@paykka/card-checkout-ui",
-  "version": "0.5.17",
-  "type": "module",
-  "main": "dist/paykka-card-checkout-ui.umd.js",
-  "module": "dist/es/index.js",
-  "typings": "dist/types/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/es/index.js",
-      "require": "./dist/paykka-card-checkout-ui.umd.js",
-      "types": "./dist/types/index.d.ts"
-    },
-    "./*": "./dist/*"
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "dev": "vite --host",
-    "build": "pnpm type-check && pnpm build:npm && pnpm build:inner && pnpm copy-dist-to-cdn && pnpm build:outer",
-    "build:npm": "tsx ./build/run.ts",
-    "build:inner": "tsx ./build/runInner.ts",
-    "build:outer": "tsx ./build/runOuter.ts",
-    "build:type": "tsc -p ./tsconfig.build.json",
-    "copy-dist-to-cdn": "tsx ./copyDist2CDN.ts",
-    "changeset": "changeset",
-    "changeset:pre": "changeset pre enter beta",
-    "changeset:pre-exit": "changeset pre exit",
-    "changeset:version": "changeset version",
-    "changeset:release": "changeset publish",
-    "changeset:prelease": "changeset publish --tag beta",
-    "release:prod": "pnpm build && pnpm changeset:release",
-    "release:noprod": "pnpm build && pnpm changeset:pre-exit && pnpm changeset:prelease",
-    "type-check": "vue-tsc --noEmit -p tsconfig.json --composite false"
-  },
-  "publishConfig": {
-    "registry": "https://packages.aliyun.com/640edee5a84870ae9d591e48/npm/npm-registry/"
-  },
-  "dependencies": {
-    "@ctrl/tinycolor": "^4.0.3",
-    "@fingerprintjs/fingerprintjs": "^4.2.2",
-    "@preact/signals": "^1.3.0",
-    "@types/applepayjs": "^14.0.8",
-    "@types/googlepay": "^0.7.6",
-    "preact": "^10.24.3",
-    "ts-toolbelt": "^9.6.0",
-    "unfetch": "^5.0.0",
-    "vue-tsc": "^2.1.10"
-  },
-  "devDependencies": {
-    "@changesets/cli": "^2.27.1",
-    "@preact/preset-vite": "^2.9.1",
-    "@types/node": "^20.12.7",
-    "autoprefixer": "^10.4.18",
-    "execa": "^8.0.1",
-    "fast-glob": "^3.3.2",
-    "sass": "^1.71.1",
-    "tsx": "^4.7.3",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.10"
-  }
-}
+{
+  "name": "@paykka/card-checkout-ui",
+  "version": "0.7.0",
+  "type": "module",
+  "main": "dist/paykka-card-checkout-ui.umd.js",
+  "module": "dist/es/index.js",
+  "typings": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/es/index.js",
+      "require": "./dist/paykka-card-checkout-ui.umd.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./*": "./dist/*"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "registry": "https://packages.aliyun.com/640edee5a84870ae9d591e48/npm/npm-registry/"
+  },
+  "dependencies": {
+    "@ctrl/tinycolor": "^4.0.3",
+    "@fingerprintjs/fingerprintjs": "^4.2.2",
+    "@preact/signals": "^1.3.0",
+    "@types/applepayjs": "^14.0.9",
+    "@types/googlepay": "^0.7.6",
+    "preact": "^10.24.3",
+    "ts-toolbelt": "^9.6.0",
+    "unfetch": "^5.0.0",
+    "vue-tsc": "^2.1.10"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.1",
+    "@preact/preset-vite": "^2.9.1",
+    "@types/node": "^20.12.7",
+    "autoprefixer": "^10.4.18",
+    "execa": "^8.0.1",
+    "fast-glob": "^3.3.2",
+    "sass": "^1.71.1",
+    "tsx": "^4.7.3",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.10"
+  },
+  "scripts": {
+    "dev": "vite --host",
+    "build": "pnpm type-check && pnpm build:npm && pnpm build:inner && pnpm copy-dist-to-cdn && pnpm build:outer",
+    "build:npm": "tsx ./build/run.ts",
+    "build:inner": "tsx ./build/runInner.ts",
+    "build:outer": "tsx ./build/runOuter.ts",
+    "build:type": "tsc -p ./tsconfig.build.json",
+    "copy-dist-to-cdn": "tsx ./build/copyDist2CDN.ts",
+    "changeset": "changeset",
+    "changeset:pre": "changeset pre enter beta",
+    "changeset:pre-exit": "changeset pre exit",
+    "changeset:version": "changeset version",
+    "changeset:release": "changeset publish",
+    "changeset:prelease": "changeset publish --tag beta",
+    "release:prod": "pnpm build && pnpm changeset:release",
+    "release:noprod": "pnpm build && pnpm changeset:pre-exit && pnpm changeset:prelease",
+    "type-check": "vue-tsc --noEmit -p tsconfig.json --composite false"
+  }
+}