@paykka/card-checkout-ui 0.11.6 → 0.13.1

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

@@ -1,27 +1,29 @@
 import type { HTMLAttributes } from 'preact/compat';
 import type { LocaleKeyType } from '../i18n';
-import type { PayKKaCheckout, PayKKaError, Session } from '../core';
+import type { PayKKaError } from '../core';
 import type { FraudDetectionEnv } from './fraud-detection';
 import type { FormValidateError } from '../components/internal/Form';
 import type { PaymentMethod } from '../constant';
-import type { EventType } from './event';
+import type { Amount, OrderStatus, SessionStatus } from '../api';
 export * from './fraud-detection';
 export * from './message';
 export * from './event';
 export type CustomAttributes<T extends EventTarget, K extends keyof HTMLAttributes<T> = 'style' | 'className'> = Pick<HTMLAttributes<T>, K>;
 /** 收银台初始化参数 */
-export interface PayKKaInitConfiguration {
-    sessionId: string;
+export interface PayKKaInitConfiguration extends PayKKaCommonConfig {
+    sessionId?: string;
     /** 环境配置，必传！ */
     env: PayKKaEnvType;
     /** 嵌入式收银台必传，需要商户进行配置 */
     clientKey?: string;
     /** 国际化语言 */
     locale?: LocaleKeyType;
-    /** 是否隐藏支付按钮 */
-    hidePaymentButton?: boolean;
     /** 定义 3DS 所需配置 */
     threeDSFrame?: ThreeDSFrameConfig;
+    /**
+     * TODO: 很多时候用户需要的不仅仅是支付方式，而是支付成功后的数据，比如订单号、支付方式等，所以需要换成一个统一的回调
+     * 参考 adyen onPaymentCompleted 回调 https://docs.adyen.com/online-payments/build-your-integration/sessions-flow/?platform=Web&integration=Components&version=6.17.0#create-the-component
+     */
     /** 收银台已经获取到可用支付方式时调用 */
     onPaymentMethodsReady?: (methods: PaymentMethod[]) => void;
     /** 收银台创建时报错触发 */
@@ -33,44 +35,42 @@ export interface PayKKaInitConfiguration {
     /** 提交表单时触发 */
     onSubmit?: (formValidateError?: Recordable<FormValidateError[]>) => void;
     /** 支付成功后触发 */
-    onSuccess?: (data: PaymentSuccessData) => void;
+    onSuccess?: (data: PaymentInfo) => void;
     /** 支付失败时触发 */
     onError?: (error: PayKKaError) => void;
     /** 支付超时时触发 */
     onTimeout?: () => void;
     /** 收银台已过期时触发 */
     onExpired?: () => void;
+}
+export interface PayKKaCheckoutConfig {
     /**
-     * @internal
-     * 各种发生在收银台生命周期中的事件
-     */
-    onEvent?: (type: EventType, data?: any) => void;
-    /**
-     * @internal
-     * 欺诈检测错误回调
+     * 是否启用初始化验证
+     * 收银台内置对 sessionId 等参数进行校验，但不同收银台校验规则不同，需要自行校验
+     * @defaultValue true
      */
-    onFraudDetectionError?: (error: PayKKaError) => void;
+    enableInitValidation?: boolean;
     /**
-     * @internal
-     * 环境配置，优先级大于 env 参数
+     * API 地址前缀，不同收银台的 API 地址前缀不同
+     * @defaultValue /session
      */
-    _envConfig?: PayKKaEnvConfig;
+    apiPrefix?: string;
     /**
-     * @internal
-     * 根据请求类型和请求方式额外传递的参数回调
+     * 地址模式，不同收银台的地址模式不同
+     * address: 地址模式，需要展示国家、省市区等所有地址输入框
+     * country: 国家模式，只需要展示国家选择框
+     * @defaultValue 'address'
      */
-    _getExtraParams?: (type: 'info' | 'query' | 'payment', paymentMethod: PaymentMethod) => Recordable;
+    addressMode?: AddressMode;
+}
+export type AddressMode = 'address' | 'country';
+/** 公共配置属性 */
+export interface PayKKaCommonConfig {
+    /** 是否隐藏支付按钮，默认 false */
+    hidePaymentButton?: boolean;
 }
 /** 收银台创建组件时自动传入的内部属性 */
-export type CoreProps = {
-    session: Session;
-    /** 收银台实例 */
-    core: PayKKaCheckout;
-    /** 定义 3DS 所需配置 */
-    threeDSFrame?: ThreeDSFrameConfig;
-    /** 组件是否通过 DropIn 创建 */
-    isDropIn?: boolean;
-};
+export type CoreProps = PayKKaCommonConfig & {};
 export interface ThreeDSFrameConfig {
     /** 3DS 页面宽度 */
     modalWidth?: number | string;
@@ -91,9 +91,47 @@ export interface PayKKaEnvConfig {
     fraudDetection?: FraudDetectionEnv;
 }
 export type PayKKaEnvType = `${EPayKKaEnv}`;
-export type PaymentSuccessData = {
+export interface BasePaymentInfo {
+    /** 会话 ID */
+    sessionId?: string;
+    /** 商户 ID */
+    merchantId?: string;
+    /** 支付成功跳转的链接（由商户配置） */
     returnUrl?: string;
-};
+    /** 订单 ID */
+    orderId?: string;
+    /** 错误码 */
+    errorCode?: string;
+    /** 错误信息 */
+    errorMessage?: string;
+    /** 交易金额 */
+    transAmount?: Amount;
+    /** 收银台状态 */
+    status?: SessionStatus;
+    /** 订单状态 */
+    orderStatus?: OrderStatus;
+    /** 支付方式 */
+    paymentMethod?: PaymentMethod;
+    /** 支付完成时间 */
+    finishTime?: string;
+    /** 原始响应信息，一些业务字段，组件用不到，但外部会用到，可以从这里获取 */
+    rawResponse?: Recordable;
+    /** 支付信息 */
+    payInfo?: {
+        /** 三方认证 URL */
+        threeDSUrl?: string;
+        /** 支付 URL */
+        paymentUrl?: string;
+        /** 支付过期时间 */
+        paymentExpiredAt?: string;
+        /** 其他支付信息 */
+        [key: string]: any;
+    };
+}
+export interface PaymentInfo extends BasePaymentInfo {
+    /** 支付成功跳转的链接（由商户配置） */
+    returnUrl?: string;
+}
 export declare enum CardBrandCode {
     VISA = "VISA",
     MASTER_CARD = "MASTER_CARD",

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

@@ -101,6 +101,7 @@ export interface InitMessage {
     hidden: boolean;
     apiUrl?: string;
     cdnUrl?: string;
+    apiPrefix?: string;
 }
 export interface FocusMessage {
     focus: boolean;

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

@@ -5,7 +5,7 @@ export declare function findCardBrand(number: string, brands?: CardBrandConfig[]
 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 | typeof import("../../components/internal/icons").IconUnionPay;
     name: string;
-    code: import("../../types").CardBrandCode;
+    code: import("../..").CardBrandCode;
     pattern?: RegExp | undefined;
     validator?: ((cardNumber: string) => boolean) | undefined;
     lengths: number[];
@@ -14,7 +14,7 @@ export declare function findCardBrandInfo(number: string, brands?: CardBrandConf
 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 | typeof import("../../components/internal/icons").IconUnionPay;
     name: string;
-    code: import("../../types").CardBrandCode;
+    code: import("../..").CardBrandCode;
     pattern?: RegExp | undefined;
     validator?: ((cardNumber: string) => boolean) | undefined;
     lengths: number[];
@@ -24,7 +24,7 @@ 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 | typeof import("../../components/internal/icons").IconUnionPay;
     name: string;
-    code: import("../../types").CardBrandCode;
+    code: import("../..").CardBrandCode;
     pattern?: RegExp | undefined;
     validator?: ((cardNumber: string) => boolean) | undefined;
     lengths: number[];

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

@@ -2,5 +2,6 @@ interface Opts {
     theme?: 'dark' | 'default';
     backgroundColor?: string;
 }
+export declare const DEFAULT_THEME: Opts;
 export declare function generateColors(color: string, opts?: Opts): string[];
 export {};

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

@@ -16,6 +16,7 @@ export * from './detect';
 export * from './date';
 export * from './object';
 export * from './reg-exp';
+export * from './payment';
 export declare function getIf<T>(value: T, condition: boolean): T | undefined;
 /**
  * 将一个数值限制在指定的范围内

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

@@ -0,0 +1,37 @@
+/**
+ * 支付流程处理
+ */
+import type { CheckoutRes, PayRes } from '../api';
+import type { PaymentInfo } from '../types';
+export interface PaymentCallbackConfig {
+    /** 订单处理中，定时查询订单 */
+    onProcessing?: () => void;
+    /** 订单已授权，提示用户，跳转商户页面 */
+    onAuthorized?: () => void;
+    /** 订单需要3DS认证，跳转3DS认证页面 */
+    onInThreeDS?: () => void;
+    /** 上一次3DS认证未完成，跳转3DS认证页面 */
+    onInPreviousThreeDS?: () => void;
+    /** 订单取消，导致查询超时 */
+    onCanceled?: () => void;
+    /** 订单成功，支付成功 */
+    onSuccess?: () => void;
+    /** 订单失败，支付失败 */
+    onFailure?: () => void;
+    /** 订单过期，支付过期 */
+    onExpired?: () => void;
+    /** 不属于其他任何状态，兜底逻辑 */
+    onDefault?: () => void;
+}
+/**
+ * 处理支付状态的判断
+ * 每个支付方式都要走类似的判断，所以封装成工具函数便于维护
+ * @param res 支付结果
+ * @param config 支付回调
+ */
+export declare const processPaymentStatus: (res: PayRes, config: PaymentCallbackConfig) => void;
+/**
+ * 格式化支付结果
+ * @param res
+ */
+export declare const formatPaymentResult: (res?: PayRes | CheckoutRes) => PaymentInfo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paykka/card-checkout-ui",
-  "version": "0.11.6",
+  "version": "0.13.1",
   "type": "module",
   "main": "dist/paykka-card-checkout-ui.umd.js",
   "module": "dist/es/index.js",
@@ -33,7 +33,7 @@
     "release:prod": "pnpm build && pnpm changeset:release",
     "release:noprod": "pnpm build && pnpm changeset:pre-exit && pnpm changeset:prelease",
     "type-check": "tsc --noEmit -p tsconfig.json --composite false",
-    "release:npm": "pnpm build && npm publish --registry=https://registry.npmjs.org --access public"
+    "release:npm": "node scripts/release-npm.cjs"
   },
   "publishConfig": {
     "registry": "https://packages.aliyun.com/640edee5a84870ae9d591e48/npm/npm-registry/"
@@ -43,7 +43,7 @@
     "@fingerprintjs/fingerprintjs": "^4.2.2",
     "@preact/signals": "^1.3.0",
     "@types/applepayjs": "^14.0.9",
-    "@types/googlepay": "^0.7.6",
+    "@types/googlepay": "^0.7.7",
     "@types/qrcode": "^1.5.5",
     "preact": "^10.24.3",
     "qrcode": "^1.5.4",

package/dist/types/core/Session.d.ts

@@ -1,16 +0,0 @@
-import { type CheckoutRes } from '../api';
-export declare class Session {
-    #private;
-    readonly sessionId: string;
-    readonly clientKey?: string;
-    checkout?: CheckoutRes;
-    colors: {
-        primary: string;
-        primaryHover: string;
-        primaryActive: string;
-    } | null;
-    constructor(sessionId: string, clientKey?: string);
-    /** 生成主题色 */
-    private genColors;
-    ready(): import("../utils").CreatePromiseReturn<boolean>;
-}