본문 바로가기

현재 위치
  1. HOME
  2. 쇼핑몰 TIP

쇼핑몰 TIP

온라인 쇼핑몰 제작부터 운영, 마케팅까지! 유용한 정보를 제공합니다.

카테고리 상세
번호 문의유형 제목
1272 결제 중도 이탈률을 줄여주는 '빠른 결제 서비스' 조회수 11540
  • 작성일 2017-07-25 10:38:56
  • 추천 추천하기
  • 조회수 11540


복잡한 결제 과정은 NO!

빠른 결제 서비스 YES!



쇼핑몰에서 물건을 구입할 때,

복잡한 결제 과정에 답답할 때가 있으셨죠?



특히 카드 결제의 경우

카드사 별로 결제 창이 따로 뜨면서

화면이 어지러워질 뿐만 아니라

부가적인 정보 입력이나 클릭이 필요해

결제 완료까지의 길이 멀고 험난했습니다.



이러한 고충을 해결하고자

카페24에서는 업계 최초

빠른 결제 서비스를 만들었습니다!!

짝!짝!짝!



지금부터 '빠른 결제 서비스'가 무엇인지!

그 속을 자세히 들여다 보겠습니다.




01

빠른 결제 서비스란?


쇼핑몰에서 고객이 카드 결제를 이용할 때,

별도의 통합 결제 창(PG)을 생략하고

주문페이지에서 바로 결제를 진행할 수 있는 서비스입니다.



 


주문페이지에서 카드사로 바로 연결해 결제하기 때문에

고객들이 결제 완료까지 도달하는 시간이 짧아집니다.


이는 고객의 결제 편의성을 높이는 것은 물론

결제 도중에 이탈하는 문제를 줄이는 데 도움이 됩니다.


그렇다면!


복잡한 결제 과정을 간소화해주는

빠른 결제 서비스를

내 쇼핑몰에 어떻게 적용할까요?




02

빠른 결제 서비스 적용하기



1. 쇼핑몰관리자에서 '상점관리 > 결제관리 > 결제방식 설정'으로 들어갑니다.


2. '카드 결제 시 카드사 결제창 사용'을 '사용함'으로 선택합니다.


 


3. HTML/CSS 소스를 추가합니다.



※ 아래에 링크된 공통 CSS 파일이 존재해야 정상 노출되기 때문에

공통CSS 파일이 없으신 쇼핑몰의 경우 공통CSS 파일을 먼저 추가해주세요.


▶ 공통 CSS 파일 바로가기 (클릭)




1) PC 쇼핑몰(수정) - HTML소스 추가


쇼핑몰관리자 '디자인 관리 > 디자인 수정 > 주문(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) PC 쇼핑몰(신규) - CSS 소스 추가


쇼핑몰관리자 '디자인 관리 > 디자인 수정 > 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; }



3) 모바일 쇼핑몰(수정) - HTML소스 추가


쇼핑몰관리자 '모바일 쇼핑몰 > 디자인 수정 > 주문(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>


##하단 생략##



4) 모바일 쇼핑몰(신규) - CSS 소스 추가


쇼핑몰관리자 '모바일 쇼핑몰 > 디자인 수정 > 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; }







빠른 결제 서비스가 적용된 실제 쇼핑몰 결제 화면입니다.





※ 해당 기능은 현재 KSNET, LG U+ PG사만을 대상으로 적용됩니다.

향후 PG사 별로 순차 적용될 예정이며 공지사항을 통해 안내드리겠습니다.