const cardCodes = [
{cd: '3K', nm: '기업비씨'},
{cd: '46', nm: '광주'},
{cd: '71', nm: '롯데'},
{cd: '30', nm: '산업'},
{cd: '31', nm: '비씨'},
{cd: '51', nm: '삼성'},
{cd: '38', nm: '새마을'},
{cd: '41', nm: '신한'},
{cd: '62', nm: '신협'},
{cd: '36', nm: '씨티'},
{cd: '33', nm: '우리'},
{cd: 'W1', nm: '우리'},
{cd: '37', nm: '우체국'},
{cd: '39', nm: '저축'},
{cd: '35', nm: '전북'},
{cd: '42', nm: '제주'},
{cd: '15', nm: '카카오뱅크'},
{cd: '3A', nm: '케이뱅크'},
{cd: '24', nm: '토스뱅크'},
{cd: '21', nm: '하나'},
{cd: '61', nm: '현대'},
{cd: '11', nm: '국민'},
{cd: '91', nm: '농협'},
{cd: '34', nm: '수협'}
];
const bankCodes = [
{cd: '39', nm: '경남'},
{cd: '34', nm: '광주'},
{cd: '12', nm: '단위농협'},
{cd: '32', nm: '부산'},
{cd: '45', nm: '새마을'},
{cd: '64', nm: '산림'},
{cd: '88', nm: '신한'},
{cd: '48', nm: '신협'},
{cd: '27', nm: '씨티'},
{cd: '20', nm: '우리'},
{cd: '71', nm: '우체국'},
{cd: '50', nm: '저축'},
{cd: '37', nm: '전북'},
{cd: '35', nm: '제주'},
{cd: '90', nm: '카카오'},
{cd: '89', nm: '케이'},
{cd: '92', nm: '토스'},
{cd: '81', nm: '하나'},
{cd: '54', nm: '-'},
{cd: '03', nm: '기업'},
{cd: '06', nm: '국민'},
{cd: '31', nm: '대구'},
{cd: '02', nm: '산업'},
{cd: '11', nm: '농협'},
{cd: '23', nm: 'SC제일'},
{cd: '07', nm: '수협'}
];
let card_mileage_rate = '0';
let account_mileage_rate = '0';
let customerKey = ''; // 고객을 식별할 수 있는 키
let cardCnt = 0; // 등록된 카드 수
let accCnt = 0; // 등록된 계좌 수
// 브랜드 페이 초기화
let brandpay = BrandPay(gcPayClientKey, customerKey, {
redirectUrl: window.location.origin + '/crm/ordr/selectGcpayToken',
// UI 커스터마이징 옵션 설정 (optional)
ui: {
highlightColor: '#26C2E3',
buttonStyle: 'full',
labels: {
oneTouchPay: '지씨페이',
},
},
});
$(document).ready(function() {
// 카드 추가 버튼 클릭
$(document).on('click', '#gcpay_card_add', function() {
brandpay.addPaymentMethod('카드')
.then(function (methods) {
set_gcpay_method(methods, false);
})
.catch(function (error) {
if (error.code === 'USER_CANCEL') { // 사용자가 결제창을 닫은 경우 에러 처리
alert('GC PAY 카드 간편결제가 취소되었습니다.');
} else {
console.log(error);
}
})
});
// 계좌 추가 버튼 클릭
$(document).on('click', '#gcpay_account_add', function() {
brandpay
.addPaymentMethod('계좌')
.then(function (methods) {
set_gcpay_method(methods, false);
})
.catch(function (error) {
if (error.code === 'USER_CANCEL') {
alert('GC PAY 계좌 간편결제가 취소되었습니다.');
} else {
console.log(error);
}
})
});
// 이전/다음 버튼 클릭
$(document).on('click', '.slick-arrow', function() {
const div = $(this).closest('.slideW');
const classs = $(div).attr('class');
const isCard = classs.includes('card');
if (isCard) {
const wrap = $(this).closest('.pgContent').find('.selectWrap');
$(wrap).find('.card-installment-plan option:first').prop('selected', true);
$(wrap).find('.use-card-point').prop('checked', false);
}
const isBank = classs.includes('bank');
if (isBank) {
const wrap = $(this).closest('.pgContent').find('.selectWrap');
$(wrap).find('#gc-pay-bank-cash-receipt').prop('checked', true);
$(wrap).find('#gc-pay-bank-cash-receipt').trigger('click');
}
});
});
// 브랜드 페이 초기화
function initBrandPay(mbrInnb) {
customerKey = mbrInnb;
brandpay = BrandPay(gcPayClientKey, customerKey, {
redirectUrl: window.location.origin + '/crm/ordr/selectGcpayToken',
// UI 커스터마이징 옵션 설정 (optional)
ui: {
highlightColor: '#26C2E3',
buttonStyle: 'full',
labels: {
oneTouchPay: '지씨페이',
},
},
});
cardCnt = 0;
accCnt = 0;
get_gcpay_methods(); // 등록된 카드 정보로 출력
}
// 슬라이딩 초기화
function set_slick(isInit) {
if (!isInit) {
$('.cardSlideW').slick('slickRemove', null, null, true);
$('.slideDep').slick('slickRemove', null, null, true);
$('.bankSlideW').slick('slickRemove', null, null, true);
}
$('.bankSlideW').not('.slick-initialized').slick({
initialSlide: 0, //처음보여줄 슬라이드 번호
slidesToShow: 1, //한 화면에 보여줄 아이템수
slidesToScroll: 1, // 한번에 슬라이드 시킬 아이템 개수
dots: false,
arrows: true,
autoplay: false,
infinite: false,
centerMode: true,
variableWidth: true,
focusOnSelect: true,
speed: 300
});
$('.cardSlideW').not('.slick-initialized').slick({
initialSlide: 0, // 처음보여줄 슬라이드 번호
slidesToShow: 1, // 한 화면에 보여줄 아이템수
slidesToScroll: 1, // 한번에 슬라이드 시킬 아이템 개수
dots: false,
arrows: true,
autoplay: false,
infinite: false,
centerMode: true,
variableWidth: true,
focusOnSelect: true,
speed: 300,
asNavFor: '.slideDep'
});
$('.slideDep').not('.slick-initialized').slick({
initialSlide: 0, // 처음보여줄 슬라이드 번호
slidesToShow: 1,
slidesToScroll: 1,
dots: false,
arrows: false,
autoplay: false,
infinite: false,
centerMode: true,
focusOnSelect: true,
fade: true,
speed: 300,
adaptiveHeight: true,
draggable: false,
asNavFor: '.cardSlideW'
});
}
// 무이자할부, 포인트 등 프로모션 정보 조회
function get_promotion_data() {
$.ajax({
type: 'post',
contentType: 'application/json',
dataType: 'json',
url: '/crm/ordr/selectGcpayCardPromtns',
success: function (data) {
if (data.resBody != null) {
const result = JSON.parse(data.resBody.result);
// console.log('-------- cardPromtns --------');
// console.log(result.response);
// console.log('-----------------------------');
get_promotion_html(result.response);
}
},
error: function (data) {
console.log(data); //fn_proc_error_message(data);
}
});
}
// 무이자할부, 포인트 등 프로모션 정보 세팅
function get_promotion_html(data){
if (fn_is_empty(data)) {
return false;
}
const div = $('#gcpay-cardInfo-pop');
const tbody = $(div).find('tbody');
const cards = data.interestFreeCards;
let freecard_html= '';
for (let i = 0; i < cards.length; i++) {
const card = cards[i];
freecard_html += '
';
freecard_html += ' ' + get_card_cmpny_nm(card.companyCode) + ' ';
freecard_html += ' ' + card.minimumPaymentAmount.toLocaleString() + '원 ';
freecard_html += ' ' + card.installmentFreeMonths + ' ';
freecard_html += ' ';
}
$(tbody).empty().append(freecard_html);
}
// 간편결제 카드, 계좌 추가 버튼 Dislay
function gcpay_add_info() {
let card_html;
let card_msg = '간편결제 카드를 등록하시고 간편한 결제를 경험해 보세요.';
if (card_mileage_rate > 0) {
card_msg = '간편결제 카드를 등록하시고 결제하면 결제금액의 ' + card_mileage_rate + '% 마일리지 추가 적립 혜택을 드려요. ';
$('#card_rate').text('GC PAY 카드 간편 결제로 결제시 통합 마일리지 ' + card_mileage_rate + '% 추가 적립');
}
let acc_msg = '간편결제 계좌 등록하시고 간편한 결제를 경험해 보세요.';
if (account_mileage_rate > 0) {
acc_msg = '간편결제 계좌 등록하고 결제하면 결제금액의 ' + account_mileage_rate + '% 마일리지 추가 적립 혜택을 드려요. ';
$('#account_rate').text('GC PAY 계좌 간편 결제로 결제시 통합 마일리지 ' + account_mileage_rate + '% 추가 적립');
}
let card_div_nm = 'id="gcpay_card_add"';
let acc_div_nm = 'id="gcpay_account_add"';
let add_slide = '#';
if (!customerKey) {
const member_button = ' 회원가입하러 가기 ';
card_msg = '회원가입 후 ' + card_msg + member_button;
acc_msg = '회원가입 후 ' + acc_msg + member_button;
card_div_nm = '';
acc_div_nm = '';
add_slide = 'javascript:alert(\'회원가입 후 사용하실 수 있습니다\');'
}
if (cardCnt === 0 || !cardCnt) {
card_html = '';
$('.cardSlideW').slick('slickAdd', card_html);
$('.slideDep').slick('slickAdd', '
');
}
/* 관리자에선 추가없음
card_html = '';
$('.cardSlideW').slick('slickAdd', card_html);*/
$('.slideDep').slick('slickAdd', '
');
if (accCnt === 0 || !accCnt) {
$('.bankSlideW').slick('slickAdd', '');
}
/* 관리자에선 추가없음
const account_html = '';
$('.bankSlideW').slick('slickAdd', account_html);*/
}
// 등록된 카드 정보 가져오기
function get_gcpay_methods(){
if (fn_is_empty(customerKey)) {
return false;
}
brandpay
.getPaymentMethods()
.then(function (methods) {
console.log('-------- methods --------');
console.log(methods);
console.log('-------------------------');
set_gcpay_method(methods);
})
.catch(function (error) {
console.log(error)
display_default_methods(); // 등록 정보 가져오기 못할 경우 기본 Display
});
}
// 등록된 카드 정보로 Display
function set_gcpay_method(methods){
set_slick(false); // slick 슬라이딩 init
const cards = methods['cards']; // 등록된 카드 정보
cards.forEach(function(card, index) {
var promIdx = 0;
const dsplyCardNumber = card.cardNumber.substring(0, 4) + ' ' + card.cardNumber.substring(4, 8) + ' ' + card.cardNumber.substring(8, 12) + ' ' + card.cardNumber.substring(12, 16); // 노출 하기 위한 카드 번호
const cardCss = get_card_css(get_card_cmpny_nm(card.acquirerCode));
let isPromotion = false; // 무이자 할부 사용 여부
let isPoint = false; // 포인트 사용 여부
let cardHtml = '';
let optionHtml = ''; // 포인트 사용 및 무이자 할부 html 초기화
const date = new Date();
const today = date.getFullYear() + '-' + ((date.getMonth() + 1) < 9 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)) + '-' + ((date.getDate()) < 9 ? '0' + (date.getDate()) : (date.getDate()));
const rlSetleAmt = $('#rlSetleAmt').val();
cardCnt = 0;
accCnt = 0;
if ('ENABLED' === card.status) {
const promotions = card['promotions']; // 프로모션
if (!fn_is_empty(promotions)) {
promotions.forEach(function (promotion) {
const type = promotion.type;
if ('CARD_POINT' === type) { // 카드 포인트 할인
const cardPoint = promotion['cardPoint'];
if (!fn_is_empty(cardPoint)) {
// if (cardPoint.issuerCode === card.acquirerCode) { //해당 카드의 프로모션만 제공하여 비교X 2025.09.09 토스답변
if (cardPoint.dueDate >= today) {
optionHtml += '';
optionHtml += ' ';
optionHtml += ' ';
optionHtml += ' ';
optionHtml += ' ' + card.cardName + '카드 포인트 사용 ';
optionHtml += ' ';
optionHtml += ' ';
isPoint = true;
}
// }
}
}
if ('CARD_INTEREST_FREE' === type && promIdx == 0) { // 카드 포인트 할인
promIdx++;
const interestFreeCards = promotion['cardInterestFree'];
if (!fn_is_empty(interestFreeCards)) {
// if (interestFreeCards.issuerCode === card.acquirerCode) { //해당 카드의 프로모션만 제공하여 비교X 2025.09.09 토스답변
if (diff_date(interestFreeCards.dueDate, today) <= 0) {
if (card.ownerType === '개인' && card.cardType === '신용') {
optionHtml += get_free_month_html(index, interestFreeCards.installmentFreeMonths, interestFreeCards.minimumPaymentAmount, rlSetleAmt, card.cardType);
} else {
if (card.ownerType === '법인') {
optionHtml += get_free_month_html(index, interestFreeCards.installmentFreeMonths, 1, 2, card.cardType);
} else {
optionHtml += get_free_month_html(index, interestFreeCards.installmentFreeMonths, 2, 1, card.cardType);
}
}
isPromotion = true;
}
// }
}
}
});
}
if (isPromotion === false) { // 프로모션 없을 경우
optionHtml += get_free_month_html(index, null, 2, 1, '');
}
cardHtml += '';
cardHtml += '
';
cardHtml += '
';
cardHtml += '
';
cardHtml += ' ' + card.cardName + ' ';
cardHtml += ' ' + dsplyCardNumber + ' ';
cardHtml += '
';
cardHtml += '
';
cardHtml += '
';
cardHtml += '
';
cardHtml += '
';
cardHtml += '
';
cardHtml += '
';
cardHtml += '
';
cardHtml += '
';
cardHtml += '
';
cardHtml += '
';
cardHtml += '
';
} else { // 사용불가 카드
cardHtml += '';
cardHtml += '
';
cardHtml += '
사용 불가능한 카드입니다.
';
cardHtml += '
';
cardHtml += '
';
cardHtml += ' ' + card.cardName + ' ';
cardHtml += ' ' + dsplyCardNumber + ' ';
cardHtml += ' ';
cardHtml += '
';
cardHtml += '
';
cardHtml += '
';
}
if (!isPoint) { // 포인트 사용 정보 없을 경우
optionHtml = ' ' + optionHtml;
}
optionHtml = '';
$('.cardSlideW').slick('slickAdd', cardHtml); // 카드 슬라인딩 추가
$('.slideDep').slick('slickAdd', optionHtml); // 카드 행사 ( 포인트 사용, 무이자 할부 ) 슬라이딩 추가
$('.slideDep').find('.select-box select').niceSelect();
cardCnt++; // 카드 등록 수 추가
});
const accounts = methods['accounts']; // 등록된 계좌 정보
if (!fn_is_empty(accounts)) {
accounts.forEach(function(account, index) {
let accountHtml = '';
const bankCss = get_bank_css(get_bank_nm(account.bankCode)); // css 계좌 코드 가져오기
if ('ENABLED' === account.status) {
accountHtml += '';
accountHtml += '
';
accountHtml += '
';
accountHtml += '
';
accountHtml += ' ' + account.accountName + ' ';
accountHtml += ' ' + account.accountNumber + ' ';
accountHtml += '
';
accountHtml += '
';
accountHtml += '
';
accountHtml += '
';
accountHtml += '
';
accountHtml += '
';
accountHtml += '
';
accountHtml += '
';
accountHtml += '
';
accountHtml += '
';
accountHtml += '';
} else {
accountHtml += '';
accountHtml += '
';
accountHtml += '
사용 불가능한 계좌입니다.
';
accountHtml += '
';
accountHtml += '
';
accountHtml += ' ' + account.accountName + ' ';
accountHtml += ' ' + account.accountNumber + ' ';
accountHtml += '
';
accountHtml += '
';
accountHtml += '';
$('.selectWrap').hide();
}
$('.bankSlideW').slick("slickAdd", accountHtml); // 계좌 슬라이딩 추가
accCnt++; // 계좌 등록 수 추가
});
}
gcpay_add_info(); // 결제 수단 추가 버튼 노출
}
// 무이자 할부 개월수 가져오기
function get_free_month_html(index, installmentFreeMonths, p_amount, t_price, cardType) {
let option_html = '';
let option_list = '';
let month_disabled = '';
if (cardType === '신용') {
if (Number(p_amount) <= Number(t_price)) {
if (installmentFreeMonths) {
for (let i = 2; i <= 12; i++) {
if (installmentFreeMonths.indexOf(parseInt(i)) !== -1) {
option_list += '' + i + '개월 무이자 ';
} else {
option_list += '' + i + '개월 ';
}
}
}
if (option_list === '') {
for (let i = 2; i <= 12; i++) {
option_list += '' + i + '개월 ';
}
}
if (option_list !== '') {
month_disabled = '';
}
} else {
month_disabled = 'disabled';
}
} else {
month_disabled = 'disabled';
}
option_html += '';
option_html += ' ';
option_html += ' ';
option_html += ' 일시불 ';
option_html += option_list;
option_html += ' ';
option_html += '
';
option_html += ' ';
return option_html;
}
// 결제 수단 기본 레이아웃 ( 안내 슬라이딩 , 등록 슬라이딩 ) Display
function display_default_methods() {
set_slick(false);
gcpay_add_info();
}
/* 카드사 코드명 조회 */
function get_card_cmpny_nm(cd) {
return cardCodes.filter(() => true).find(o => o.cd === cd).nm;
}
/* 은행 코드명 조회 */
function get_bank_nm(cd) {
return bankCodes.filter(() => true).find(o => o.cd === cd).nm;
}
/* 날자 비교 */
function diff_date(strDate1, strDate2) {
const dateArray1 = strDate1.split('-');
const dateArray2 = strDate2.split('-');
const dateObj1 = new Date(dateArray1[0], Number(dateArray1[1]) - 1, dateArray1[2]);
const dateObj2 = new Date(dateArray2[0], Number(dateArray2[1]) - 1, dateArray2[2]);
return (dateObj2.getTime() - dateObj1.getTime()) / 1000 / 60 / 60 / 24;
}
// 카드 CSS 코드
function get_card_css(company) {
var cardCode = '';
switch (company) {
case '농협':
cardCode = '001';
break;
case '우리':
cardCode = '002';
break;
case '신한':
cardCode = '003';
break;
case '국민':
cardCode = '004';
break;
case '하나':
cardCode = '005';
break;
case '씨티':
cardCode = '006';
break;
case '삼성':
cardCode = '025';
break;
case '현대':
cardCode = '026';
break;
case '롯데':
cardCode = '027';
break;
case 'VISA':
cardCode = '028';
break;
case '마스터':
cardCode = '029';
break;
case '비씨':
cardCode = '030';
break;
case 'BC':
cardCode = '030';
break;
case '현대백화점':
cardCode = '031';
break;
case '갤러리아':
cardCode = '032';
break;
case '기업':
cardCode = '007';
break;
case '산업':
cardCode = '008';
break;
case 'SC제일':
cardCode = '009';
break;
case '대구':
cardCode = '010';
break;
case '부산':
cardCode = '011';
break;
case '전북':
cardCode = '012';
break;
case '경남':
cardCode = '013';
break;
case '제주':
cardCode = '014';
break;
case '광주':
cardCode = '015';
break;
case '새마을':
cardCode = '016';
break;
case '수협':
cardCode = '017';
break;
case '신협':
cardCode = '018';
break;
case '우체국':
cardCode = '019';
break;
case '케이':
cardCode = '020';
break;
case '카카오':
cardCode = '021';
break;
case '저축':
cardCode = '022';
break;
case '산림':
cardCode = '023';
break;
case '토스':
cardCode = '024';
break;
}
return cardCode;
}
// 계좌 CSS
function get_bank_css(bank) {
var bankCode = '';
switch (bank) {
case '농협':
bankCode = '001';
break;
case '우리':
bankCode = '002';
break;
case '신한':
bankCode = '003';
break;
case '국민':
bankCode = '004';
break;
case '하나':
bankCode = '005';
break;
case '씨티':
bankCode = '006';
break;
case '기업':
bankCode = '007';
break;
case '산업':
bankCode = '008';
break;
case 'SC제일':
bankCode = '009';
break;
case '대구':
bankCode = '010';
break;
case '부산':
bankCode = '011';
break;
case '전북':
bankCode = '012';
break;
case '경남':
bankCode = '013';
break;
case '제주':
bankCode = '014';
break;
case '광주':
bankCode = '015';
break;
case '새마을':
bankCode = '016';
break;
case '수협':
bankCode = '017';
break;
case '신협':
bankCode = '018';
break;
case '우체국':
bankCode = '019';
break;
case '케이':
bankCode = '020';
break;
case '카카오':
bankCode = '021';
break;
case '저축':
bankCode = '022';
break;
case '산림':
bankCode = '023';
break;
case '토스':
bankCode = '024';
break;
}
return bankCode;
}