# Npay 주문형 연동하기

### Npay 구매 버튼 스크립트

플랫폼 유형에 알맞은 스크립트를 선택해 헤더 영역에 추가하세요

{% code overflow="wrap" %}

```javascript
<!-- mobile -->
<script type="text/javascript" src="https://pay.naver.com/customer/js/mobile/naverPayButton.js"></script>

<!-- pc -->
<script type="text/javascript" src="https://pay.naver.com/customer/js/naverPayButton.js"></script>
```

{% endcode %}

### Npay 구매 버튼 옵션 설정

옵션의 종류를 확인하고 알맞은 값을 추가하세요

> 네이버에서제공하는 스크립트를 분석해 작성한 내용입니다.
>
> 업데이트 시점에 따라 내용이 달라질 수 있으니 정확한 옵션에 대한 정보는 하기 스크립트를 확인하세요
>
> * PC : <https://pay.naver.com/customer/js/innerNaverPayButton.js?site_preference=normal&478465>\
>   문서 작성 시점 버전 : 1.3
> * MOBILE : <https://pay.naver.com/customer/js/mobile/innerNaverPayButton.js?site_preference=normal&478465>\
>   문서 작성 시점 버전 : 1.1

```javascript
// mobile
window.naver.NaverPayButton.apply({
    EMBED_ID: 'naver-pay',
    BUTTON_KEY: `${buttonKey}`,
    TYPE: 'MA',
    COLOR: 1,
    COUNT: 2,
    ENABLE: 'Y',
    BUY_BUTTON_HANDLER: {handleBuyButtonClick},
    WISHLIST_BUTTON_HANDLER: {handleWishListButtonClick},
  });
  
// pc
window.naver.NaverPayButton.apply({
    EMBED_ID: 'naver-pay',
    BUTTON_KEY: `${buttonKey}`,
    TYPE: 'A',
    COLOR: 1,
    COUNT: 1,
    ENABLE: 'Y',
    BUY_BUTTON_HANDLER: {handleBuyButtonClick},
    WISHLIST_BUTTON_HANDLER: {handleWishListButtonClick},
  });
  
```

* EMBED\_ID : `Npay 구매` 버튼 노출 할 영역의 `id` 값을 입력하세요.\
  예시)

{% code overflow="wrap" %}

```javascript
<!-- EMBED_ID: 'naver-pay' -->
<div id="naver-pay"></div>
```

{% endcode %}

* BUTTON\_KEY : 네이버에서 전달받은 버튼 생성키
  * `관리자 > 설정 > 네이버페이 설정 > 네이버페이 주문형 > 버튼 인증키` 에 입력한 값을 [GET /order-configs 주문 설정 값 가져오기](https://docs.shopby.co.kr/?url.primaryName=order/#/OrderConfiguration/get-order-configuration) API로 확인할 수 있습니다.\
    응답 값 중 `naverPay.buttonKey`를 사용하시면 됩니다.
* TYPE : 플랫폼 유형에 따라 다르게 설
  * PC : A \~ G
    * F와 G를 설정하는 경우 스크립트 옵션을 확인하세요\ <mark style="background-color:yellow;">F를 설정하는 경우 COLOR: 1, COUNT: 2 만 유효</mark>\ <mark style="background-color:yellow;">G를 설정하는 경우 COLOR: 1, COUNT: 1 만 유효</mark>
    * **샵바이 기본 스킨**에서는 `A`를 기본으로 사용합니다.<br>

      <div align="left"><figure><img src="https://67612295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLt0GowPleXLWRjzGIAiV%2Fuploads%2FJ1fY9S29vJQrk5b0MkxC%2Fimage.png?alt=media&#x26;token=de93e211-3c96-4731-8f59-2ae616fbe827" alt="" width="563"><figcaption></figcaption></figure></div>
  * MOBILE : MA, MB
    * **샵바이 기본 스킨**에서는 `MA`를 기본으로 사용합니다.<br>

      <div align="left"><figure><img src="https://67612295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLt0GowPleXLWRjzGIAiV%2Fuploads%2FYR43B9mpX6akOwqIpv7V%2Fimage.png?alt=media&#x26;token=7d2a711b-c93f-44b0-a846-4f5f1dcef45f" alt="" width="562"><figcaption></figcaption></figure></div>

    * COLOR : 버튼 모음의 색 설정. 1 혹은 2 설정 가능
      * **샵바이 기본 스킨**에서는 `1`를 기본으로 사용합니다.<br>

    * COUNT : 버튼 개수 설정. 구매하기 버튼만 있으면 1, 찜하기 버튼도 있으면 2를 입력
      * **샵바이 기본 스킨**에서는 `2`를 기본으로 사용합니다.
        * 단, **장바구니 페이지**에서는 **1**로 고정해서 사용합니다. 찜하기 기능을 사용하지 않습니다.<br>

    * ENABLE : 버튼 활성화 여부를 `Y` 혹은 `N` 으로 설정. 품절 등의 이유로 버튼 모음을 비활성화할 때에는 "N" 입력<br>

    * BUY\_BUTTON\_HANDLER : `NPay 구매` 버튼 클릭 시 호출하는 핸들러
      * 핸들러 안에서 2가지 API 를 호출해야 합니다.
        1. [PUT /payments/naver/validate 네이버페이 상품구매 검증하기](https://docs.shopby.co.kr/?url.primaryName=order/#/NaverPay/put-payments-naver-validate) API 로 Npay로 구매가능한 상품인지 확인합니다.
        2. [POST /payments/naver/ordersheet 네이버페이 주문서 생성하기](https://docs.shopby.co.kr/?url.primaryName=order/#/NaverPay/post-payments-naver-ordersheet)\
           1번에서 호출한 `검증 API` 응답 값이 `true` 인 경우에만 Npay 주문서를 생성하시면 됩니다.
           * `clientReturnUrl` 은 주문 실패 혹은 뒤로가기 시 리다이렉트 되는 주소로 `Npay`의 `backUrl`로 설정됩니다. 샵바이 기본 스킨에서는 `location.href` 로 설정합니다.<br>

    * WISHLIST\_BUTTON\_HANDLER: `찜` 하기 버튼 클릭 시 호출하는 핸들러
      * [POST /payments/naver/wish-list 네이버페이 찜 등록하기](https://docs.shopby.co.kr/?url.primaryName=order/#/NaverPay/post-payments-naver-wish-list) API 를 호출해 `찜` 기능을 구현할 수 있습니다.