@paykka/card-checkout-ui 0.9.2 → 0.11.4

package/dist/types/i18n/locales/nl-NL.d.ts

@@ -0,0 +1,71 @@
+declare const _default: {
+    'guideCard.redirectDescription': string;
+    'guideCard.scanQRCode': string;
+    'dropIn.card.label': string;
+    'dropIn.otherPaymentMethod': string;
+    'dropIn.boost.label': string;
+    'dropIn.TNGWallet.label': string;
+    'dropIn.shopeePay.label': string;
+    'dropIn.mayBankQRPay.label': string;
+    'dropIn.grabPay.label': string;
+    'dropIn.linePay.label': string;
+    'dropIn.ninePay.label': string;
+    'dropIn.gcash.label': string;
+    'dropIn.paymaya.label': string;
+    'card.cardNumber.label': string;
+    'card.cardNumber.incomplete': string;
+    'card.cardNumber.invalid': string;
+    'card.cardNumber.placeholder': string;
+    'card.cardExpireDate.label': string;
+    'card.cardExpireDate.placeholder': string;
+    'card.cardExpireDate.incomplete': string;
+    'card.cardExpireDate.expired': string;
+    'card.cardSecurityCode.label': string;
+    'card.cardSecurityCode.placeholder': string;
+    'card.cardSecurityCode.incomplete': string;
+    'card.cardHolderName.label': string;
+    'card.cardHolderName.placeholder': string;
+    'card.cardHolderName.incomplete': string;
+    'card.cardSelector.change': string;
+    'card.cardSelector.useOtherCard': string;
+    'card.storeInfo': string;
+    'card.info.label': string;
+    'common.pay': string;
+    'common.payProcessing': string;
+    'common.paySuccess': string;
+    'common.payTimeout': string;
+    'common.pay3DSIncomplete': string;
+    'common.queryTimeout': string;
+    'common.generateQrCode': string;
+    'common.recurringTip': string;
+    'common.noData': string;
+    'common.netError': string;
+    'common.unknownError': string;
+    'common.cancel': string;
+    'common.confirm': string;
+    'common.email.label': string;
+    'common.email.incomplete': string;
+    'common.email.incorrect': string;
+    'common.accountName.label': string;
+    'common.accountName.placeholder': string;
+    'common.accountName.incomplete': string;
+    'address.label': string;
+    'address.country': string;
+    'address.address1': string;
+    'address.address2': string;
+    'address.city': string;
+    'address.postCode': string;
+    'address.province': string;
+    'address.area': string;
+    'sepa.iban.label': string;
+    'sepa.iban.placeholder': string;
+    'sepa.iban.invalid': string;
+    'threeDS.paymentIncomplete': string;
+    'threeDS.completeFirst': string;
+    'threeDS.authenticationSuccessful': string;
+    'threeDS.authenticationFailed': string;
+    'threeDS.returnToCheckout': string;
+    'qrCode.expired': string;
+    'qrCode.scanByGcash': string;
+};
+export default _default;

package/dist/types/index.d.ts

@@ -3,3 +3,4 @@ export { type ComponentInst, create, querySession, Session, PayKKaCheckout, PayK
 export { I18n, LocaleKey } from './i18n';
 export { setApiUrl, setCDNUrl, setFraudDetectionEnv, setCustomReqHeaders, setCustomLocale, setCheckoutConfig } from './config';
 export { getFingerprint, redirectToPayment } from './utils';
+export { PaymentMethod } from './constant';

package/dist/types/out/fraud-detection.d.ts

@@ -1,9 +1,13 @@
 import { type CollModeType, type envType } from '../types';
+import type { FraudDetectionOptions } from './types';
 type FraudDetectionType = {
     fraudDetectionID: string;
+    getFraudDetectionId: (options?: {
+        bin?: string;
+    }) => Promise<string>;
     createFraudDetection: () => Promise<void>;
 };
 export default function getFraudDetectionInstance(env?: envType | {
     [k in CollModeType]?: string;
-}, mode?: CollModeType[]): FraudDetectionType;
+}, mode?: CollModeType[], options?: FraudDetectionOptions): FraudDetectionType;
 export {};

