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

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

간단소개

  • 기능요약

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

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

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

  • 기능상세


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

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

1) 주문서 화면

① 마이페이 버튼 출력

▶ 주문서 조회하기

GET /order-sheets/{orderSheetNo} API 보기>

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

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

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


② 마이페이 커스텀 적용

▶ 주문서 조회하기

GET /order-sheets/{orderSheetNo} API 보기>

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

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

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

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

GET /my-pay/payment-infos API 보기>

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

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

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


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

▶ 회원 등록하기

GET /my-pay/register-user API 보기>

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

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

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

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

▶ 결제수단 등록하기

GET /my-pay/register-payment API 보기>

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

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

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


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

마이페이 결제수단 설정 화면

▶ 비밀번호 변경하기

GET /my-pay/modify-password API 보기>

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


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

DELETE /my-pay/payment-infos API 보기>

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

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

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


▶ 회원 서비스 해제하기

DELETE /my-pay/users API 보기>

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

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

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


▶ 중복 가입 회원 서비스 해제하기

DELETE /my-pay/user/by-key API 보기>

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

  • 마이페이 회원 등록 중 '이미 등록된 회원입니다.'라는 메시지가 나오는 경우에만, 해당 API를 통해 회원 서비스를 해지할 수 있습니다.

  • 회원 서비스 해지할 사용자의 deleteKey를 활용하여 해당 API를 호출 후 등록된 회원의 서비스를 해제합니다. 이때 deleyKey는 회원 등록하기 진행 시, 중복 회원이면 응답 결과로 전달됩니다.


▶ 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

    • DELETE_USER_BY_KEY


참고 사항

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

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

Last updated

Was this helpful?