# 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="/files/jmTy4slDOVzfhZysLmtE" alt="" width="563"><figcaption></figcaption></figure></div>
  * MOBILE : MA, MB
    * **샵바이 기본 스킨**에서는 `MA`를 기본으로 사용합니다.<br>

      <div align="left"><figure><img src="/files/2HwTxMNyhoDKL54UWvuG" 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 를 호출해 `찜` 기능을 구현할 수 있습니다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://workspace-help.nhn-commerce.com/contents/recommended/npay.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.