package/dist/types/out/types.d.ts

@@ -0,0 +1,4 @@
+import type { FraudDetectionEventType } from '../types/event';
+export type FraudDetectionOptions = {
+    onEvent?: (event: FraudDetectionEventType) => void;
+};

package/dist/types/out/worldpay-ddc-iframe.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/out/worldpay-ddc.d.ts

@@ -0,0 +1,37 @@
+import type { FraudDetectionOptions } from './types';
+/**
+ * reference: https://docs.worldpay.com/apis/wpg/directintegration/cardinalsecuretest
+ * worldpay ddc，单例模式，此处 SessionId 指的是 fraudDetectionId
+ * 1. 前端调用后端接口返回 JWT
+ * 2. 前端将 JWT 和 bin 传给 iframe
+ * 3. iframe 提交数据到 Worldpay
+ * 4. Worldpay 返回 SessionId
+ * 5. 前端支付时将 SessionId 传给后端
+ */
+export declare class WorldpayDDC {
+    private static instance;
+    private iframe;
+    private jwt;
+    private listener;
+    private timer;
+    private fraudDetectionId;
+    private p;
+    private options?;
+    constructor(options?: FraudDetectionOptions);
+    /**
+     * 获取 fraudDetectionId，每次支付的时候都要调用
+     * @param bin 最好是完整卡号，至少得是 6 位卡 bin
+     */
+    getFraudDetectionId(bin: string): Promise<string>;
+    private requestFraudDetectionId;
+    private sendJWTAndBin;
+    /**
+     * 监听 worldpay 返回的 fraudDetectionId
+     * 由于可能会多次调用，所以需要先移除之前的监听
+     * 如果 worldpay 一直没有返回信息，则 10s 后清除监听，并返回空字符串
+     */
+    private listenFraudDetectionId;
+    private clearListener;
+    private getJWT;
+    private initIframe;
+}

package/dist/types/types/event.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 事件类型
+ * 适用于埋点上报
+ */
+export type EventType = FraudDetectionEventType;
+/** fraud detection 事件类型 */
+export declare enum FraudDetectionEventType {
+    /** fraud detection 数据转换报错 */
+    FRAUD_DETECTION_TRANSFORM_ERROR = "fraudDetection:transFormError",
+    /** stripe radar 获取 sessionId 报错 */
+    STRIPE_RADAR_ERROR = "stripeRadar:error",
+    /** stripe radar 加载失败 */
+    STRIPE_RADAR_LOAD_ERROR = "stripeRadar:loadError",
+    /** stripe radar 开始获取 */
+    STRIPE_RADAR_START = "stripeRadar:start",
+    /** stripe radar 成功 */
+    STRIPE_RADAR_SUCCESS = "stripeRadar:success",
+    /** worldpay ddc 开始获取 */
+    WORLDPAY_DDC_START = "worldpayDDC:start",
+    /** worldpay ddc 获取 sessionId 报错 */
+    WORLDPAY_DDC_ERROR = "worldpayDDC:error",
+    /** worldpay ddc 超时 */
+    WORLDPAY_DDC_TIMEOUT = "worldpayDDC:timeout",
+    /** worldpay ddc 成功 */
+    WORLDPAY_DDC_SUCCESS = "worldpayDDC:success"
+}

package/dist/types/types/fraud-detection.d.ts

