Search

카페24/메이크샵 결제창 프로모션 노출용 html 세팅 가이드

쇼핑몰 결제창에 토스페이 선택 시 혜택 딱지를 노출하는 방법을 안내합니다. 대상 호스팅사: 카페24 / 메이크샵
커스텀 페이지를 사용하고 계시거나, 외주사를 통해 홈페이지 운영을 하고 계신 경우 코드 충돌을 방지하기 위해 관련 부서 또는 외주사와 확인 후 적용해 주시기 바랍니다.

코드 타입 선택 (먼저 확인하세요!)

호스팅사 종류와 함께 활용 가능하신 타입을 보고 선택해 주세요.
타입
호스팅사
노출 요소
특징
① 배너형
카페24
딱지 + 혜택 배너
토스페이 선택 시 배너 펼쳐짐
② 뱃지형
카페24
딱지만
심플, 배너 없음
③ 메이크샵 전용
메이크샵
딱지 + 혜택 배너
날짜 형식 다름, 가맹점명 입력 필요

완성 화면 미리보기

배너형(카페24)
뱃지형(카페24)
메이크샵형

타입 1 — 카페24 배너형

수정 필요 항목

#
항목
위치
예시
1
프로모션 시작일
new Date(2025, 8, 1)
9월 1일 → (2025, 8, 1)
2
프로모션 종료일
new Date(2025, 11, 31, ...)
12월 31일 → (2025, 11, 31)
3
딱지 문구
b.innerHTML 내 두 곳
"최대 4000원 헤택"
4
혜택 배너 내용

STEP 1. 카페24 관리자 접속 > 코드 붙여넣기

1.
카페24 관리자 페이지 접속 (ecfront.cafe24.com/admin)
2.
좌측 메뉴 → 디자인 (PC/모바일)디자인 편집
3.
왼쪽 바에서 주문서 화면명 검색: orderform, 주문서 작성 등...
4.
/order/orderform.html 선택 → 파일 열기

STEP 2. 코드 붙여넣기 위치

파일 내에서 </body> 태그를 찾고, 그 위에 코드를 붙여넣습니다.
...기존 코드... [여기에 붙여넣기] </body>
Plain Text
복사

붙여넣을 코드

