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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
정기결제 카드 등록
카드 정보를 등록하면 매달 자동으로 결제됩니다.
// ------ STEP 1. SDK Import ------import Bootpay from '@bootpay/client-js' export default { methods: { // ------ STEP 2. 빌링키 발급 요청 ------ async requestBillingKey() { try { const response = await Bootpay.requestSubscription({ application_id: '5b8f6a4d396fa665fdc2b5e7', pg: 'nicepay', method: 'card_auto', order_name: '정기결제 카드 등록', subscription_id: 'SUB-' + Date.now(), price: 0, tax_free: 0, user: { id: 'user_123', username: '홍길동', phone: '01012345678', email: 'user@example.com' }, extra: { open_type: 'iframe', subscribe_test_payment: true } }) // ------ STEP 3. 발급 결과 처리 ------ switch (response.event) { case 'done': console.log('빌링키 발급 완료:', response.receipt_id) this.lookupBillingKeyOnServer(response.receipt_id) break case 'issued': console.log('가상계좌 발급:', response) break } } catch (e) { switch (e.event) { case 'cancel': console.log('사용자 취소:', e.message) break case 'error': console.log('발급 오류:', e.error_code, e.message) break } } }, // ------ STEP 4. 서버에서 빌링키 조회 ------ async lookupBillingKeyOnServer(receiptId) { const result = await fetch('/api/billing/lookup', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ receipt_id: receiptId }) }).then(res => res.json()) if (result.billing_key) { alert('카드 등록이 완료되었습니다!') this.$router.push('/mypage/cards') } } }}