@@ -1,7 +1,9 @@
 export type envType = 'eu' | 'hk' | 'us';
 export declare const enum ECollMode {
     /** Stripe Radar */
-    SR = "SR"
+    SR = "SR",
+    /** Worldpay DDC */
+    WP = "WP"
 }
 export type CollModeType = keyof typeof ECollMode;
 export type FraudDetectionEnv = envType | {

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

@@ -4,8 +4,10 @@ import type { PayKKaCheckout, PayKKaError, Session } 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';
 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 {
@@ -21,7 +23,7 @@ export interface PayKKaInitConfiguration {
     /** 定义 3DS 所需配置 */
     threeDSFrame?: ThreeDSFrameConfig;
     /** 收银台已经获取到可用支付方式时调用 */
-    onPaymentMethodsReady?: (methods: string[]) => void;
+    onPaymentMethodsReady?: (methods: PaymentMethod[]) => void;
     /** 收银台创建时报错触发 */
     onInitError?: (error: PayKKaError) => void;
     /**
@@ -38,6 +40,16 @@ export interface PayKKaInitConfiguration {
     onTimeout?: () => void;
     /** 收银台已过期时触发 */
     onExpired?: () => void;
+    /**
+     * @internal
+     * 各种发生在收银台生命周期中的事件
+     */
+    onEvent?: (type: EventType, data?: any) => void;
+    /**
+     * @internal
+     * 欺诈检测错误回调
+     */
+    onFraudDetectionError?: (error: PayKKaError) => void;
     /**
      * @internal
      * 环境配置，优先级大于 env 参数

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

@@ -4,7 +4,7 @@ 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 {
+export declare const enum MessageAction {
     /** 通知 iframe 初始化 input */
     INIT = "init",
     /** 表单 iframe DOM 已加载 */
@@ -54,7 +54,16 @@ export declare enum MessageAction {
     /** 通知组件 3DS 结果页加载 */
     THREE_DS_STATUS_INIT = "threeDSStatusInit",
     /** 向 3DS 状态页传递配置 */
-    THREE_DS_STATUS_CONFIG = "threeDSStatusConfig"
+    THREE_DS_STATUS_CONFIG = "threeDSStatusConfig",
+    /** 开启测试模式 */
+    DEBUG_MODE = "debugMode",
+    /**
+     * worldpay DDC
+     */
+    /** 通知组件 DDC 结果 */
+    DDC_RESULT = "ddcResult",
+    /** 通知 DDC iframe jwt 和 bin 信息 */
+    DDC_JWT_BIN = "ddcJwtBin"
 }
 export type Message<T extends MessageAction> = {
     action: T;
@@ -82,6 +91,9 @@ type MessageMapping = {
     [MessageAction.CHECK_THREE_DS]: CheckThreeDSMessage;
     [MessageAction.THREE_DS_STATUS_INIT]: {};
     [MessageAction.THREE_DS_STATUS_CONFIG]: ThreeDSStatusConfigMessage;
+    [MessageAction.DEBUG_MODE]: {};
+    [MessageAction.DDC_RESULT]: DDCResultMessage;
+    [MessageAction.DDC_JWT_BIN]: DDCJwtBinMessage;
 };
 export interface InitMessage {
     config?: FieldIframeConfig;
@@ -168,4 +180,11 @@ export interface CheckThreeDSMessage {
 export interface ThreeDSStatusConfigMessage {
     locale?: LocaleKeyType;
 }
+export interface DDCResultMessage {
+    sessionId: string;
+}
+export interface DDCJwtBinMessage {
+    jwt: string;
+    bin: string;
+}
 export {};

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

@@ -1,2 +1,2 @@
 export declare const createIframe: (src: string) => HTMLIFrameElement;
-export declare const postMessageToIframe: (data: Recordable, iframe: Window, targetOrigin?: string) => void;
+export declare const postMessageToIframe: (data: Recordable | string, iframe: Window, targetOrigin?: string) => void;

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

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

package/dist/types/utils/reg-exp.d.ts

@@ -0,0 +1 @@
+export declare const EMAIL_REG = "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paykka/card-checkout-ui",
-  "version": "0.9.2",
+  "version": "0.11.4",
   "type": "module",
   "main": "dist/paykka-card-checkout-ui.umd.js",
   "module": "dist/es/index.js",
@@ -44,7 +44,9 @@
     "@preact/signals": "^1.3.0",
     "@types/applepayjs": "^14.0.9",
     "@types/googlepay": "^0.7.6",
+    "@types/qrcode": "^1.5.5",
     "preact": "^10.24.3",
+    "qrcode": "^1.5.4",
     "ts-toolbelt": "^9.6.0",
     "unfetch": "^5.0.0",
     "vue-tsc": "^2.1.10"