Npay 주문형 연동하기

본 가이드는 스킨을 자체 제작하는 헤드리스를 위한 가이드 입니다.

Npay 구매 버튼 스크립트

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

<!-- 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>

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

// 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 값을 입력하세요. 예시)

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

• BUTTON_KEY : 네이버에서 전달받은 버튼 생성키

  • 관리자 > 설정 > 네이버페이 설정 > 네이버페이 주문형 > 버튼 인증키 에 입력한 값을 GET /order-configs 주문 설정 값 가져오기 API로 확인할 수 있습니다. 응답 값 중 naverPay.buttonKey를 사용하시면 됩니다.
• TYPE : 플랫폼 유형에 따라 다르게 설

  • PC : A ~ G

    • F와 G를 설정하는 경우 스크립트 옵션을 확인하세요 F를 설정하는 경우 COLOR: 1, COUNT: 2 만 유효 G를 설정하는 경우 COLOR: 1, COUNT: 1 만 유효

    • 샵바이 기본 스킨에서는 A를 기본으로 사용합니다.

      
  • MOBILE : MA, MB

    • 샵바이 기본 스킨에서는 MA를 기본으로 사용합니다.

      

    • COLOR : 버튼 모음의 색 설정. 1 혹은 2 설정 가능

      • 샵바이 기본 스킨에서는 1를 기본으로 사용합니다.

    • COUNT : 버튼 개수 설정. 구매하기 버튼만 있으면 1, 찜하기 버튼도 있으면 2를 입력

      • 샵바이 기본 스킨에서는 2를 기본으로 사용합니다.

        • 단, 장바구니 페이지에서는 1로 고정해서 사용합니다. 찜하기 기능을 사용하지 않습니다.

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

    • BUY_BUTTON_HANDLER : NPay 구매 버튼 클릭 시 호출하는 핸들러

      • 핸들러 안에서 2가지 API 를 호출해야 합니다.

        1. PUT /payments/naver/validate 네이버페이 상품구매 검증하기 API 로 Npay로 구매가능한 상품인지 확인합니다.
        2. POST /payments/naver/ordersheet 네이버페이 주문서 생성하기 1번에서 호출한 검증 API 응답 값이 true 인 경우에만 Npay 주문서를 생성하시면 됩니다.

           • clientReturnUrl 은 주문 실패 혹은 뒤로가기 시 리다이렉트 되는 주소로 Npay의 backUrl로 설정됩니다. 샵바이 기본 스킨에서는 location.href 로 설정합니다.

    • WISHLIST_BUTTON_HANDLER: 찜 하기 버튼 클릭 시 호출하는 핸들러

      • POST /payments/naver/wish-list 네이버페이 찜 등록하기 API 를 호출해 찜 기능을 구현할 수 있습니다.