`
**(2-2) 모바일 - 인증 모듈(앱카드 선택 팝업) 호출**\
앱카드를 선택할 수 있는 인증 모듈 화면을 노출합니다. url 구성 시 아래 구분 값을 상황에 맞게 전달해 주시면 됩니다.
* transNo: 앱카드 인증거래번호
* deviceType: 디바이스 타입 (1: IOS WEB, 2: IOS APP, 3: AOS WEB, 4: AOS APP, 5: PC)
* storeTermYN: 가맹점 약관 노출 여부 (Y/N)
* nativeYN: ios/aos 에서 웹뷰를 통해 모듈을 바로 호출 시 Y로 설정
(예시)
{% code overflow="wrap" %}
```javascript
const APP_CARD_URL = {
alpha: 'https://payment.tvhub.co.kr:10488',
real: 'https://payment.tvhub.co.kr:488',
};
const url : `${APP_CARD_URL[env]}/APPCARD-AUTH/index.html#/?transNo=${transNo}&deviceType=${deviceType}&nativeYN=${nativeYN}&storeTermYN=${storeTermYN}`
```
{% endcode %}
***
**(3) Access Token 획득**
> ▶ OpenId Access Token 발급하기\
> POST/oauth/openid [API 보기 >](https://docs.shopby.co.kr/?url.primaryName=auth/#/Authentication/post-oauth-openid)\
> OpenId 회원의 AccessToken 발급하기 위한 post 방식의 API 입니다.
* 앱카드 앱 인증 완료 시 `transNo(code)` 와 `token(state)` 을 사용하여 해당 API를 호출합니다.
* PC 쇼핑몰의 경우 쇼핑몰 회원이 \[인증완료] 버튼 클릭 시 호출합니다.
* 모바일 쇼핑몰의 경우 window message 이벤트로 인증 성공 콜백 시 호출합니다.
\
<참고> OAuth 2.0 적용 방법은 [OAuth 2.0 적용 가이드 문서](https://workspace-help.nhn-commerce.com/aurora-skinguide/api/shopbyapi/oauth2.0)를 참고해 주세요.
***
**(4) 회원 가입 여부 확인**
> ▶ 회원정보 조회하기\
> GET/profile [API 보기 >](https://docs.shopby.co.kr/?url.primaryName=member/#/Profile/get-profile)\
> 회원정보를 조회합니다.
* AccessToken을 활용하여 위 API를 호출합니다.
* API를 호출하여 받은 응답 값 중 `memberStatus(회원상태)`가 `WAITING` 인 경우 쇼핑몰 미가입 상태로 판단합니다.
* 앱카드 회원인 경우 해당 계정으로 로그인합니다.
* 앱카드 회원이 아닌 경우 간편 로그인 회원가입 페이지를 출력합니다.
\
<참고> 간편 로그인 회원가입 페이지 개발 방법은 [간편 로그인 문서](https://workspace-help.nhn-commerce.com/aurora-skinguide/api-1/open-id)를 참고해 주세요.
***
### 앱카드 간편결제
앱카드 결제 버튼은 주문서 페이지와 상품 상세 페이지에 추가할 수 있습니다.\
(예시) 주문서
`
주의사항
* 위 API 응답 값 중 `exatrData.authYn` 값은 원클릭 설정 여부 값입니다.
* `authYn` 값이 `Y` 인 경우(즉, 원클릭 설정이 되어있는 경우) 샵바이 결제 모듈 NCPPay에서 원클릭 바로 결제가 진행되오니 QR Code 인증 화면이 노출되지 않도록 `authYn` 값을 체크해 주셔야 합니다.
**(5-2) 모바일 - 인증 모듈(앱카드 선택 팝업) 호출**
* 위 API 응답 값 중 `returnUrl`을 아래 {{returnUrl}} 위치에 전달 해주시면 됩니다.
```
```
주의사항
* 위 API 응답 값 중 `exatrData.authYn` 값은 원클릭 설정 여부 값입니다.
* `authYn` 값이 `Y` 인 경우(즉, 원클릭 설정이 되어있는 경우) 샵바이 결제 모듈 NCPPay에서 원클릭 바로 결제가 진행되오니 인증 모듈이 노출되지 않도록 `authYn` 값을 체크해 주셔야 합니다.
***
**(6) 인증결과 조회**
> ▶ 앱카드 인증결과 조회\
> GET/app-card/auth/{orderNo} [API 보기 >](https://docs.shopby.co.kr/?url.primaryName=order/#/AppCard/get-app-card-auth-order-no)\
> 해당 주문번호의 앱카드 인증 여부를 조회합니다.
* 위 API로 인증 여부를 확인할 수 있습니다.
* 앱카드 인증 완료 시 주문 예약하기 API에서 받은 응답결과를 결제 모듈인 NCPPay에 `requestAppCardOrder`로 전달해주시면 됩니다.
```
window.NCPPay.requestAppCardOrder(response);
```
* PC 쇼핑몰의 경우 쇼핑몰 회원이 \[인증완료] 버튼 클릭 시 전송합니다.
* 완료되지 않은 시점에 호출 시`O9104` 에러코드가 전달 됩니다.
* 모바일 쇼핑몰의 경우 window message 이벤트로 인증 성공 콜백 시 전송합니다.
***
**(7) 주문 성공/실패 여부 확인**
* 결제 성공 여부에 따라 주문 예약하기 API 요청 값으로 입력한 `clientReturnUrl` 로 결과를 전송합니다.
* 결제 성공 여부에 따라 '주문완료' 또는 '주문 실패' 화면을 출력합니다.
* 성공 시
* request parameter 로 결과 값을 `SUCCESS` 로 전달합니다.
* 주문이 성공한 주문 번호를 함께 전달합니다.
* ex)result=SUCCESS\&orderNo=123
* 실패 시
* request parameter 로 결과 값을 `FAIL`로 전달합니다.
* message에 실패 사유를 함께 전달합니다.
* ex)result=FAIL\&message=잔액부족
<참고> 주문서 페이지 개발 방법은 [주문서 문서](https://workspace-help.nhn-commerce.com/aurora-skinguide/api-1/order-sheet-form)를 참고해 주세요.
***
#### 2. 상품 상세
**(1) 앱카드 결제 버튼 출력**
> ▶ 주문 설정 값 가져오기\
> GET/order-configs [API 보기 >](https://docs.shopby.co.kr/?url.primaryName=order/#/OrderConfiguration/get-order-configuration)\
> 주문 설정값을 조회하는 API입니다.
* 위 API를 호출하여 앱카드 사용 여부를 확인합니다.
* API 응답 결과 중 `useAppCard`구분 값으로 확인할 수 있으며 `true`인 경우에 앱카드 결제 버튼을 출력합니다.
***
**(2) 상품 상세 주문서**
* \[앱카드 결제] 버튼 클릭 시 아래 API들을 호출하여 주문서 생성 및 주문 시 필요한 데이터를 가져옵니다.
**(2-1) 주문서 생성**
> ▶ 주문서 작성하기\
> POST/order-sheets [API 보기 >](https://docs.shopby.co.kr/?url.primaryName=order/#/OrderSheet/post-order-sheet)\
> 주문을 진행할 상품 정보를 전달하는 API입니다.
* 주문을 진행할 상품 정보를 전달하는 API입니다.
* 주문서 페이지 진입 전 실행합니다.
**(2-2) 주문서 조회**
> ▶ 주문서 조회하기\
> GET/order-sheets/{orderSheetNo} [API 보기 >](https://docs.shopby.co.kr/?url.primaryName=order/#/OrderSheet/get-order-sheet)\
> 주문서 번호를 이용하여 주문상품정보를 조회할 수 있습니다.
* 응답 결과를 사용하여 주문 정보를 보여줍니다.
* 주문 상품 정보 : `deliveryGroups`
* 주문자 정보 : `ordererContact`
* 약관 정보 : `termsInfos`, `customTermsInfos` 와 주문서 필수 약관 내용
**(2-3) 쿠폰 및 배송지 정보가 적용된 금액 조회**
> ▶ 쿠폰 및 배송지 정보가 적용된 금액 조회하기\
> POST/order-sheets/{orderSheetNo}/calculate [API 보기 >](https://docs.shopby.co.kr/?url.primaryName=order/#/OrderSheet/post-order-sheets-order-sheet-no-calculate)\
> 쿠폰 및 배송비 계산이 적용된 주문서 금액을 조회할 수 있습니다.
* 응답 결과 중 `paymentInfo`으로 결제 정보를 보여줍니다.
**(2-4) 배송지 목록 가져오기**
> ▶ 배송지 목록 가져오기\
> GET/profile/shipping-addresses [API 보기 >](https://docs.shopby.co.kr/?url.primaryName=order/#/ShippingAddress/get-profile-shipping-addresses)\
> 주소지 정보를 조회할 수 있습니다.
* 응답 결과 중 `defaultAddress` 기본 배송지 정보로 배송지 정보를 보여줍니다.
**(2-5) 회원정보 조회하기**
> ▶ 회원정보 조회하기\
> GET/profile [API 보기 >](https://docs.shopby.co.kr/?url.primaryName=member/#/Profile/get-profile)\
> 회원정보를 조회할 수 있습니다.
* 기본 배송지가 없는 경우, 위 API 응답 결과 중 `address`, `detailAddress`, `city`, `state`값인 회원의 주소 정보를 배송지 정보로 보여줍니다.
* 주문자 정보가 없는 경우, 위 API 응답 결과 중 `memberName` 값인 회원 이름으로 보여줍니다.
**(2-6) 주문하기**
> ▶ 주문 예약하기\
> POST/payments/reserve [API 보기 >](https://docs.shopby.co.kr/?url.primaryName=order/#/Purchase/post-payments-reserve)\
> 주문된 결제를 진행합니다.
* 앱카드 선택 후 \[결제하기] 시 해당 API를 호출하여 주문을 생성합니다.
<참고> 앱카드 목록 출력, 앱카드 주문 상세 개발 방법은 상단 주문서 내용을 참고해 주세요.\
<참고> 상품 상세 페이지 개발 방법은 [상품 상세 문서](https://workspace-help.nhn-commerce.com/aurora-skinguide/api-1/product-detail)를 참고해 주세요.
***
#### 앱카드 카드 목록 삭제
> ▶ 앱카드 간편결제 카드 삭제\
> DELETE/app-card/pay-cards/{acntId} [API 보기 >](https://docs.shopby.co.kr/?url.primaryName=order/#/AppCard/delete-app-card-pay-cards-card-id)\
> 간편결제 카드를 삭제할 수 있습니다.
* API를 호출하여 등록된 앱카드를 삭제할 수 있습니다.
# 디자인/콘텐츠
# 리스트 효과 관리 스킨 패치 가이드
[스킨 패치 파일 다운로드 ↓](https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_69db659103894b00aa9f8b28aa62fe8e/plus-shop-skin-patch/%E1%84%83%E1%85%B5%E1%84%8C%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AB_%E1%84%85%E1%85%B5%E1%84%89%E1%85%B3%E1%84%90%E1%85%B3%20%E1%84%86%E1%85%A1%E1%84%8B%E1%85%AE%E1%84%89%E1%85%B3%20%E1%84%8B%E1%85%A9%E1%84%87%E1%85%A5%20%E1%84%92%E1%85%AD%E1%84%80%E1%85%AA.zip)
■ 수정위치\
1\. 관리자모드 -> 디자인 에서 수정할 스킨이 "현재 작업스킨"으로 설정\
2\. 관리자모드 -> 디자인, 트리에서 아래의 화일을 선택후 수정
■ 상품/goods -> 상품목록/list -> 갤러리형 / goods/list/list\_01.html
\- 아래의 내용을 수정함 : 8 라인
```
<script>
try {
if (!myapp.helpers.isMyApp()) {
myapp.banner
.fetchMyappBannerConfig({ myappNo: myappConfig.myappNo, pageType: myappConfig.pageType })
.then((config) => {
const header = document.querySelector('#header.fix');
const headerBox = document.querySelector('header .header_box');
const headerTag = document.querySelector('header');
if (!config.isEnabled || sessionStorage.getItem(myapp.constants.BANNER_CLOSE_SIGNAL) === 'true') return;
const banner = myapp.banner.createImageBanner(config.scriptImageUrl);
const bannerClickHandler = myapp.banner.getBannerClickHandler(myapp.banner.getPlatformSpecificAppScheme(config));
banner.addEventListener('click', bannerClickHandler);
const closeBtn = banner.querySelector('#myapp-banner-close-container');
const bannerCloseHandler = myapp.banner.getBannerCloseHandler(banner);
closeBtn.addEventListener('click', bannerCloseHandler);
if (!document.getElementById('myapp-banner') && banner instanceof HTMLElement) {
if (header) {
header.insertAdjacentElement('afterbegin', banner);
} else {
headerBox.style.position = 'relative';
headerTag.insertAdjacentElement('afterbegin', banner);
}
}
});
}
} catch (e) {
console.group('마이앱 외부 스크립트 오류 로그');
console.error(e);
console.groupEnd();
}
</script>
배너영역 스타일 커스텀옵션
| 사이즈 | 파일 확장자 | 용량 | 색상 공간 | 형태 | 제약사항 |
|---|---|---|---|---|---|
| 1024*1024px | png | 1MB 이내 | sRGB | 둥근 모서리가 없는 정사각형 | 투명이미지(알파채널 불가) |
| 운영체제 | 종류 | 사이즈 | 용량 | 파일 확장자 | 색상 공간 |
|---|---|---|---|---|---|
| iOS | 5.5형 스크린샷 | 1242*2208px | 8MB 이내 | jpg, png (24비트, 투명 비포함) | sRGB |
| 6.5형 스크린샷 | 1242*2688px | 8MB 이내 | |||
| 12.9형 스크린샷 | 2048*2732px | 8MB 이내 | |||
AOS (Android) | 휴대전화 스크린샷 | 1242*2208px | 8MB 이내 | ||
| 그래픽 이미지 | 1024*500px | 15MB 이내 | |||
| 패드 스크린샷 | 2554*1440px | 8MB 이내 |
이미지 2732*2732px
콘텐츠 1200*1200px
| 사이즈 | 확장자 | 용량 | 제약사항 |
|---|---|---|---|
| 96*96px | png | 1MB 이내 | 배경 이미지 투명 아이콘 이미지 하얀색(색상코드 #ffffff) |
| 상황 | 운영 |
|---|---|
| 브랜드 이미지를 강조하고 싶어요 | 브랜드를 나타내는 '아이콘', '스플래시 화면', '푸시 아이콘' 사용 |
| 모든 사용자의 앱 버전이 업데이트 돼야 해요 | 업데이트 방식을 '필수'로 설정 후 [심사 요청] |
.png?alt=media&token=450b532e-41c0-4c8a-8fe3-5bf9ab5f932a)
| 주문상태 | 설명 |
|---|---|
| 배송준비중 | 택배 예약 접수 전/ 예약 접수 후(송장 입력 전후 모두 포함) / 상품 이동이 아직 없는 상태 |
| 배송중 | 택배 집배원이 택배를 수거하여 스캔하는 시점(상품 인수/집하 처리) |
| 배송완료 | 택배가 수령지에 도착 |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
플러스친구 아이디 등록 팝업
[상세보기]
출처: 채널톡 사이트
출처: 채널톡 사이트
출처: 채널톡 사이트
출처: 채널톡 사이트
출처: 채널톡 사이트
출처: 채널톡 사이트
출처: NHN 커머스 스토어
출처: NHN 커머스 스토어
출처: 채널톡 사이트
NHN 커머스 스토어
출처: NHN 커머스 스토어
출처: NHN 커머스 스토어
출처: NHN 커머스 샵바이 어드민
출처: 채널톡 사이트
