Aurora Modules

결제 실패

주문 결제 실패한 경우 결제실패 페이지에 노출되는 결제실패 모듈입니다.

모듈명: order-fail원본소스

결제 실패 모듈입니다.

속성

속성명	타입	기본값	설명
result:query	SUCCESS \| FAIL	-	(필수) `query string` 중 `result` 값 성공여부 값
message:query	string	-	`query string` 중 `message` 값 실패메세지

사용 가능 변수

변수명	타입	기본값	설명
failCode	string	-	결제 실패 코드, message:query 값 가공
summary	string	-	결제 실패 메세지, message:query 값 가공
description	string	-	결제 실패 설명, message:query 값 가공
phoneNo	string	-	서비스센터 전화번호

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<order-fail result:query="result" message:query="message">
    <section class="notice order-fail__message">
        <h1>결제실패</h1>
        <span class="sprite-image notice--caution"></span>
        <div class="order-fail__message-fail">
            <em>
                <span slot="failCode">[{{failCode}}]</span>
                <span slot="summary">{{summary}}</span>
            </em>
        </div>
        <div class="notice__description--center">
            <p slot="description">{{description}}</p>
            <div slot="phoneNo">
                <div>실패 사유를 확인하신 후 '장바구니 가기'</div>
                <div>또는 '홈으로 가기' 버튼을 통해 주문/결제를 다시 시도하시거나,</div>
                계속 실패되시는 경우 {{#if phoneNo}} {{phoneNo}} {{else}} 고객센터 {{/if}} 로 문의주시기 바랍니다.
            </div>
        </div>
    </section>
</order-fail>

<div class="header header--sub">
    <button class="header__back" shopby-on:click="BACK">
        <span class="ico ico--arrow-left-black-24"></span>
    </button>

    <h1 class="header__title" slot="subTitle">결제실패</h1>
</div>
<main class="l-content">
    <div class="order-fail">
        <order-fail result:query="result" message:query="message">
            <section class="notice order-fail__message">
                <span class="sprite-image notice--caution"></span>
                <div class="order-fail__message-fail">
                    <em>
                        <span slot="failCode">[{{failCode}}]</span>
                        <span slot="summary">{{summary}}</span>
                    </em>
                </div>
                <div class="order-fail__message-contact notice__description--center">
                    <p slot="description">{{description}}</p>
                    <div slot="phoneNo">
                        <div>실패 사유를 확인하신 후 '장바구니 가기' 또는</div>
                        <div>'홈으로 가기' 버튼을 통해 주문/결제를 다시 시도하시거나,</div>
                        <div>계속 실패되시는 경우 {{#if phoneNo}} {{phoneNo}} {{else}} 고객센터 {{/if}} 로</div>
                        문의주시기 바랍니다.
                    </div>
                </div>
            </section>
        </order-fail>
    </div>
</main>

/* 여기에 스타일 코드를 작성해주세요. */