@bootpay/client-js 5.0.0-beta.9 → 5.0.0-rc.10

package/dist/src/lib/bootpay.d.ts

@@ -1,7 +1,7 @@
 import { BootpayManager } from "../support/bootpay-manager";
 import { SessionStorageManager } from "../support/storage";
 import { ConfirmModel, EnvironmentModel, ErrorModel, ExtraModel, ItemModel, RequestAuthenticationModel, RequestPaymentModel, RequestPaymentUrlModel, RequestSubscriptionModel } from "../models/bootpay-interface";
-import { EventLoggerManager } from "../support/logger";
+import { EventLoggerManager } from '../support/event-logger';
 export declare class BootpayRequestPaymentManager extends BootpayManager {
     $session: SessionStorageManager;
     $logger: any;

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

@@ -19,8 +19,6 @@ declare class BootpayPaymentEventManager extends BootpayWindowEvent {
      * 결제 이벤트를 바인딩한다
      * Comment by GOSOMI
      * @date: 2021-05-11
-     * @param resolve: Function
-     * @param reject: Function
      */
     bind(resolve: Function, reject: Function): void;
     /**
@@ -41,7 +39,6 @@ declare class BootpayPaymentEventManager extends BootpayWindowEvent {
      * Polling Event를 시작한다
      * Comment by GOSOMI
      * @date: 2021-12-29
-     * @param
      */
     startPollingEvent(): void;
     /**

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

@@ -1,4 +1,15 @@
 import { BootpayWindowEvent } from '../../support/event';
+import { ResponseBootpayWidgetTermsModel } from '../../models/bootpay-widget-interface';
+import { ExtraModel } from '../../models/bootpay-interface';
+export interface SelectPaymentEventData {
+    pg?: string;
+    method?: string;
+    wallet_id?: string;
+    term_passed?: boolean;
+    select_terms?: ResponseBootpayWidgetTermsModel[];
+    extra?: ExtraModel;
+    completed?: boolean;
+}
 declare class BootpayWidgetEventManager extends BootpayWindowEvent {
     $messageEventName: string;
     $eventPrefix: string;
@@ -16,6 +27,12 @@ declare class BootpayWidgetEventManager extends BootpayWindowEvent {
      * @date: 2023-06-15
      */
     destroyAllEvent(): void;
+    /**
+     * 결제 선택시 global 이벤트를 분리하여 호출한다
+     * Comment by GOSOMI
+     * @date: 2024-04-24
+     */
+    triggerGlobalChangeEvent(data: SelectPaymentEventData): void;
 }
 export declare const BootpayWidgetEvent: BootpayWidgetEventManager;
 export {};

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

@@ -0,0 +1,16 @@
+import { TemplateManager } from '../../support/template-manager';
+declare class ModalTemplateManager extends TemplateManager {
+    $windowId: string;
+    $modalWindowId: string;
+    $iFrameId: string;
+    $template: string;
+    $additionalClass: string;
+    constructor();
+    template(): string;
+    createIFrame(url: string): void;
+    destroy(): void;
+    resize(resizeData: any): void;
+    postMessage(event: string, data?: any): void;
+}
+export declare const ModalTemplate: ModalTemplateManager;
+export {};

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

@@ -10,7 +10,7 @@ declare class OOpayTemplateManager extends TemplateManager {
     constructor();
     template(): string;
     createIFrame(url: string): void;
-    addWallet(): void;
+    addWallet(url: string): void;
     removeWallet(walletId: string): void;
     showCardInterestInformation(data: any): void;
     destroy(): void;

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

@@ -1,5 +1,5 @@
 import { TemplateManager } from "../../support/template-manager";
-import { ConfirmModel } from "../../models/bootpay-interface";
+import { ConfirmModel, PopupDisplayResponseModel } from "../../models/bootpay-interface";
 declare class TemplatePaymentManager extends TemplateManager {
     $template: string;
     $formId: string;
@@ -46,6 +46,12 @@ declare class TemplatePaymentManager extends TemplateManager {
      * @returns void
      */
     setConfirmFormUrl(url: string): void;
+    /**
+     * 결제 승인시 redirect 인 경우 _self target으로 설정한다
+     * Comment by GOSOMI
+     * @date: 2024-06-12
+     */
+    setConfirmRedirect(url: string): void;
     /**
      * 결제 승인
      * Comment by GOSOMI
@@ -64,7 +70,7 @@ declare class TemplatePaymentManager extends TemplateManager {
      * @date: 2021-05-12
      * @returns void
      */
-    createPopupButton(displayData: any): void;
+    createPopupButton(displayData: PopupDisplayResponseModel): void;
     /**
      * 팝업창을 띄운다
      * Comment by GOSOMI
@@ -105,7 +111,7 @@ declare class TemplatePaymentManager extends TemplateManager {
      * @date: 2021-06-23
      * @returns void
      */
-    showPopupMessage(displayData: any): void;
+    showPopupMessage(displayData: PopupDisplayResponseModel): void;
     /**
      * 팝업 버튼 창을 닫는다
      * Comment by GOSOMI

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

@@ -4,7 +4,6 @@ declare class TemplateWidgetManager extends TemplateManager {
     $template: string;
     $iFrameId: string;
     $widgetStore: WidgetStoreModel;
-    isRendered: boolean;
     constructor();
     /**
      * 첫 Rendering을 진행한다
@@ -37,6 +36,12 @@ declare class TemplateWidgetManager extends TemplateManager {
      * @date: 2023-06-15
      */
     postMessage(event: string, data?: any): void;
+    /**
+     * render가 되었는지 체크한다
+     * Comment by GOSOMI
+     * @date: 2024-02-22
+     */
+    isRendered(): boolean;
 }
 export declare const TemplateWidget: TemplateWidgetManager;
 export {};

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

@@ -15,6 +15,7 @@ export interface RequestPaymentModel {
     order_name: string;
     price: number;
     tax_free?: number;
+    deposit_price?: number;
     platform_type?: number;
     currency?: string;
     order_id: string;
@@ -24,6 +25,9 @@ export interface RequestPaymentModel {
     tk?: string;
     user_token?: string;
     wallet_id?: string;
+    widget_key?: string;
+    commission_keys?: CommissionKeyModel;
+    redirect_url?: string;
     metadata?: any;
     user?: UserModel;
     items?: Array<ItemModel>;
@@ -51,6 +55,7 @@ export interface RequestSubscriptionModel {
     order_name: string;
     platform_type?: number;
     uuid?: string;
+    redirect_url?: string;
     sk?: string;
     ti?: number;
     tk?: string;
@@ -67,6 +72,7 @@ export interface RequestAuthenticationModel {
     pg: string;
     method?: string;
     order_name: string;
+    redirect_url?: string;
     platform_type?: number;
     uuid?: string;
     sk?: string;
@@ -211,9 +217,10 @@ export interface ExtraModel {
     easy_payment_method?: 'card' | '카드' | 'point' | '포인트';
     cash_receipt_type?: '소득공제' | '지출증빙';
     identity_no?: string;
+    override_global_event?: boolean;
 }
 export interface WidgetExtraModel {
-    card_quota?: string | string[];
+    card_quota?: string | string[] | number[];
     direct_card_company?: string;
     direct_card_quota?: string;
 }
@@ -238,4 +245,15 @@ export interface EnvironmentModel {
     width: number;
     height: number;
 }
+export interface PopupDisplayResponseModel {
+    gatewayUrl: string;
+    receiptId: string;
+    name: string;
+    message?: string;
+    price: number;
+}
+export interface CommissionKeyModel {
+    commerce?: string;
+    marketer?: string;
+}
 export {};

package/dist/src/models/bootpay-widget-interface.d.ts

@@ -4,6 +4,7 @@ export interface RequestBootpayWidgetModel {
     price: number;
     tax_free?: number;
     currency?: string;
+    key?: string;
     user_token?: string;
     use_only_oopay?: boolean;
     use_terms?: boolean;
@@ -23,3 +24,8 @@ export interface ExternalBootpayWidgetTermsModel {
     url: string;
     required: 'required' | 'optional';
 }
+export interface ExternalBootpaySelectModel {
+    payment_type?: string;
+    method_alias?: string;
+    wallet_id?: string;
+}

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

@@ -29,13 +29,14 @@ export interface EnvironmentInterface {
     WIDGET_URL: EnvironmentMode;
     sdkNames: SdkNameInterface;
     sdkVersion: string;
+    packageVersion: string;
     sdkName: number;
     set(env: 'development' | 'stage' | 'production'): void;
     setApplicationId(applicationId: string | undefined): string | undefined;
     setLocale(locale: string): void;
     currentApplicationId(applicationId: string | undefined): string | undefined;
     setDevelopmentHost(host: string): void;
-    setVersion(version: string, name: SdkKeyType): void;
+    setVersion(version: string, name: SdkKeyType, packageExtendVersion?: string | undefined): void;
     toApi(uri: string): string;
     toDoor(uri: string): string;
     toWidget(uri: string): string;

package/dist/src/support/event-logger.d.ts

@@ -0,0 +1,42 @@
+import { Resource } from './resource';
+import { SessionStorageManager } from './storage';
+interface EventDataModel {
+    application_id?: string;
+    step: string;
+    tk?: string;
+    status?: number;
+    msg?: string;
+    trace?: string;
+    request?: any;
+    response?: any;
+    version?: string;
+}
+export declare class EventLoggerManager extends Resource {
+    $session: SessionStorageManager;
+    $tk?: string;
+    $applicationId?: string;
+    $platformType?: number;
+    $receiptId?: string;
+    constructor();
+    /**
+     * Token키를 설정
+     * Comment by GOSOMI
+     * @date: 2021-05-20
+     * @param tokenKey: string
+     * @returns void
+     */
+    setTokenKey(tokenKey: string): void;
+    setReceiptId(receiptId: string): void;
+    clearInstance(): void;
+    send(eventData: EventDataModel): Promise<any> | void;
+    sendError(eventData: EventDataModel): void;
+    setApplicationId(key: string | undefined): void;
+    /**
+     * 결제창 닫기 이벤트를 전송한다
+     * Comment by GOSOMI
+     * @date: 2022-05-13
+     */
+    sendCloseEvent(): Promise<any>;
+}
+export declare const EventLogger: EventLoggerManager;
+export {};

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

@@ -1,22 +1,9 @@
-import { Resource } from "./resource";
-import { SessionStorageManager } from "./storage";
 export declare const LOG_LEVEL: {
     debug: number;
     info: number;
     warning: number;
     error: number;
 };
-interface EventDataModel {
-    application_id?: string;
-    step: string;
-    tk?: string;
-    status?: number;
-    msg?: string;
-    trace?: string;
-    request?: any;
-    response?: any;
-    version?: string;
-}
 export declare const Logger: {
     level: number;
     /**
@@ -32,32 +19,3 @@ export declare const Logger: {
     warn(key: string, message: any): void;
     error(key: string, message: any): void;
 };
-export declare class EventLoggerManager extends Resource {
-    $session: SessionStorageManager;
-    $tk?: string;
-    $applicationId?: string;
-    $platformType?: number;
-    $receiptId?: string;
-    constructor();
-    /**
-     * Token키를 설정
-     * Comment by GOSOMI
-     * @date: 2021-05-20
-     * @param tokenKey: string
-     * @returns void
-     */
-    setTokenKey(tokenKey: string): void;
-    setReceiptId(receiptId: string): void;
-    clearInstance(): void;
-    send(eventData: EventDataModel): Promise<any> | void;
-    sendError(eventData: EventDataModel): void;
-    setApplicationId(key: string | undefined): void;
-    /**
-     * 결제창 닫기 이벤트를 전송한다
-     * Comment by GOSOMI
-     * @date: 2022-05-13
-     */
-    sendCloseEvent(): Promise<any>;
-}
-export declare const EventLogger: EventLoggerManager;
-export {};

package/dist/src/support/template-manager.d.ts

@@ -10,5 +10,6 @@ export declare class TemplateManager extends BootpayManager {
      * @date: 2022-02-16
      */
     createTemplateHtml(): void;
+    bodyOpen(addClass?: string | undefined): void;
     templateResize(el: string, resizeData: any): void;
 }

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

@@ -2,3 +2,4 @@ export declare const generateUUID: () => string;
 export declare const isBlank: (value: any) => boolean;
 export declare const isPresent: (value: any) => boolean;
 export declare const isType: (value: any, type: string) => boolean;
+export declare const toUrl: (url: string, parameters?: undefined) => string;

package/dist/src/support/widget-store.d.ts

@@ -5,12 +5,14 @@ export interface WidgetStoreModel {
     applicationId: string | undefined;
     price: number;
     taxFree: number | undefined;
+    depositPrice: number | undefined;
     currency: string | undefined;
     userToken: string | undefined;
     pg: string | undefined;
     method: string | undefined;
     walletId?: string;
     useOnlyOOpay: boolean;
+    widgetKey?: string | undefined;
     termsPassed: boolean;
     sandbox: boolean;
     useTerms: boolean;
@@ -27,6 +29,7 @@ export interface WidgetStoreData {
     application_id?: string;
     price?: number;
     tax_free?: number;
+    deposit_price?: number;
     currency?: string;
     user_token?: string;
     pg?: string;
@@ -35,6 +38,7 @@ export interface WidgetStoreData {
     use_only_oopay?: boolean;
     use_terms?: boolean;
     sandbox?: boolean;
+    widget_key?: string;
     external_terms?: ExternalBootpayWidgetTermsModel[];
     widget_extra?: WidgetExtraModel;
 }

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@bootpay/client-js",
-  "version": "5.0.0-beta.9",
+  "version": "5.0.0-rc.10",
   "main": "dist/index.es.js",
   "types": "dist/src/index.d.ts",
+  "styles": "dist/index.css",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "rm -rf ./dist && vite build",
@@ -38,7 +39,8 @@
     "style-loader": "^3.3.3",
     "vite": "^5.0.10",
     "vite-plugin-dts": "^3.6.4",
-    "vite-plugin-tsconfig": "^1.0.4"
+    "vite-plugin-tsconfig": "^1.0.4",
+    "vite-plugin-css-injected-by-js": "^3.3.0"
   },
   "resolutions": {
     "@webpack-cli/serve": "^1.3.1"

package/vite.config.ts

@@ -1,23 +1,27 @@
 import { defineConfig } from 'vite'
 import dts from 'vite-plugin-dts'
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 
 const path = require('path')
 
 export default defineConfig({
-    build:   {
-        target: 'esnext',
+    build:     {
+        target: 'es6',
         minify: 'terser',
         lib:    {
             entry:    path.resolve(__dirname, 'src/index.ts'),
             name:     'Bootpay',
             fileName: (format) => `index.${ format }.js`
-        },
+        }
     },
-    base:    './',
-    plugins: [
-        dts()
+    base:      './',
+    root:      './',
+    plugins:   [
+        dts(),
+        cssInjectedByJsPlugin()
     ],
-    resolve: {
+    publicDir: '_public',
+    resolve:   {
         extensions: ['.css', '.sass', '.scss', '.ts', '.js']
     }
 })

package/dist/style.css

@@ -1 +0,0 @@
-.bootpay-progress-background{position:fixed;display:block;background-color:transparent;inset:0;text-align:center;z-index:200000;white-space:nowrap}.bootpay-progress-background.blur-off{background-color:transparent}.bootpay-progress-background:before{display:inline-block;height:100%;content:" ";vertical-align:middle}.bootpay-progress-background .progress-message-window{display:inline-block;text-align:center;max-width:600px;border-radius:3px;width:100%;background-color:transparent;padding:0;vertical-align:middle}@media (min-width: 600px){.bootpay-progress-background .progress-message-window{padding:1rem}}.bootpay-progress-background .progress-message-window .bootpay-spinner{display:inline-block;width:50px;height:50px;border-radius:50%;border-top:2px solid rgba(255,255,255,.2);border-right:2px solid rgba(255,255,255,.2);border-bottom:2px solid rgba(255,255,255,.2);border-left:2px solid #ffffff;animation:spin 1s infinite linear}.bootpay-progress-background .progress-message-window .alfred-text{margin-top:1rem}.bootpay-progress-background .progress-message-window .alfred-text span.alfred-inner-text{font-weight:400;color:#eee}@keyframes spin{0%{transform:rotate(0);border-left:2px solid #ffffff;border-top:2px solid rgba(255,255,255,.2);border-right:2px solid rgba(255,255,255,.2);border-bottom:2px solid rgba(255,255,255,.2)}50%{transform:rotate(180deg);border-left:3px solid #ffffff;border-top:2px solid rgba(255,255,255,.4);border-right:2px solid rgba(255,255,255,.4);border-bottom:2px solid rgba(255,255,255,.4)}to{transform:rotate(360deg);border-left:2px solid #ffffff;border-top:2px solid rgba(255,255,255,.2);border-right:2px solid rgba(255,255,255,.2);border-bottom:2px solid rgba(255,255,255,.2)}}body.bootpay-open{position:fixed!important;inset:0;padding:0;margin:0;height:100vh!important;overflow:hidden!important;-webkit-overflow-scrolling:auto!important}body.bootpay-open .bootpay-payment-background{position:fixed;inset:0;display:block;text-align:center;background-color:#000000b3;z-index:9999}body.bootpay-open .bootpay-payment-background:before{display:inline-block;vertical-align:middle;height:100%;content:" "}body.bootpay-open .bootpay-payment-background>.bootpay-payment-window{position:relative;display:inline-block;vertical-align:middle}body.bootpay-open .bootpay-payment-background>.bootpay-payment-window.__mobile{max-width:470px;height:90%}@media (max-width: 768px){body.bootpay-open .bootpay-payment-background>.bootpay-payment-window{position:absolute;inset:0;border-radius:0!important}body.bootpay-open .bootpay-payment-background>.bootpay-payment-window.__mobile{position:absolute;max-width:inherit;inset:0;height:100%}body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>iframe{width:100%!important;height:100%!important;border-radius:0}}body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>button.bootpay-payment-close{position:absolute;display:none;top:-32px;right:4px;color:#fff;font-size:32px;text-decoration:none;outline:none;box-shadow:none;border:0;background-color:transparent}body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>button.bootpay-payment-close:before,body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>button.bootpay-payment-close:after{width:2px!important;background-color:#fff!important}@media (max-width: 768px){body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>button.bootpay-payment-close{top:1rem;right:16px;color:#000;padding:0}body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>button.bootpay-payment-close:before,body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>button.bootpay-payment-close:after{width:2px!important;background-color:#000!important}}body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>.bootpay-popup-window{position:relative;width:400px;height:600px;display:none;background-color:#fff;border-radius:5px;overflow:hidden}@media (max-width: 768px){body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>.bootpay-popup-window{position:absolute;inset:0;width:100%;height:100%;border-radius:0}}body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>.bootpay-popup-window>.header{position:absolute;left:0;right:0;top:0;height:50px;color:#333;background-color:#fff;text-align:left}body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>.bootpay-popup-window>.body{position:absolute;inset:50px 0 72px;padding:1rem;text-align:left;font-size:14px}body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>.bootpay-popup-window>.body>#bootpay-item-name-id{font-size:16px;color:#888;font-weight:400!important;text-align:center}body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>.bootpay-popup-window>.body>#bootpay-price-id{font-size:36px;color:#333;font-weight:700;text-align:center}body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>.bootpay-popup-window>.body>.agree-text{position:absolute;bottom:1rem;left:0;right:0;color:#888;font-size:14px;text-align:center}body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>.bootpay-popup-window>.footer{position:absolute;left:0;right:0;bottom:0;height:72px;padding:0 1rem;margin:0}body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>.bootpay-popup-window>.footer>button.bootpay-button{display:block;width:100%;padding:1rem;outline:none;border:none;background-color:#507cf3;border-radius:5px;color:#fff;font-size:16px}body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>.bootpay-popup-window>.footer>button.bootpay-button:hover,body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>.bootpay-popup-window>.footer>button.bootpay-button:active{outline:none;box-shadow:none}body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>iframe{width:100%;height:100%;display:none;border:0!important;outline:0!important;border-radius:0;box-shadow:none}@media (min-width: 600px){body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>iframe{width:0;height:0;border:0;outline:0;border-radius:0!important;box-shadow:none!important}}body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>iframe.rounded-iframe{border-radius:20px}@media (min-width: 600px){body.bootpay-open .bootpay-payment-background>.bootpay-payment-window>iframe.rounded-iframe{width:0;height:0;border:0;outline:0;border-radius:20px!important;box-shadow:none!important}}body.bootpay-open .bootpay-payment-background>.bootpay-confirm-window>iframe{display:none;width:1px;height:1px;background:transparent;border:0!important;outline:0!important}.bootpay-close-btn{position:absolute;box-shadow:none;background-color:#fff;outline:0;z-index:10001;right:8px;top:8px;height:21px;width:21px;border:2px solid #333}@media (min-width: 600px){.bootpay-close-btn{right:4px;top:-32px;width:25px;height:25px;border:0;background:transparent}}.bootpay-close-btn.active,.bootpay-close-btn:focus{border:0;outline:0}.bootpay-close-btn:before,.bootpay-close-btn:after{position:absolute;left:8px;top:2px;content:" ";height:15px;width:1px;background-color:#333}@media (min-width: 600px){.bootpay-close-btn:before,.bootpay-close-btn:after{height:23px;top:0;width:2px;background-color:#fff}}.bootpay-close-btn:before{transform:rotate(45deg)}.bootpay-close-btn:after{transform:rotate(-45deg)}

package/dist/test/payment/css/style.css

@@ -1,52 +0,0 @@
-html {
-    margin: 0;
-    padding: 0;
-}
-
-body {
-    margin: 0;
-    padding: 0;
-}
-
-.container {
-    max-width: 600px;
-    margin: 0 auto;
-    width: 100%;
-    padding: 1rem;
-}
-
-.widget-background {
-    background-color: #e2e8f0;
-}
-
-@media (max-width: 500px) {
-
-    .flex-container {
-        display: block;
-    }
-
-    .widget-left, .widget-right {
-        flex: 0;
-    }
-
-    .widget-left .widget-container {
-        border-radius: 10px;
-        overflow: hidden;
-    }
-}
-
-@media (min-width: 500px) {
-    .flex-container {
-        display: flex;
-    }
-
-    .widget-left {
-        flex: 1;
-        padding: 1rem;
-    }
-
-    .widget-right {
-        flex: 0 500px;
-        padding: 1rem;
-    }
-}

package/dist/test/payment/ehowlsla.html

@@ -1,92 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>결제 테스트 페이지 (개발서버)</title>
-    <meta charset="utf-8"/>
-    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="none"/>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
-          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-    <link rel="stylesheet" media="all" href="./css/style.css"/>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
-            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
-            crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
-            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
-            crossorigin="anonymous"></script>
-    <script src="../../bootpay-latest.js" type="application/javascript"></script>
-    <script src="./js/development-ehowlsla.js" type="application/javascript"></script>
-    <meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport">
-</head>
-<body>
-<div class="container">
-    <div class="card">
-        <div class="card-header">
-            <h5 class="card-title">테스트 결제 페이지입니다</h5>
-            <h6 class="card-subtitle mb-2 text-muted">테스트 서버로 결제 요청을 할 수 있습니다.</h6>
-        </div>
-        <div class="card-body">
-            <div class="form-group">
-                <label>결제할 금액</label>
-                <input class="form-control" value="100" name="amount"/>
-            </div>
-            <div class="form-group">
-                <label>면세로 설정할 금액</label>
-                <input class="form-control" value="0" name="taxFreeAmount"/>
-            </div>
-            <div class="form-group">
-                <label>PG</label>
-                <select class="form-control" name="pg">
-                    <option value="이니시스">이니시스</option>
-                    <option value="다날">다날</option>
-                    <option value="케이씨피">KCP</option>
-                    <option value="나이스페이">나이스페이</option>
-                    <option value="토스">토스</option>
-                    <option value="스트라이프">스트라이프</option>
-                    <option value="페이팔">페이팔</option>
-                    <option value="페이레터">페이레터</option>
-                    <option value="페이앱">페이앱</option>
-                    <option value="이지페이">이지페이</option>
-                    <option value="유디페이">유디페이</option>
-                    <option value="페이코">페이코</option>
-                    <option value="카카오">카카오</option>
-                    <option value="세틀뱅크">세틀뱅크</option>
-                    <option value="티페이">티페이</option>
-                    <option value="웰컴페이먼츠">웰컴페이먼츠</option>
-                    <option value="스마트로">스마트로</option>
-                </select>
-            </div>
-            <div class="form-group">
-                <label>결제수단</label>
-                <select class="form-control" name="method">
-                    <option value="카드">카드결제</option>
-                    <option value="휴대폰">휴대폰</option>
-                    <option value="계좌이체">계좌이체</option>
-                    <option value="가상계좌">가상계좌</option>
-                    <option value="카카오페이">카카오페이</option>
-                    <option value="네이버페이">네이버페이</option>
-                    <option value="페이코">페이코</option>
-                    <option value="간편결제">간편결제</option>
-                    <option value="카드정기결제">카드정기결제(창결제)</option>
-                    <option value="정기결제">간편정기결제(창결제)</option>
-                    <option value="디지털카드">디지털카드</option>
-                    <option value="디지털정기결제">디지털정기결제</option>
-                    <option value="본인인증">본인인증</option>
-                    <option value="카드수기">카드수기결제</option>
-                </select>
-            </div>
-            <div class="group text-center mt-3">
-                <button class="btn btn-primary" onclick="requestMethod()">
-                    선택된 결제하기
-                </button>
-                <button class="btn btn-warning ml-2" onClick="requestTotalPayment()">
-                    통합결제창
-                </button>
-            </div>
-        </div>
-    </div>
-</div>
-</body>
-</html>