시작하기결제 매뉴얼커머스 매뉴얼

상품 목록 임베딩

개발 중인 화면에 쉽게 상품 리스트를 추가할 수 있습니다.
사용자는 상품을 클릭하면 결제 화면으로 이동하여 바로 결제를 진행할 수 있습니다.
별도의 복잡한 백엔드 연동 없이 간편하게 구현 가능합니다.

HTML 샘플 파일: 샘플 다운로드 - 바로 실행해볼 수 있는 예제 파일입니다.
1
상품 등록 (관리자)
Admin

Commerce SDK를 사용하기 전에, 먼저 부트페이 관리자에서 판매할 상품을 등록해야 합니다.

상품 등록, 가격 설정, 카테고리 등 상세한 설정은 부트페이 관리자에서 진행하세요.
상품 등록 시 필요한 정보
  • 상품명사용자에게 표시될 상품 이름
  • 가격상품 가격 (단건/구독 가격)
  • 카테고리상품 분류 (카테고리별로 표시됨)
  • 이미지상품 썸네일 이미지
2
클라이언트 키 발급
Admin

환경 설정하기를 통해 클라이언트 키를 발급받아야 합니다. 발급 후 키를 소스코드에 추가해야 합니다.

키 변경 후 데이터가 안 보이는 경우: 브라우저 캐시를 삭제하거나 시크릿 모드에서 확인해주세요.
3
HTML 영역 설정
Client

상품 리스트가 렌더링될 HTML 영역을 지정합니다. div 요소에 고유한 ID를 부여하세요.

예시: <div id="bootpay-shop"></div>
영역 설정
  • id렌더링할 요소의 고유 식별자
  • width영역 너비 (CSS로 설정 가능)
  • min-height최소 높이 (600px 권장)
4
렌더링 호출
Client

BootpayCommerce.render()를 호출하여 상품 리스트를 표시합니다.

렌더링 흐름: SDK 로드 → render() 호출 → 상품 리스트 표시 → 클릭 시 결제
필수 파라미터
  • selector렌더링할 HTML 요소 선택자 (예: #bootpay-shop)
  • client_key부트페이에서 발급받은 클라이언트 키
extra 옵션
  • window.width창 너비 (예: '100%', '500px')
  • window.height창 높이 (예: '100%', '600px')
  • window.resizable창 크기 조절 가능 여부
5
이벤트 처리
Client
선택

렌더링 완료 후 추가 작업이 필요한 경우 hooks를 사용합니다.

hooks 옵션
  • onReady렌더링이 완료되면 실행되는 이벤트
고객 세션 업데이트

특정 고객으로 로그인된 상태로 표시하려면 고객 토큰을 발급받아 세션을 업데이트합니다.

세션 업데이트: BootpayCommerce.sendEvent('updateUserSession', token)

고급 기능

고객 세션 관리

특정 고객으로 로그인된 상태에서 상품 리스트를 표시할 수 있습니다.

고객 토큰으로 세션 업데이트
// onReady 이벤트에서 호출
hooks: {
  onReady: () => {
    const token = "발급받은_고객_토큰"
    BootpayCommerce.sendEvent('updateUserSession', token)
  }
}
고객 토큰은 고객 로그인 토큰 API를 통해 발급받을 수 있습니다.
창 크기 설정

렌더링되는 영역의 크기를 조절할 수 있습니다.

width창 너비 (예: '100%', '800px')
height창 높이 (예: '100%', '600px')
resizable크기 조절 가능 여부 (true/false)
fullscreen전체화면 모드 (true/false)
언어
설치 방식
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html><html lang="ko"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>부트페이 상품 리스트</title>     <!-- 부트페이 Commerce SDK (CDN) -->    <script src="https://js.bootpay.co.kr/commerce/bp-commerce-sdk-1.0.2.min.js"></script>     <style>        body {            margin: 0;            padding: 20px;            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;        }        #bootpay-shop {            width: 100%;            min-height: 600px;            border: 1px solid #e5e7eb;            border-radius: 8px;        }    </style></head><body>    <h1>상품 목록</h1>     <!-- 상품 리스트가 렌더링될 영역 -->    <div id="bootpay-shop"></div>     <script>        // 부트페이 상품 리스트 렌더링        window.BootpayCommerce.render('#bootpay-shop', {            // 부트페이에서 발급받은 클라이언트 키            client_key: 'YOUR_CLIENT_KEY',             // 렌더링 옵션            extra: {                window: {                    width: '100%',                    height: '100%',                    fullscreen: true                }            },             // 이벤트 핸들러            hooks: {                onReady: () => {                    console.log('상품 리스트 렌더링 완료')                     // 특정 고객으로 로그인이 필요한 경우                    // 고객 토큰을 발급받아 세션을 업데이트합니다                    // const token = "발급받은_고객_토큰"                    // window.BootpayCommerce.sendEvent('updateUserSession', token)                }            }        })    </script></body></html>