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

## 간단소개

* **기능요약**
  * 이니시스의 커스텀 간편 결제 서비스(마이 페이)를 통해 쇼핑몰 회원이 카드/ 계좌를 간편하게 등록 및 결제할 수 있도록 제공합니다.
  * 대상 솔루션: 샵바이 전용
  * 기능 배포일자:2023-08-21
* **기능상세**
  * 마이페이 사용을 위해서는 앱 설치가 필요합니다.
  * 마이페이 앱 설치 링크 : <https://apps.godo.co.kr/apps/845>

***

### (예시) API소개 및 화면 가이드 <a href="#undefined" id="undefined"></a>

{% hint style="info" %}
아래 API들을 활용하여 마이페이 기능을 활용한 화면을 구현할 수 있습니다.
{% endhint %}

### **1) 주문서 화면**

<figure><img src="/files/VqvnS4OWz5FeAhvyW1S3" alt=""><figcaption></figcaption></figure>

**① 마이페이 버튼 출력**

> **▶ 주문서 조회하기**
>
> GET /order-sheets/{orderSheetNo} [**API 보기>**](https://docs.shopby.co.kr/?url.primaryName=order/#/OrderSheet/get-order-sheet)
>
> 주문서를 조회하는 API입니다.

* 해당 API를 호출하여 받은 응답 값 중 availablePayTypes에서 결제 수단 정보를 확인할 수 있습니다.
* 마이페이 앱(APP)에서 결제수단 노출 설정 여부 '사용함' 설정 시 pgTypes에 MY\_PAY이 포함됩니다.

***

**② 마이페이 커스텀 적용**

> **▶ 주문서 조회하기**
>
> GET /order-sheets/{orderSheetNo} [**API 보기>**](https://docs.shopby.co.kr/?url.primaryName=order/#/OrderSheet/get-order-sheet)
>
> 주문서를 조회하는 API입니다.

* 해당 API를 호출하여 받은 응답 값 중 myPayInfo에서 마이페이 앱(APP)에서 설정한 커스텀 정보를 확인 할 수 있습니다.
* 커스텀이 적용된 화면은 회원가입, 결제수단 등록, 비밀번호 변경 팝업에서 확인하실 수 있습니다.

> **▶ MYPay 등록된 결제수단 조회하기**
>
> GET /my-pay/payment-infos [**API 보기>**](https://docs.shopby.co.kr/?url.primaryName=order/#/MyPay/get-payment-infos)
>
> 등록된 결제수단을 조회하는 API입니다.

* 해당 API를 호출하여 받은 응답 값 중 paymentInfos에서 등록된 결제 수단 정보를 확인할 수 있습니다.
* 응답 값 중 code가 1002인 경우, 마이페이 간편결제 회원가입을 진행하지 않은 사용자입니다.

***

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

<figure><img src="/files/Tt9bKkIbEQrthP4jLZxU" alt=""><figcaption></figcaption></figure>

> **▶ 회원 등록하기**
>
> GET /my-pay/register-user [**API 보기>**](https://docs.shopby.co.kr/?url.primaryName=order/#/MyPay/get-register-user)
>
> 회원 등록 webUrl를 위한 정보를 조회합니다.

* 발급받은 accessToken을 사용하여 해당 API를 호출합니다.
* 들어가야 하는 provider : MyPayProvider / clientReturnUrl : 회원 등록 완료 후 client 이동 url
* 회원 가입을 하지 않은 경우 : 설정, 결제 수단 등록 버튼 클릭 시 회원 가입 팝업이 출력됩니다.

> **▶ 결제수단 등록하기**
>
> GET /my-pay/register-payment [**API 보기>**](https://docs.shopby.co.kr/?url.primaryName=order/#/MyPay/get-register-payment)
>
> 결제수단 등록 webUrl를 위한 정보를 조회합니다.

* 회원 가입이 되어 있는 경우 계좌 및 신용 · 체크 카드 등록 여부를 선택합니다.
* paymentInfos 값을 노출 처리합니다.

***

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

<figure><img src="/files/ZB1dAUu5mZ1oCFcFibCa" alt=""><figcaption><p>마이페이 결제수단 설정 화면</p></figcaption></figure>

> **▶ 비밀번호 변경하기**
>
> GET /my-pay/modify-password [**API 보기>**](https://docs.shopby.co.kr/?url.primaryName=order/#/MyPay/post-modify-password)
>
> 비밀번호 변경파라미터 조회를 조회합니다.

***

> **▶ 등록된 결제 수단 삭제하기**
>
> DELETE /my-pay/payment-infos [**API 보기>**](https://docs.shopby.co.kr/?url.primaryName=order/#/MyPay/delete-payment-infos-pay-token)
>
> 등록된 결제수단을 삭제합니다.

* 선택된 결제 수단의 payToken값을 사용하여 해당 API를 호출합니다.
* 호출 성공 시 마이페이에 등록된 결제 수단 조회하기 API를 재 호출하여 결제 수단 정보를 갱신합니다.

***

> **▶ 회원 서비스 해제하기**
>
> DELETE /my-pay/users [**API 보기>**](https://docs.shopby.co.kr/?url.primaryName=order/#/MyPay/delete-user)
>
> 회원 서비스를 해제합니다.

* accessToken을 활용하여 해당 API를 호출 후 등록된 회원의 서비스를 해제합니다.
* 호출 성공 시 마이페이에 등록된 결제 수단 조회하기 API를 재 호출하여 결제 수단 정보를 갱신합니다.

***

> **▶ 중복 가입 회원 서비스 해제하기**
>
> DELETE /my-pay/user/by-key [**API 보기>**](https://docs.shopby.co.kr/?url.primaryName=order/#/MyPay/delete-user-by-key)
>
> 회원 서비스를 해제합니다.

* 마이페이 회원 등록 중 '이미 등록된 회원입니다.'라는 메시지가 나오는 경우에만, 해당 API를 통해 회원 서비스를 해지할 수 있습니다.
* 회원 서비스 해지할 사용자의 deleteKey를 활용하여 해당 API를 호출 후 등록된 회원의 서비스를 해제합니다. 이때 deleyKey는 회원 등록하기 진행 시, 중복 회원이면 응답 결과로 전달됩니다.

***

> **▶ API 호출 후 팝업창 띄우기** [**API 보기>**](https://shop-api.e-ncp.com/payments/ncp_pay.js)

* 위 라이브러리를 이용하시면, 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를 사용하고 있는 경우 스킨 패치가 필요합니다.
   * [마이페이 릴리즈 업데이트 확인하기>](https://skins.shopby.co.kr/shopby/aurora-skin/-/releases/v1.0.47)
2. 마이페이 기능을 간편하게 사용할 수 있도록 @shopby/react-components패키지에 마이페이컴포넌트를 제공합니다.
   * 마이페이용 컴포넌트 가이드는 추후 제공 예정입니다.
   * [기존 컴포넌트 가이드 확인하기>](https://nhnent.dooray.com/share/pages/WoOk8q6KT1K3MZcLSuyZsw/3530467794042524642)


---

# 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/mypay.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.