@bootpay/client-js 5.4.0 → 5.5.2

package/dist/payment.d.ts

@@ -0,0 +1,3 @@
+export * from './src/payment'
+import _default from './src/payment'
+export default _default

package/dist/payment.mjs

@@ -0,0 +1,5 @@
+import { h as a } from "./chunks/bootpay-DVdQIYCS.mjs";
+export {
+  a as Bootpay,
+  a as default
+};

package/dist/src/bootpay.d.ts

@@ -1,4 +1,4 @@
-import { BootpayAnalyticsModel, BootpayAnalyticsUserModel, RequestAuthenticationModel, RequestPaymentModel, RequestPaymentUrlModel, RequestSubscriptionModel } from './types/bootpay-interface';
+import { BootpayAnalyticsModel, BootpayAnalyticsUserModel, OnboardingResultModel, RequestAuthenticationModel, RequestOnboardingModel, RequestPaymentModel, RequestPaymentUrlModel, RequestSubscriptionModel } from './types/bootpay-interface';
 import { EnvironmentInterface } from './support/environment';
 import { BootpayRequestPaymentManager } from './lib/bootpay';
 import { BootpayAnalyticsManager } from './lib/analytics';
@@ -11,6 +11,7 @@ export interface BootpayInterface {
     requestSubscription(data: RequestSubscriptionModel): Promise<any>;
     requestAuthentication(data: RequestAuthenticationModel): Promise<any>;
     requestPaymentUrl(data: RequestPaymentUrlModel): Promise<any>;
+    requestOnboarding(data: RequestOnboardingModel): Promise<OnboardingResultModel>;
     confirm(): Promise<any>;
     errorHandler(data: any): any;
     setEnvironmentMode(env: 'development' | 'stage' | 'production', hostname?: string | undefined | null): void;

package/dist/src/lib/event/onboarding.d.ts

@@ -0,0 +1,17 @@
+import { BootpayWindowEvent } from '../../vendor/mixins/event';
+import { OnboardingResultModel } from '../../types/bootpay-interface';
+
+/**
+ * 리셀러 등록 폼(PG 신청 화면) 결과 메시지 — Bootpay.requestOnboarding 전용
+ * 신청 화면은 JSON 문자열 { bootpay_event: true, event: 'done' | 'cancel', id, kind, pg_wait_id, status } 를 보낸다.
+ * 결과는 리셀러 화면 상태를 바꾸므로 기존 리스너와 달리 origin 을 확인한다 — 신청 화면 origin 에서,
+ * 이 SDK 가 연 창(popup · iframe)이 보낸 메시지만 받는다.
+ * 토큰 · 결과는 로그나 분석 이벤트로 보내지 않는다.
+ * @date: 26-10-27
+ */
+export declare class BootpayOnboardingEventManager extends BootpayWindowEvent {
+    $messageEventName: string;
+    constructor();
+    bindOnboarding(allowedOrigin: string, expectedSource: () => Window | null, onDone: (result: OnboardingResultModel) => void, onCancel: () => void): void;
+    unbind(): void;
+}

package/dist/src/lib/event/polling.d.ts

@@ -7,6 +7,6 @@ export declare class BootpayPollingEvent extends Resource {
      * Comment by GOSOMI
      * @date: 2021-12-29
      */
-    pollingStatus(gatewayUrl: string, receiptId: string, applicationId: string | null, transactionKey: string | null): Promise<import('axios').AxiosResponse<any, any>>;
+    pollingStatus(gatewayUrl: string, receiptId: string, applicationId: string | null, transactionKey: string | null): Promise<import('../../vendor/mixins/resource').HttpResponse<any>>;
 }
 export declare const BootpayPolling: BootpayPollingEvent;

package/dist/src/lib/locale/message.d.ts

@@ -53,6 +53,34 @@ export declare const BootpayMessage: {
             };
         };
     };
