UI API

POS 플러그인에서 제공하는 UI 컴포넌트 API입니다. 바코드 스캔 팝업과 입력 모달을 제공합니다.

import 방식

ui는 posPluginSdk의 프로퍼티가 아닌 독립 export입니다.

import { ui } from '@tossplace/pos-plugin-sdk';

Methods

openBarcode

바코드 스캔 팝업을 표시합니다.

import { ui } from '@tossplace/pos-plugin-sdk';

const result = await ui.openBarcode({
    productName: '토스 POS 플러그인', // 팝업 왼쪽 상단에 표시
});

if (result.complete && result.data.result === 'SUCCESS') {
    console.log('스캔된 바코드:', result.data.barcode);
} else if (result.complete && result.data.result === 'CANCELLED') {
    console.log('사용자가 취소했습니다');
} else {
    console.error('스캔 실패:', result.errorMessage);
}

응답 타입

성공

{
    type: 'barcode';
    complete: true;
    data: {
        barcode: string;    // 스캔된 바코드 값
        result: 'SUCCESS';
    } | {
        result: 'CANCELLED'; // 사용자 취소
    };
}

에러

{
    type: 'barcode';
    complete: false;
    errorMessage: string;
}

openInputModal

입력 폼 모달을 표시합니다. 다양한 입력 타입을 조합하여 사용할 수 있습니다.

import { ui } from '@tossplace/pos-plugin-sdk';

const result = await ui.openInputModal({
    title: '배달 정보 입력',
    description: '배달에 필요한 정보를 입력해주세요',
    inputs: [
        { id: 'address', type: 'text', label: '주소', required: true, placeholder: '주소를 입력하세요' },
        { id: 'memo', type: 'text', label: '요청사항', required: false, placeholder: '요청사항을 입력하세요' },
    ],
    cta: {
        submit: { label: '확인' },
        cancel: { label: '취소' },
    },
});

if (result.complete && result.data.result === 'SUCCESS') {
    const { address, memo } = result.data.inputs;
    console.log('주소:', address);
}

inputs 타입

type	설명
text	텍스트 입력
password	비밀번호 입력 (마스킹 처리)
number	숫자 입력
radio	단일 선택
checkbox	다중 선택
toggle	토글 스위치
slider	슬라이더 (0, 25, 50, 75, 100)

응답 타입

성공

{
    type: 'input';
    complete: true;
    data: {
        inputs: Record<string, string | number | boolean | string[]>; // id: value
        result: 'SUCCESS';
    } | {
        result: 'CANCELLED'; // 사용자 취소
    };
}

에러

{
    type: 'input';
    complete: false;
    errorMessage: string;
}