쇼핑몰 결제창에 토스페이 선택 시 혜택 딱지를 노출하는 방법을 안내합니다.
대상 호스팅사: 카페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
복사
원하는 월 | 입력값 | 원하는 월 | 입력값 |
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
복사
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.
확인 항목:
토스페이 라벨 옆 파란 딱지 노출
최근 결제수단 옆 딱지 노출
(배너는 이 타입에서 노출되지 않음 — 정상입니다)
타입 ③ — 메이크샵형 (딱지 + 배너)
수정 필요 항목 한눈에 보기
# | 항목 | 위치 | 예시 |
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
복사
3-2. 혜택 내용 수정
html: '★토스페이 결제 시 최대 4천원 혜택★<br>...'
JavaScript
복사
금액 조건이나 혜택 내용을 수정할 경우 위 html: 값 안의 텍스트를 변경하세요.
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에게 연락해 주세요.