+    popupBlocked: {
+        PAYMENT: {
+            ko: string;
+            en: string;
+        };
+        CARD_SUBSCRIPTION: {
+            ko: string;
+            en: string;
+        };
+        AUTH: {
+            ko: string;
+            en: string;
+        };
+    };
+    popupBlockedError: {
+        PAYMENT: {
+            ko: string;
+            en: string;
+        };
+        CARD_SUBSCRIPTION: {
+            ko: string;
+            en: string;
+        };
+        AUTH: {
+            ko: string;
+            en: string;
+        };
+    };
     closeMessage: {
         PAYMENT: {
             ko: string;

package/dist/src/lib/template/iframe-allow.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 결제창 iframe 에 넘겨줄 권한 — Chrome Local Network Access(142+)
+ * 다른 도메인 iframe 은 allow 가 없으면 로컬 주소(127.0.0.1 등) 호출이 묻지도 않고 거부된다
+ * ISP 인증서 결제는 PG 프레임이 https://127.0.0.1:55501 로 구매자 PC 의 ISP 프로그램을 부르므로
+ * 결제창이 열리는 iframe 은 이 권한을 PG 프레임까지 넘겨줘야 한다
+ * local-network-access 는 처음 나온 이름(신버전 Chrome 에서는 별칭), local-network · loopback-network 는 나눠진 새 이름
+ * 지원하지 않는 브라우저는 모르는 이름을 무시한다
+ * Comment by GOSOMI
+ * @date: 2026-11-06
+ */
+export declare const PAYMENT_IFRAME_ALLOW = "local-network-access *; local-network *; loopback-network *";

package/dist/src/lib/template/onboarding.d.ts

@@ -0,0 +1,40 @@
+import { TemplateManager } from '../../vendor/mixins/template-manager';
+import { BootpayOnboardingEventManager } from '../event/onboarding';
+import { OnboardingResultModel, RequestOnboardingModel } from '../../types/bootpay-interface';
+
+type OnboardingDisplay = 'popup' | 'iframe' | 'redirect';
+/**
+ * 리셀러 등록 폼(PG 신청 화면) 창 — Bootpay.requestOnboarding 전용
+ * - popup: window.open + 500ms 닫힘 감시(결제창 readyToPopup 과 같은 방식) — 닫히면 cancel
+ * - iframe(기본): 결제창 덮개(bootpay-payment-background) + iframe, 본문 스크롤 잠금 — 끝나면 덮개 제거 · 스크롤 복구
+ * - redirect: 현재 창 이동. Promise 는 끝나지 않는다(결과는 return_url 쿼리 · 리셀러 웹훅)
+ * 신청 화면 주소: {ONBOARDING_URL}/onboarding/s/{token}?display=…&origin={리셀러 페이지 origin}
+ * @date: 26-10-27
+ */
+export declare class OnboardingTemplateManager extends TemplateManager {
+    $template: string;
+    $windowId: string;
+    $iFrameId: string;
+    $onboardingWindowId: string;
+    $event: BootpayOnboardingEventManager;
+    $popup: Window | null;
+    $popupWatcher: ReturnType<typeof setInterval> | undefined;
+    $abortPrevious: (() => void) | null;
+    constructor();
+    template(): string;
+    /**
+     * 신청 화면 주소 — url 을 주면 부트페이 신청 화면 주소(ONBOARDING_URL)일 때만 쓴다
+     */
+    onboardingUrl(data: RequestOnboardingModel, display: OnboardingDisplay): string;
+    /**
+     * 신청 화면을 연다. done 은 resolve, cancel 과 error 는 reject
+     */
+    open(data: RequestOnboardingModel): Promise<OnboardingResultModel>;
+    currentWindow(display: OnboardingDisplay): Window | null;
+    /**
+     * 창 · 덮개 · 감시 · 리스너를 정리하고 본문 스크롤을 되돌린다
+     */
+    destroy(): void;
+}
+export declare const OnboardingTemplate: OnboardingTemplateManager;
+export {};

package/dist/src/lib/template/payment.d.ts

@@ -14,9 +14,11 @@ declare class TemplatePaymentManager extends TemplateManager {
     $closeButton: string;
     $popupItemNameId: string;
     $popupPriceId: string;
+    $popupMessageId: string;
     $env: any;
     $popup?: any;
     $popupWatcher?: any;
+    $popupBlocked: boolean;
     $themeColor?: string;
     mode: string;
     modeApiUrl: any;
@@ -76,6 +78,26 @@ declare class TemplatePaymentManager extends TemplateManager {
      * @date: 2021-06-23
      */
     readyToPopup(url?: string | undefined): void;
+    /**
+     * 팝업이 차단됐을 때
+     * 처음에는 「계속하기」 안내창을 차단 안내 문구로 다시 띄워 팝업을 허용한 뒤 다시 누를 수 있게 한다
+     * 그래도 차단되면 RC_POPUP_BLOCKED 로 끝낸다 — 사용자가 닫은 RC_CLOSE_WINDOW 와 구분해 가맹점이 안내를 달리할 수 있게 한다
+     * Comment by GOSOMI
+     * @date: 2026-11-06
+     */
+    private handlePopupBlocked;
+    /**
+     * 「계속하기」 안내창을 팝업 차단 안내 문구로 바꿔 다시 보여준다
+     * Comment by GOSOMI
+     * @date: 2026-11-06
+     */
+    private showPopupBlockedMessage;
+    /**
+     * 팝업창이 열려 있는지 — 차단되어 null 인 경우도 닫힌 것으로 본다
+     * Comment by GOSOMI
+     * @date: 2026-11-06
+     */
+    private isPopupOpened;
     /**
      * 팝업창을 닫는다
      * Comment by GOSOMI
@@ -111,6 +133,19 @@ declare class TemplatePaymentManager extends TemplateManager {
      * @returns void
      */
     showPopupMessage(displayData: PopupDisplayResponseModel): void;
+    /**
+     * 팝업 안내 창에 결제 요청 extra.theme_color 를 적용한다
+     * 값이 없거나 CSS 색상이 아니면 common.sass 의 기본색(--bootpay-primary)을 쓴다
+     */
+    private applyPopupThemeColor;
+    /**
+     * CSS 색상 문자열을 [r, g, b] 로 변환한다 — 브라우저가 계산한 값을 읽으므로 hex/rgb/hsl/색상명 모두 지원한다
+     */
+    private resolveRgb;
+    /**
+     * WCAG 상대 휘도 — 버튼 글자색(흰색/검정)을 고르는 데 쓴다
+     */
+    private relativeLuminance;
     /**
      * 팝업 버튼 창을 닫는다
      * Comment by GOSOMI

package/dist/src/payment.d.ts

@@ -0,0 +1,10 @@
+import { default as Bootpay, BootpayInterface } from './bootpay';
+
+export { Bootpay };
+export default Bootpay;
+export * from './types/bootpay-interface';
+declare global {
+    interface Window {
+        Bootpay: BootpayInterface;
+    }
+}

package/dist/src/support/environment.d.ts

@@ -27,6 +27,7 @@ export interface EnvironmentInterface {
     ANALYTICS_URL: EnvironmentMode;
     DOOR_URL: EnvironmentMode;
     WIDGET_URL: EnvironmentMode;
+    ONBOARDING_URL: EnvironmentMode;
     sdkNames: SdkNameInterface;
     sdkVersion: string;
     packageVersion: string;
@@ -40,6 +41,7 @@ export interface EnvironmentInterface {
     toApi(uri: string): string;
     toDoor(uri: string): string;
     toWidget(uri: string): string;
+    toOnboarding(uri: string): string;
     isMobile(): boolean;
     isMobileSafari(): any;
     toAnalytics(uri: string): string;

package/dist/src/types/bootpay-interface.d.ts

@@ -17,6 +17,8 @@ interface RequestPaymentBaseModel {
     deposit_price?: number
     platform_type?: number
     currency?: string // 결제 currency 화폐단위
+    currencies?: string[] // 통합결제창에서 결제 가능한 통화 목록 ex) ['krw', 'usd']
+    currency_prices?: { [currency: string]: number } // 통화별 결제 금액 ex) { usd: 11.12, cny: 100.23 }, 없으면 price를 환율로 환산
     uuid?: string // UUID
     sk?: string // 세션 고유키
     ti?: number // 재방문까지 걸린 시각
@@ -236,6 +238,7 @@ export interface ExtraModel {
 
     theme_color?: string // 부트페이 결제창(카드 등록 등) 강조색 — 버튼 배경 · 입력 focus, CSS 색상값 ( 비우면 기본색 #3182F6, 이니시스는 결제창 SKIN 으로도 쓴다 )
     theme_text_color?: string // theme_color 배경 위 글자색, CSS 색상값 ( 비우면 기본색 #FFFFFF )
+    force_redirect?: boolean
 }
 
 export interface WidgetExtraModel extends Partial<ExtraModel> {
@@ -306,4 +309,31 @@ export interface PopupDisplayResponseModel {
 export interface CommissionKeyModel {
     commerce?: string
     marketer?: string
-}
+}
+
+/**
+ * 리셀러 등록 폼(PG 신청) 열기 요청 — Bootpay.requestOnboarding
+ * token: 리셀러 서버가 발급받은 등록 폼 토큰(rst_…)
+ * display: 'iframe'(기본, 현재 페이지 위 덮개) | 'popup'(새 창) | 'redirect'(현재 창 이동 — Promise 가 끝나지 않는다)
+ * url: 발급 응답의 url 을 그대로 쓸 때만. 부트페이 신청 화면 주소일 때만 받는다
+ * @date: 26-10-27
+ */
+export interface RequestOnboardingModel {
+    token: string
+    display?: 'popup' | 'iframe' | 'redirect'
+    url?: string
+}
+
+/**
+ * 리셀러 등록 폼 결과 — done 은 resolve, cancel(창 닫기 · 나중에 할게요)과 error 는 reject
+ * @date: 26-10-27
+ */
+export interface OnboardingResultModel {
+    event: 'done' | 'cancel' | 'error'
+    id?: string
+    kind?: 'pg_join' | string
+    pg_wait_id?: string
+    status?: number | null
+    error_code?: 'ONBOARDING_TOKEN_REQUIRED' | 'ONBOARDING_URL_INVALID' | 'POPUP_BLOCKED' | string
+    message?: string
+}

package/dist/src/vendor/mixins/resource.d.ts

@@ -1,18 +1,56 @@
-import { AxiosInstance } from 'axios';
-
 interface EncryptParamsFormat {
     payload: string;
     token: string;
 }
+export interface HttpResponse<T = any> {
+    data: T;
+    status: number;
+    headers: Headers;
+}
+export interface HttpRequestOptions {
+    params?: {
+        [key: string]: any;
+    };
+}
+/**
+ * 요청 실패 — 응답을 받은 경우 response 에 data · status 를 담는다 (axios 오류와 같은 모양)
+ */
+export declare class HttpError extends Error {
+    code?: string;
+    response?: HttpResponse;
+    constructor(message: string, code?: string, response?: HttpResponse);
+}
+/**
+ * fetch 로 만든 HTTP 클라이언트 — axios(약 20KB)를 대신한다
+ * 이전 axios.create({ timeout: 60000 }) 인스턴스와 같게 동작한다
+ * - body 는 JSON 으로 보내고, 응답은 JSON 이면 파싱한다 (아니면 문자열 그대로)
+ * - 2xx 가 아니면 'Request failed with status code N' 으로 reject 한다
+ * Comment by GOSOMI
+ * @date: 2026-11-06
+ */
+export declare class HttpClient {
+    timeout: number;
+    constructor(timeout?: number);
+    get<T = any>(url: string, options?: HttpRequestOptions): Promise<HttpResponse<T>>;
+    post<T = any>(url: string, data?: any, options?: HttpRequestOptions): Promise<HttpResponse<T>>;
+    put<T = any>(url: string, data?: any, options?: HttpRequestOptions): Promise<HttpResponse<T>>;
+    request<T = any>(method: string, url: string, data?: any, options?: HttpRequestOptions): Promise<HttpResponse<T>>;
+    static parseBody(text: string): any;
+    /**
+     * query string 을 붙인다 — axios 와 같이 null · undefined 는 빼고, 배열은 key[] 로, 객체는 JSON 으로 보낸다
+     */
+    static buildUrl(url: string, params?: {
+        [key: string]: any;
+    }): string;
+}
 export declare class Resource {
-    $http: AxiosInstance;
+    $http: HttpClient;
     constructor();
     static encryptParams(data: object | string): EncryptParamsFormat;
     static toUnderscore(value: string): string;
     static toCamelcase(value: string): string;
     static objectKeyToUnderscore(value: any): any;
     static objectKeyToCamel(value: any): any;
-    static axiosMultipayConfigure(): void;
     static isHttpBodyUsedMethod(method: string): boolean;
 }
 export {};

package/package.json

@@ -1,17 +1,29 @@
 {
   "name": "@bootpay/client-js",
-  "version": "5.4.0",
+  "version": "5.5.2",
   "main": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./payment": {
+      "types": "./dist/payment.d.ts",
+      "import": "./dist/payment.mjs"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "payment": [
+        "dist/payment.d.ts"
+      ]
     }
   },
   "styles": "dist/index.css",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rm -rf ./dist && vite build",
+    "build": "rm -rf ./dist && vite build && vite build --mode umd",
     "deploy": "NODE_ENV=production ./node_modules/.bin/webpack --output-path=./dist --mode=production && gzip -kf dist/*.min.js && ./webview.sh $npm_package_version"
   },
   "dependencies": {

package/vite.config.ts

@@ -4,28 +4,52 @@ import dts from 'vite-plugin-dts'
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 import path from 'path'
 
-export default defineConfig({
-    build:     {
-        minify: 'esbuild',
-        lib:    {
-            entry:    path.resolve(__dirname, 'src/index.ts'),
-            name:     'Bootpay',
-            fileName: 'index'
-        }
-    },
-    plugins:   [
-        dts({ copyDtsFiles: true, insertTypesEntry: true }),
-        cssInjectedByJsPlugin()
-    ],
-    base:      './',
-    root:      './',
-    publicDir: '_public',
-    resolve:   {
-        extensions: ['.css', '.sass', '.scss', '.ts', '.js', '.d.ts'],
-        alias:      {
-            '~': resolve(__dirname, 'src'),
-            // 또는 프로젝트 루트를 원한다면
-            // '~': resolve(__dirname, '.'),
+// npm 패키지 빌드 — `vite build` 와 `vite build --mode umd` 두 번 돌린다 (package.json build 스크립트)
+// - 기본: ES 모듈. 전체(index.mjs)와 결제 전용(payment.mjs) 진입점이 공통 코드를 chunks/ 로 공유한다
+// - umd: index.umd.js. UMD 는 진입점을 여러 개 둘 수 없어 따로 만든다 (기존 파일 경로 유지)
+export default defineConfig(({ mode }) => {
+    const umd = mode === 'umd'
+    return {
+        build:     {
+            minify:        'esbuild',
+            emptyOutDir:   !umd,
+            // CSS 를 import 한 chunk(공통 chunk)에 주입 코드를 넣는다 — 어느 진입점을 불러도 스타일이 들어가도록
+            cssCodeSplit:  !umd,
+            lib:           umd ? {
+                entry:    path.resolve(__dirname, 'src/index.ts'),
+                name:     'Bootpay',
+                fileName: 'index',
+                formats:  ['umd']
+            } : {
+                entry:    {
+                    index:   path.resolve(__dirname, 'src/index.ts'),
+                    payment: path.resolve(__dirname, 'src/payment.ts')
+                },
+                formats:  ['es'],
+                fileName: (_format, entryName) => `${ entryName }.mjs`
+            },
+            rollupOptions: umd ? {} : {
+                output: {
+                    chunkFileNames: 'chunks/[name]-[hash].mjs'
+                }
+            }
+        },
+        plugins:   umd ? [
+            cssInjectedByJsPlugin()
+        ] : [
+            dts({ copyDtsFiles: true, insertTypesEntry: true }),
+            cssInjectedByJsPlugin({ relativeCSSInjection: true })
+        ],
+        base:      './',
+        root:      './',
+        publicDir: '_public',
+        resolve:   {
+            extensions: ['.css', '.sass', '.scss', '.ts', '.js', '.d.ts'],
+            alias:      {
+                '~': resolve(__dirname, 'src'),
+                // 또는 프로젝트 루트를 원한다면
+                // '~': resolve(__dirname, '.'),
+            }
         }
     }
 })