LogoLogo
  • 샵바이 스킨 알아보기
    • 샵바이 스킨 설명서
    • 오로라 리액트(통합형) 스킨 개발 가이드
    • 오로라 리액트(통합형) 릴리즈 노트
    • 오로라 바닐라(개별형) 릴리즈 노트
    • 1:1 문의하기
  • 오로라 개별형 스킨 개발 가이드
    • 개발 프로세스
      • 등록
      • 개발
        • 개발 환경 구성하기
        • 스킨 디렉토리 구조
      • 설치
    • 기본 API 이해하기
      • 샵바이 API 호출 가이드
        • OAuth 2.0 적용 가이드
      • 외부 스크립트 호출 가이드
    • 화면별 API 활용 가이드
      • 공통 영역
        • 공통 상단
        • 공통 하단
        • 디자인 팝업
        • 슬라이드 메뉴 (모바일 전용)
        • 최근 본 상품
      • 메인 화면
        • 배너 영역
        • 상품진열 영역
        • 인스타그램 연동
      • 회원가입
      • 로그인
      • 간편 로그인
      • 휴대폰 본인인증
      • 상품 리스트
      • 상품 상세
        • 상품 기본 정보
        • 상품 상세 배너 (모바일 전용)
        • 상품 상세정보 (탭)
        • 배송/반품/교환 안내 (탭)
        • 상품후기 (탭)
        • 상품문의 (탭)
        • 관련상품
      • 장바구니
      • 주문서
      • 마이페이지 > 쇼핑정보
        • 주문목록/배송조회
        • 취소/반품/교환 내역
        • 주문 상세
        • 좋아요
      • 마이페이지 > 혜택관리
        • 쿠폰
        • 적립금
      • 마이페이지 > 회원정보
        • 회원정보 수정
        • 회원탈퇴
        • 배송지 관리
      • 마이페이지 > 나의 게시글
        • 1:1 문의
        • 상품문의
        • 상품후기
      • 상품후기 게시판
      • 일반 게시판
      • 기획전
    • KCP 휴대폰 본인인증 연동 (iOS/AOS)
  • 앱 개발 가이드
    • [샵바이] 웹훅(webhook) 가이드
    • [고도몰] 웹훅(webhook) 가이드
  • 추천 콘텐츠
    • 추천 콘텐츠
      • [간편 로그인] SNS 연동 기능 개발 가이드
      • [공통] 마이페이 API 화면가이드
      • [엔터프라이즈] 선물하기 기능 (배송지 나중입력)
      • [엔터프라이즈] 카카오 싱크 신청 가이드
      • [엔터프라이즈] 카카오 싱크 회원가입 API 화면가이드
      • [엔터프라이즈] 이니렌탈(렌탈결제) API 화면가이드
      • [엔터프라이즈] 외부 회원 연동 가이드
      • [엔터프라이즈] 외부 적립금 전환 가이드
      • [엔터프라이즈] 외부 적립금 연동가이드
      • [엔터프라이즈] 사은품 API 화면가이드
      • [엔터프라이즈] PG신청 가이드 (2024/4/1 업데이트)
      • [엔터프라이즈] 카카오 픽셀 설치 가이드
      • [엔터프라이즈]정기결제(배송) API 화면가이드
      • [프로/엔터프라이즈] 쇼핑몰에 인스타그램 위젯을 적용해보세요!
      • [베이직/프로] 카카오싱크 신청 가이드
      • [웹훅 추가] 주문정보 웹훅(Webhook)이란?
      • [웹훅 추가] 회원정보 변경 및 회원탈퇴
      • [웹훅 추가] 앱 설치 및 삭제
      • shop by API, POSTMAN에 추가하기
      • [글로벌] 글로벌 기능 가이드
        • 사용 프로세스
          • 엑심베이 PG 계약
          • 개발 환경 세팅
          • shop by 어드민 세팅
          • 쇼핑몰 스킨 개발
            • 언어/통화 설정
            • 상품/전시 설정
            • 주문서 조회
            • 주문 예약하기
            • 회원 등록
        • 글로벌 주문/환불 프로세스
    • FAQ
      • 에러코드_ (1) 주문
      • 에러코드_ (2) 프로모션
      • 에러코드_ (3) 클레임
      • 쿠폰 코드 API 에러메시지 안내
      • 장바구니/주문결제 에러코드 안내
      • 배송타입 및 택배사코드 안내
      • 파트너어드민 매출내역 조회기준
      • shop api error response 안내
      • server API로 주문의 외부 유입경로 집계 방법
      • 은행코드 안내
      • 7/15 스킨 에디터 업데이트 주의사항
        • 모바일_업데이트 전 템플릿 코드
        • PC_업데이트 전 템플릿 코드
        • 업데이트 후/전 템플릿 코드 비교
      • [샵바이 엔터프라이즈] server API 호출방법
      • [샵바이 엔터프라이즈] 파트너 어드민에서 상품 노출은 미리 해두고, 판매 기간은 미래시점으로 설정할 수 있는 기능이 있을까요?
      • [샵바이 엔터프라이즈] 파트너사 담당MD 일괄변경 어떻게하나요?
Powered by GitBook
On this page
  • 간단소개
  • (예시) API소개 및 화면 가이드
  • 1) 주문서 화면
  • 2) 회원가입 및 결제 수단 등록 화면
  • 3) 결제 수단 설정 팝업 화면
  • 참고 사항

Was this helpful?

  1. 추천 콘텐츠
  2. 추천 콘텐츠

[공통] 마이페이 API 화면가이드

커스텀 스킨이 마이페이 기능을 사용하기 위해, shop API로 주문서 화면을 어떻게 구현할 수 있을지 안내하기 위한 콘텐츠입니다.