<script>(function(){ var _done=false,_tries=0,_maxTries=20,_interval=250,_obsTimer=null,_observer=null; function safe(fn){try{fn&&fn();}catch(e){}} function isVisible(el){ if(!el) return false; var cs = window.getComputedStyle(el); if(cs.display==='none' || cs.visibility==='hidden' || cs.opacity==='0') return false; var r = el.getBoundingClientRect(); return (r.width>0 && r.height>0); } function mount(){ if(_done) return; var now=new Date(); var start=new Date(2026,4,15); // ✏️ 시작일 (월은 -1) var end=new Date(2026,5,14,23,59,59); // ✏️ 종료일 (월은 -1) if(isNaN(start.getTime())||isNaN(end.getTime())||now<start||now>end) return; if(!document.getElementById('ogong-toggle-style')){ var st=document.createElement('style'); st.id='ogong-toggle-style'; st.type='text/css'; st.appendChild(document.createTextNode(".ogong-badge .toggle-text{display:none}.ogong-badge.toggled .default-text{display:none}.ogong-badge.toggled .toggle-text{display:inline}.ogong-badge--recent{margin-left:8px}.ogong-banner{display:block!important;width:100%!important;box-sizing:border-box!important;margin-top:12px!important;padding:12px 14px!important;border-radius:12px!important;background:#f4f7ff!important;color:black!important;font-size:13px!important;line-height:1.4!important;font-weight:700!important;text-align:left!important}.ogong-banner__title{display:flex;align-items:center;font-size:14px;font-weight:800;margin-bottom:6px}.ogong-banner__title img{width:16px;height:16px;margin-right:6px}")); (document.head||document.documentElement).appendChild(st); } var qs=function(s,root){return (root||document).querySelector(s);}; var toss = qs('input[name="addr_paymethod"][value="toss"],input[name="settleKind"][value="pt"],input[name="paymethod"][value="toss"],input[name="radio_paymethod"][value="TOSS"]'); if(!toss){ return false; } var label = toss.id ? qs('label[for="'+toss.id+'"]') : null; if(!label) label = (toss.closest && toss.closest('label')) || toss.parentElement; function findPayContainer(from){ var n = from; for(var i=0;i<8 && n;i++){ var cnt=n.querySelectorAll('input[name="paymethod"], input[name="addr_paymethod"], input[name="settleKind"], input[name="radio_paymethod"]').length; if(cnt>=2) return n; n=n.parentElement; } return (from.closest && from.closest('.payment, #payment, .order_payment, .order-wrap, form')) || document.body; } var payContainer = findPayContainer(toss); if(label && !label.querySelector('.ogong-badge.ogong-badge--label')){ var b=document.createElement('span'); b.className='ogong-badge ogong-badge--label'; b.setAttribute('style',"display:inline-flex !important;align-items:center !important;vertical-align:middle !important;white-space:nowrap !important;cursor:default !important;pointer-events:none !important;background:#3a76ff !important;color:#ffffff !important;font-size:11px !important;padding:1.5px 8px 1.5px 8px !important;margin-left:4px !important;border-radius:12px !important;font-weight:bold !important"); b.innerHTML='<span class="default-text" style="color:#ffffff">최대 4000원 혜택</span><span class="toggle-text" style="color:#ffffff">최대 4000원 혜택</span>'; // ✏️ 딱지 문구 (2곳 동일하게) b.classList.toggle('toggled', !!toss.checked); toss.addEventListener('change', function(){ b.classList.toggle('toggled',toss.checked); }, {passive:true}); label.appendChild(b); } function findRecentLabel(root){ if(!root) return null; var el = root.querySelector('label[for="paymethod-recent"]'); if(el && isVisible(el)) return el; var candidates = root.querySelectorAll('label, .pay_label, .label, span, strong, div'); for(var i=0;i<candidates.length;i++){ var n=candidates[i]; var t=(n.textContent||'').replace(/\s+/g,'').trim(); if(t==='최근결제수단' && isVisible(n)) return n; } return null; } var recentLabel = findRecentLabel(payContainer); if(recentLabel && !recentLabel.querySelector('.ogong-badge.ogong-badge--recent')){ var r=document.createElement('span'); r.className='ogong-badge ogong-badge--recent'; r.setAttribute('style',"display:inline-flex !important;align-items:center !important;vertical-align:middle !important;white-space:nowrap !important;cursor:default !important;pointer-events:none !important;background:#3a76ff !important;color:#ffffff !important;font-size:11px !important;padding:1.5px 8px 1.5px 8px !important;margin-left:4px !important;border-radius:12px !important;font-weight:bold !important"); r.innerHTML='<span style="color:#ffffff">토스페이로 결제 시 최대 4000원 혜택</span>'; // ✏️ 최근결제수단 딱지 문구 recentLabel.appendChild(r); } var tipHtml=(function(b64){try{if(window.TextDecoder){var bytes=Uint8Array.from(atob(b64),c=>c.charCodeAt(0));return new TextDecoder('utf-8').decode(bytes);}}catch(e){}try{return decodeURIComponent(escape(atob(b64)));}catch(e){}try{return atob(b64);}catch(e){}return '';})("NeunjOybkCDsnbTsg4Eg6rKw7KCcIOyLnCwgMeyynOybkCDsponsi5wg7ZWg7J24PGJyPu2GoOyKpO2OmOydtOqwgCDsspjsnYzsnbTrnbzrqbQsIDPsspzsm5Ag7LaU6rCAIOyggeumvQ=="); // ✏️ 배너 내용 (담당자에게 문의) var container=payContainer; if(container){ var bar=container.querySelector('.ogong-banner'); if(!bar){ bar=document.createElement('div'); bar.className='ogong-banner'; bar.innerHTML='<div class="ogong-banner__title"><img src="https://static.toss.im/icons/png/4x/icon-toss-logo.png" alt=""/>토스페이 결제 시 혜택</div><div>'+tipHtml+'</div>'; container.appendChild(bar); } var syncBanner=function(){ bar.style.display = toss.checked ? 'block' : 'none'; }; syncBanner(); toss.addEventListener('change', syncBanner, {passive:true}); } _done=true; return true; } function poll(){ if(_done) return; _tries++; if(mount()) return; if(_tries>=_maxTries){ safe(function(){ if(_observer){_observer.disconnect();} if(_obsTimer){clearTimeout(_obsTimer);} }); return; } setTimeout(poll, _interval); } safe(function(){ _observer = new MutationObserver(function(){ mount(); }); _observer.observe(document.documentElement || document.body, {childList:true,subtree:true}); _obsTimer = setTimeout(function(){ safe(function(){_observer.disconnect();}); }, 5000); }); mount(); poll(); })();</script>
JavaScript
복사

STEP 3. 수정 항목 상세 안내

3-1. 프로모션 기간 수정

var start = new Date(2025, 8, 1); // ← 시작일 수정 var end = new Date(2025, 11, 31, 23, 59, 59); // ← 종료일 수정
JavaScript
복사
JavaScript 월(Month)은 0부터 시작합니다 — 원하는 월에서 1을 빼주세요!
원하는 월
입력값
원하는 월
입력값
1월
0
7월
6
2월
1
8월
7
3월
2
9월
8
4월
3
10월
9
5월
4
11월
10
6월
5
12월
11
예시 — 2026년 3월 1일 ~ 5월 31일:
var start = new Date(2026, 2, 1); // 3월 → 2 var end = new Date(2026, 4, 31, 23, 59, 59); // 5월 → 4
JavaScript
복사

3-2. 딱지(Badge) 문구 수정

토스페이 라벨 옆에 노출되는 파란 딱지 텍스트입니다.
b.innerHTML = '<span class="default-text" style="color:#ffffff">최대 4000원 혜택</span>' + '<span class="toggle-text" style="color:#ffffff">최대 4000원 혜택</span>';
JavaScript
복사
두 곳(default-text / toggle-text) 모두 동일하게 수정하세요.

3-3. 혜택 배너 내용 수정

배너 내용(tipHtml)은 base64로 인코딩되어 있습니다.
현재 내용:
토스페이로 결제 시 최대 4000원 혜택
Plain Text
복사
내용 변경 시 토스페이 담당자에게 변경할 내용을 전달하면 업데이트된 스크립트를 받을 수 있습니다.

STEP 4. 저장 및 확인

1.
미리보기 버튼으로 먼저 확인
2.
이상 없으면 저장 클릭
3.
실제 결제 페이지에서 토스페이 선택 후 확인:
토스페이 라벨 옆 파란 딱지 노출
하단 혜택 배너 노출
배너 내용이 최신 프로모션 내용과 일치

타입 ② — 카페24 뱃지형 (딱지만)

배너 없이 딱지만 노출하는 심플 버전입니다.

수정 필요 항목 한눈에 보기

#
항목
위치
예시
1
프로모션 시작일
new Date(2025, 8, 1)
9월 1일
2
프로모션 종료일
new Date(2025, 11, 31, ...)
12월 31일
3
딱지 문구
b.innerHTML 내 두 곳
"혜택"
4
최근결제수단 딱지
r.innerHTML
"토스페이로 결제 시 혜택"

STEP 1. 카페24 관리자 접속 > 코드 붙여넣기

타입 ①과 동일합니다:
디자인 편집 → orderform 검색 → /order/orderform.html</body> 위에 붙여넣기
파일 내에서 </body> 태그를 찾고, 그 위에 코드를 붙여넣습니다.
...기존 코드... [여기에 붙여넣기] </body>
Plain Text
복사

붙여넣을 코드

<script>(function(){ var _done=false,_tries=0,_maxTries=20,_interval=250,_obsTimer=null,_observer=null; function safe(fn){try{fn&&fn();}catch(e){}} function isVisible(el){ if(!el) return false; var cs = window.getComputedStyle(el); if(cs.display==='none' || cs.visibility==='hidden' || cs.opacity==='0') return false; var r = el.getBoundingClientRect(); return (r.width>0 && r.height>0); } function mount(){ if(_done) return; var now=new Date(); var start=new Date(2026,4,15); // ✏️ 시작일 (월은 -1) var end=new Date(2026,5,14,23,59,59); // ✏️ 종료일 (월은 -1) if(isNaN(start.getTime())||isNaN(end.getTime())||now<start||now>end) return; if(!document.getElementById('ogong-toggle-style')){ var st=document.createElement('style'); st.id='ogong-toggle-style'; st.type='text/css'; st.appendChild(document.createTextNode(".ogong-badge .toggle-text{display:none}.ogong-badge.toggled .default-text{display:none}.ogong-badge.toggled .toggle-text{display:inline}.ogong-badge--recent{margin-left:8px}")); (document.head||document.documentElement).appendChild(st); } var qs=function(s,root){return (root||document).querySelector(s);}; var toss = qs('input[name="addr_paymethod"][value="toss"],input[name="settleKind"][value="pt"],input[name="paymethod"][value="toss"],input[name="radio_paymethod"][value="TOSS"]'); if(!toss){ return false; } var label = toss.id ? qs('label[for="'+toss.id+'"]') : null; if(!label) label = (toss.closest && toss.closest('label')) || toss.parentElement; function findPayContainer(from){ var n = from; for(var i=0;i<8 && n;i++){ var cnt=n.querySelectorAll('input[name="paymethod"], input[name="addr_paymethod"], input[name="settleKind"], input[name="radio_paymethod"]').length; if(cnt>=2) return n; n=n.parentElement; } return (from.closest && from.closest('.payment, #payment, .order_payment, .order-wrap, form')) || document.body; } var payContainer = findPayContainer(toss); if(label && !label.querySelector('.ogong-badge.ogong-badge--label')){ var b=document.createElement('span'); b.className='ogong-badge ogong-badge--label'; b.setAttribute('style',"display:inline-flex !important;align-items:center !important;vertical-align:middle !important;white-space:nowrap !important;cursor:default !important;pointer-events:none !important;background:#3a76ff !important;color:#ffffff !important;font-size:11px !important;padding:1.5px 8px 1.5px 8px !important;margin-left:4px !important;border-radius:12px !important;font-weight:bold !important"); b.innerHTML='<span class="default-text" style="color:#ffffff">혜택</span><span class="toggle-text" style="color:#ffffff">혜택</span>'; // ✏️ 딱지 문구 (2곳 동일하게) b.classList.toggle('toggled', !!toss.checked); toss.addEventListener('change', function(){ b.classList.toggle('toggled',toss.checked); }, {passive:true}); label.appendChild(b); } function findRecentLabel(root){ if(!root) return null; var el = root.querySelector('label[for="paymethod-recent"]'); if(el && isVisible(el)) return el; var candidates = root.querySelectorAll('label, .pay_label, .label, span, strong, div'); for(var i=0;i<candidates.length;i++){ var n=candidates[i]; var t=(n.textContent||'').replace(/\s+/g,'').trim(); if(t==='최근결제수단' && isVisible(n)) return n; } return null; } var recentLabel = findRecentLabel(payContainer); if(recentLabel && !recentLabel.querySelector('.ogong-badge.ogong-badge--recent')){ var r=document.createElement('span'); r.className='ogong-badge ogong-badge--recent'; r.setAttribute('style',"display:inline-flex !important;align-items:center !important;vertical-align:middle !important;white-space:nowrap !important;cursor:default !important;pointer-events:none !important;background:#3a76ff !important;color:#ffffff !important;font-size:11px !important;padding:1.5px 8px 1.5px 8px !important;margin-left:4px !important;border-radius:12px !important;font-weight:bold !important"); r.innerHTML='<span style="color:#ffffff">토스페이로 결제 시 최대 4천원 혜택</span>'; // ✏️ 최근결제수단 딱지 문구 recentLabel.appendChild(r); } _done=true; return true; } function poll(){ if(_done) return; _tries++; if(mount()) return; if(_tries>=_maxTries){ safe(function(){ if(_observer){_observer.disconnect();} if(_obsTimer){clearTimeout(_obsTimer);} }); return; } setTimeout(poll, _interval); } safe(function(){ _observer = new MutationObserver(function(){ mount(); }); _observer.observe(document.documentElement || document.body, {childList:true,subtree:true}); _obsTimer = setTimeout(function(){ safe(function(){_observer.disconnect();}); }, 5000); }); mount(); poll(); })();</script>
JavaScript
복사

STEP 2. 수정 항목 상세 안내

2-1. 프로모션 기간 수정

타입 ①과 동일 방식입니다 (월은 0부터 시작):
var start = new Date(2025, 8, 1); var end = new Date(2025, 11, 31, 23, 59, 59);
JavaScript
복사

2-2. 딱지 문구 수정 (토스페이 라벨 옆)

b.innerHTML = '<span class="default-text" style="color:#ffffff">혜택</span>' + '<span class="toggle-text" style="color:#ffffff">혜택</span>';
JavaScript
복사
두 곳 모두 동일하게 수정하세요.

2-3. 최근 결제수단 딱지 문구 수정

r.innerHTML = '<span style="color:#ffffff">토스페이로 결제 시 최대 4천원 혜택</span>';
JavaScript
복사

STEP 3. 저장 및 확인

1.
미리보기저장
2.
확인 항목:
토스페이 라벨 옆 파란 딱지 노출
최근 결제수단 옆 딱지 노출
(배너는 이 타입에서 노출되지 않음 — 정상입니다)

타입 ③ — 메이크샵형 (딱지 + 배너)

날짜 형식이 카페24와 다릅니다! 'YYYY/MM/DD' 문자열 방식으로 입력하며, 월에서 1을 빼지 않아도 됩니다.

수정 필요 항목 한눈에 보기

#
항목
위치
예시
1
프로모션 시작일
new Date('2026/MM/DD')
new Date('2026/03/01')
2
프로모션 종료일
new Date('2026/MM/DD')
new Date('2026/05/31')
3
가맹점명
{{가맹점}}
→ 실제 가맹점명으로 변경
4
혜택 내용
promo.html 내 텍스트
조건 및 금액 수정
5
딱지 문구
el.textContent
'최대 4천원 혜택'

STEP 1. 메이크샵 관리자 접속

1.
메이크샵 관리자 로그인
2.
디자인디자인 편집 클릭
3.
주문서 또는 고급형 주문서 선택
4.
HTML 편집기 열기

STEP 2. 코드 붙여넣기 위치

HTML의 가장 하단에 붙여넣습니다.
...기존 HTML 내용... [여기 가장 마지막에 붙여넣기]
Plain Text
복사

붙여넣을 코드

<script> document.addEventListener('DOMContentLoaded', function () { const promo = { start: new Date('2026/03/15'), // ✏️ 시작일 (YYYY/MM/DD 그대로 입력) end: new Date('2026/06/14'), // ✏️ 종료일 (YYYY/MM/DD 그대로 입력) html: '★토스페이 결제 시 최대 4천원 혜택★<br>- 5만원 이상 결제 시, 1천원 즉시할인 + 토스페이 처음 쓰면 3천원 추가 적립' // ✏️ {{가맹점}} → 실제 가맹점명, 혜택 내용 수정 }; const now = new Date(); const active = now >= promo.start && now <= promo.end; const q = s => document.querySelector(s); (function attachTossLabelBadge(){ const MAX_TRY = 20, INTERVAL = 150; let tries = 0, timer = null; function findToss(){ return q('input[name="radio_paymethod"][value="TOSS"]'); } function findLabel(input){ if (!input) return null; return input.closest('label') || (input.id ? q(`label[for="${input.id}"]`) : null) || input.closest('li')?.querySelector('label') || null; } function makeBadge(){ const el = document.createElement('span'); el.id = 'toss-benefit-badge'; el.textContent = '최대 4천원 혜택'; // ✏️ 딱지 문구 el.setAttribute('aria-label','토스페이 혜택'); el.style.cssText = [ 'margin-left:6px !important','padding:2px 6px !important', 'border-radius:999px !important','font-size:12px !important', 'line-height:1 !important','font-weight:600 !important', 'background:#1f7afe !important','color:#fff !important', 'white-space:nowrap !important','pointer-events:none !important', 'vertical-align:middle !important' ].join(';'); return el; } function run(){ const input = findToss(); const label = findLabel(input); if (!label) return false; if (!label.querySelector('#toss-benefit-badge')) { label.appendChild(makeBadge()); } return true; } if (!run()) { timer = setInterval(() => { tries++; if (run() || tries >= MAX_TRY) clearInterval(timer); }, INTERVAL); } })(); (function mountTossBanner(){ if (!active) return; const ref = q('ul.pay-method'); if (!ref || !ref.parentNode) return; let ul = q('#payinfo_TOSS'); if (!ul) { ul = document.createElement('ul'); ul.id = 'payinfo_TOSS'; ul.className = 'payment-info'; ref.parentNode.insertBefore(ul, ref.nextSibling); } let li = ul.querySelector('li[data-role="toss-promo"]'); if (!li) { li = document.createElement('li'); li.setAttribute('data-role','toss-promo'); li.style.cssText = 'padding:0;margin:0 0 3px 0;line-height:18px;list-style:none;letter-spacing:-1px;'; li.innerHTML = `<font color="red"><strong>· ${promo.html}</strong></font>`; ul.prepend(li); } const radios = document.querySelectorAll('input[name="radio_paymethod"]'); function toggle(){ const toss = q('input[name="radio_paymethod"][value="TOSS"]'); li.style.display = (toss && toss.checked) ? '' : 'none'; } radios.forEach(r => r.addEventListener('change', toggle)); toggle(); })(); }); </script>
JavaScript
복사

STEP 3. 수정 항목 상세 안내

3-1. 프로모션 기간 수정

const promo = { start: new Date('2026/MM/DD'), // ← 시작일: 연/월/일 형식으로 입력 end: new Date('2026/MM/DD'), // ← 종료일: 연/월/일 형식으로 입력 ... };
JavaScript
복사
예시 — 2026년 3월 1일 ~ 5월 31일:
start: new Date('2026/03/01'), // ✅ 월 그대로 입력 (1을 빼지 않아도 됨!) end: new Date('2026/05/31'),
JavaScript
복사
카페24와 달리 월에서 1을 빼지 않아도 됩니다! 'YYYY/MM/DD' 형식 그대로 입력하세요.

3-2. 혜택 내용 수정

html: '★토스페이 결제 시 최대 4천원 혜택★<br>...'
JavaScript
복사
금액 조건이나 혜택 내용을 수정할 경우 위 html: 값 안의 텍스트를 변경하세요.
<br>은 줄바꿈 태그이므로 삭제하지 마세요.

3-4. 딱지(Badge) 문구 수정

el.textContent = '최대 4천원 혜택'; // ← 딱지 텍스트 수정
JavaScript
복사

STEP 4. 저장 및 확인

1.
편집기에서 저장
2.
실제 결제 페이지에서 확인:
토스페이 라벨 옆 파란 딱지 노출
토스페이 선택 시 하단 배너 노출 (다른 결제수단 선택 시 사라지면 정상)
가맹점명이 올바르게 표시됨
배너 내용이 최신 프로모션 내용과 일치

공통 FAQ

Q. 배너가 노출되지 않아요. → 프로모션 기간 설정을 확인하세요. 기간 밖에서는 노출되지 않습니다.
Q. 토스페이를 선택해도 배너가 안 보여요 (메이크샵). → 기간 설정과 함께, ul.pay-method 요소가 페이지에 존재하는지 확인하세요.
Q. 결제 수단 목록에 토스페이가 없어요. → 관리자 → 결제 수단 설정에서 토스페이 활성화 여부를 확인하세요.
Q. 카페24 월 숫자가 헷갈려요. → 원하는 월에서 1을 빼면 됩니다. (9월 → 8, 12월 → 11)
Q. 메이크샵은 왜 월을 안 빼도 되나요? → 카페24 코드는 new Date(년, 월, 일) 방식(월 0-based), 메이크샵 코드는 new Date('YYYY/MM/DD') 문자열 방식이라 직관적으로 입력 가능합니다.
Q. 테스트 하고 싶어요.start를 오늘 날짜보다 과거로, end를 미래로 설정하면 바로 확인 가능합니다.
※ 본 가이드는 카페24 및 메이크샵 기준으로 작성되었으며, 호스팅사별 적용 방법에 차이가 있을 수 있습니다. 세팅 관련 문의는 담당 토스페이 PM에게 연락해 주세요.