Help Center

카페24 소식

[주문관리] 빠른결제 기능 (카페24페이먼츠, KSNET, LG U+ PG 이용고객 대상) - HTML/CSS

2017-05-03


안녕하세요. 카페24 운영도우미 입니다.

자세한 내용은 아래를 참조해주세요.




※ 아래 링크의 공통 CSS 파일이 반드시 존재해야 정상 노출되므로 없는 몰의 경우 먼저 추가해주시기 바랍니다.

☞ [공통 CSS 파일 확인 바로가기]



■ PC 쇼핑몰 - 스마트 디자인


1. 주문서작성 화면

1) 수정

- 위치 : 주문 (order) > 주문서작성 (orderform.html)


▼ 아래와 같이 파란색 소스를 추가합니다.

##상단 생략##


 <!-- 결제수단 -->
<div class="title">
    <h3>결제수단</h3>
    <span class="txtEm gIndent20 {$payment_save_paymethod_display|display}">
        {$payment_save_paymethod_checkbox}<label for="{$payment_save_paymethod_id}">{$payment_save_paymethod_text}</label>
    </span>
</div>
<div class="payArea">
    <div class="payment">
        <div class="method">{$form.addr_paymethod}</div>
 
        <!-- 카드사 직접결제 -->
        <!--@css(/css/module/order/form_paymentcard.css)-->
        {$directpay_card_form}
        {$directpay_card_agree}
 
        <div class="ec-base-table">
            <!-- 무통장입금 -->
            <table border="1" summary="" id="{$payment_input_cash}" style="display:none;">
            <caption>무통장입금</caption>


##하단 생략##



2) 신규
- 위치 : css > module > order > form_paymentcard.css

▼ 아래의 신규 소스 파일을 추가합니다.

 .gLabel { display:inline-block; }
.gLabel label { margin-right:20px; line-height:22px; }
.ec-order-payment-card { margin:10px 20px; }
.ec-order-payment-card .ec-base-table table { margin-top:20px; }
.ec-order-payment-card .ec-base-table .ec-base-help { display:inline-block; vertical-align:middle; }
.ec-order-payment-card .cardSelect { width:150px; }
.ec-order-payment-card .cardMethod { display:inline-block; margin:2px 0 0 7px; }
.ec-order-payment-card .cardMethod .gLabel { margin:0 7px 0 0; }
.ec-order-payment-card .btnNormal { display:inline-block; margin:0 0 2px 0; line-height:12px; padding:5px 7px 5px 7px; border:1px solid #b4b4b4; border-radius:2px; font-family:돋움,Dotum; font-size:12px; text-decoration:none; color:#000; background-color:#fff; }
.ec-order-payment-card .pgBanner img { max-width:100%; height:auto; }
.ec-order-payment-card .paymentAgree { border:1px solid #d7d5d5; }
.ec-order-payment-card .paymentAgree .all { position:relative; padding:10px 70px 10px 10px; font-weight:bold; background:#fbfafa; }
.ec-order-payment-card .btnToggle { position:absolute; top:10px; right:10px; font-size:12px; line-height:18px; color:#707070; outline:0; background:none; }
.ec-order-payment-card .btnToggle:after { display:inline-block; content:""; width:9px; height:5px; margin:-2px 0 0 4px; vertical-align:middle; background:url("//img.echosting.cafe24.com/skin/base/common/ico_arrow2.gif") no-repeat 0 0; }
.ec-order-payment-card .paymentAgree .detail { display:none; padding:10px 20px; border-top:1px solid #e9e9e9; }
.ec-order-payment-card .paymentAgree.selected .detail { display:block; }
.ec-order-payment-card .paymentAgree .check { margin:6px 0; }
.ec-order-payment-card .view { color:#aaa; }





■ 모바일 쇼핑몰 - 스마트 디자인


1. 주문서작성 화면

1) 수정

- 위치 : 주문 (order) > 주문서작성 (orderform.html)


▼ 아래와 같이 파란색 소스를 추가합니다.

##상단 생략##


                        <!-- 카카오페이 도움말 -->
                        <tr id="{$kakaopay_info}" class="help">
                            <td colspan="2">
                                <p>휴대폰에 설치된 카카오톡 앱에서 비밀번호 입력만으로 빠르고 안전하게 결제가 가능한 서비스 입니다.</p>
                                <p>안드로이드의 경우 구글 플레이, 아이폰의 경우 앱 스토어에서 카카오톡 앱을 설치 한 후, 최초 1회 카드정보를 등록하셔야 사용 가능합니다.</p>
                                <p>인터넷 익스플로러의 경우 8 이상에서만 결제 가능합니다.</p>
                                <p>BC카드 중 신한, 하나, 국민카드는 결제가 불가능합니다.</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
 
                <!-- 카드사 직접결제: 카드/할부선택 -->
                <!--@css(/css/module/order/form_paymentcard.css)-->
                {$directpay_card_form}
 
                <!-- 증명서류 발급 -->
                <div class="receipt">
                    <div id="{$cashreceipt_display_area}" class="cash {$cashreceipt_display|display}">
                        <table border="1" summary="">


<!-- 중략 -->
 
    <div class="priceArea">
 
<!-- 중략 -->
 
    <p id="{$chk_purchase_agreement}" class="sign">{$form.chk_purchase_agreement}</p>
 
    <!-- 카드사 직접결제: 결제약관 -->
    {$directpay_card_agree}
   
    <div class="btnArea type1" id="orderFixItem">
        <button type="button" class="btnSubmit" id="{$btn_payment_id}">결제하기</button>
    </div>


##하단 생략##




2) 신규
- 위치 : css > module > order > form_paymentcard.css

▼ 아래의 신규 소스 파일을 추가합니다.

 label { margin:0; display:inline-block; min-height:29px; line-height:29px; vertical-align:middle; }
input[type="radio"],
input[type="checkbox"] { margin:0 7px 0 0; }
.ec-order-payment-card .cardSelect { width:98%; }
.ec-order-payment-card .pgBanner img { max-width:100%; height:auto; }
.ec-order-payment-card .ec-base-help { margin:6px 0 5px 14px; }
.ec-order-payment-card .paymentAgree { margin:-1px 0 0; border:1px solid #d5d5d5; font-size:11px; background-color:#fff; }
.ec-order-payment-card .paymentAgree .all { position:relative; padding:0 0 0 9px; font-weight:bold; color:#508bed; }
.ec-order-payment-card .paymentAgree .btnToggle { position:absolute; top:50%; right:5px; padding:0; margin:-8px 0 0 0; color:#353535; border:0; font-size:11px; cursor:pointer; outline:0; background:transparent; }
.ec-order-payment-card .paymentAgree .btnToggle:after { display:inline-block; content:""; width:10px; height:10px; margin:-2px 0 0; vertical-align:middle; background:url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/ico_arrow_gray.png") no-repeat 0 0; background-size:10px auto; }
.ec-order-payment-card .paymentAgree .detail { display:none; padding:0 0 0 22px; border-top:1px solid #e9e9e9; }
.ec-order-payment-card .paymentAgree.selected .detail { display:block; }
.ec-order-payment-card .paymentAgree.selected .check { position:relative; }
.ec-order-payment-card .paymentAgree.selected .check .view { position:absolute; top:50%; right:14px; padding:0; margin:-8px 0 0 0; text-decoration:underline; color:#757575; border:0; font-size:11px; cursor:pointer; background:transparent; }





카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.

더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.

궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]