Previous[간편 로그인] SNS 연동 기능 개발 가이드Next[엔터프라이즈] 선물하기 기능 (배송지 나중입력)

Last updated 11 months ago

Was this helpful?

간단소개

  • 기능요약

    • 이니시스의 커스텀 간편 결제 서비스(마이 페이)를 통해 쇼핑몰 회원이 카드/ 계좌를 간편하게 등록 및 결제할 수 있도록 제공합니다.

    • 대상 솔루션: 샵바이 전용

    • 기능 배포일자:2023-08-21

  • 기능상세

    • 마이페이 사용을 위해서는 앱 설치가 필요합니다.

    • 마이페이 앱 설치 링크 :


(예시) API소개 및 화면 가이드

아래 API들을 활용하여 마이페이 기능을 활용한 화면을 구현할 수 있습니다.

1) 주문서 화면

① 마이페이 버튼 출력

▶ 주문서 조회하기

주문서를 조회하는 API입니다.

  • 해당 API를 호출하여 받은 응답 값 중 availablePayTypes에서 결제 수단 정보를 확인할 수 있습니다.

  • 마이페이 앱(APP)에서 결제수단 노출 설정 여부 '사용함' 설정 시 pgTypes에 MY_PAY이 포함됩니다.


② 마이페이 커스텀 적용

▶ 주문서 조회하기

주문서를 조회하는 API입니다.

  • 해당 API를 호출하여 받은 응답 값 중 myPayInfo에서 마이페이 앱(APP)에서 설정한 커스텀 정보를 확인 할 수 있습니다.

  • 커스텀이 적용된 화면은 회원가입, 결제수단 등록, 비밀번호 변경 팝업에서 확인하실 수 있습니다.

▶ MYPay 등록된 결제수단 조회하기

등록된 결제수단을 조회하는 API입니다.

  • 해당 API를 호출하여 받은 응답 값 중 paymentInfos에서 등록된 결제 수단 정보를 확인할 수 있습니다.

  • 응답 값 중 code가 1002인 경우, 마이페이 간편결제 회원가입을 진행하지 않은 사용자입니다.


2) 회원가입 및 결제 수단 등록 화면

▶ 회원 등록하기

회원 등록 webUrl를 위한 정보를 조회합니다.

  • 발급받은 accessToken을 사용하여 해당 API를 호출합니다.

  • 들어가야 하는 provider : MyPayProvider / clientReturnUrl : 회원 등록 완료 후 client 이동 url

  • 회원 가입을 하지 않은 경우 : 설정, 결제 수단 등록 버튼 클릭 시 회원 가입 팝업이 출력됩니다.

▶ 결제수단 등록하기

결제수단 등록 webUrl를 위한 정보를 조회합니다.

  • 회원 가입이 되어 있는 경우 계좌 및 신용 · 체크 카드 등록 여부를 선택합니다.

  • paymentInfos 값을 노출 처리합니다.


3) 결제 수단 설정 팝업 화면

▶ 비밀번호 변경하기

비밀번호 변경파라미터 조회를 조회합니다.


▶ 등록된 결제 수단 삭제하기

등록된 결제수단을 삭제합니다.

  • 선택된 결제 수단의 payToken값을 사용하여 해당 API를 호출합니다.

  • 호출 성공 시 마이페이에 등록된 결제 수단 조회하기 API를 재 호출하여 결제 수단 정보를 갱신합니다.


▶ 회원 서비스 해제하기

회원 서비스를 해제합니다.

  • accessToken을 활용하여 해당 API를 호출 후 등록된 회원의 서비스를 해제합니다.

  • 호출 성공 시 마이페이에 등록된 결제 수단 조회하기 API를 재 호출하여 결제 수단 정보를 갱신합니다.


  • 위 라이브러리를 이용하시면, API 호출 후 webUrl을 이용한 UI 호출을 좀 더 손쉽게 하실 수 있습니다.

  • 라이브러리 임포트 후에, 아래와 같은 방식으로 API 호출 및 UI 오픈을 자동으로 처리할 수 있습니다.

NCPPay.requestMyPayApi(param, apiType)

  • param에는 각 API에 필요한 body 정보를 넣어주시면 됩니다.

  • apiType은 아래와 같습니다.

    • REGISTER_USER

    • REGISTER_USER_WITH_PAYMENT

    • REGISTER_PAYMEN

    • PAYMENT_INFOS

    • MODIFY_PASSWORD

    • DELETE_USER

    • DELETE_PAYMENT

    • MODIFY_MAIN_PAYMENT


참고 사항

  1. 오로라 기본 스킨이나 react-components를 사용하고 있는 경우 스킨 패치가 필요합니다.

  2. 마이페이 기능을 간편하게 사용할 수 있도록 @shopby/react-components패키지에 마이페이컴포넌트를 제공합니다.

    • 마이페이용 컴포넌트 가이드는 추후 제공 예정입니다.

GET /order-sheets/{orderSheetNo}

GET /order-sheets/{orderSheetNo}

GET /my-pay/payment-infos

GET /my-pay/register-user

GET /my-pay/register-payment

GET /my-pay/modify-password

DELETE /my-pay/payment-infos

DELETE /my-pay/users

▶ API 호출 후 팝업창 띄우기

API 보기>
API 보기>
API 보기>
API 보기>
API 보기>
API 보기>
API 보기>
API 보기>
API 보기>
마이페이 릴리즈 업데이트 확인하기>
기존 컴포넌트 가이드 확인하기>
https://apps.nhn-commerce.com/apps/845
마이페이 결제수단 설정 화면