Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

페이팔 v2 portone-ui-container 설명 추가, 유의사항 추가 #378

Merged
merged 3 commits into from
Mar 27, 2024
Merged

페이팔 v2 portone-ui-container 설명 추가, 유의사항 추가 #378

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
20da8c8
페이팔 v2 portone-ui-container 설명 추가, 유의사항 추가
youjmen Mar 26, 2024
94e9d4b
fix: lint
youjmen Mar 27, 2024
2ddd670
fix: apply review
youjmen Mar 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 34 additions & 8 deletions src/content/docs/ko/v2-payment/pg/paypal-v2.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,27 @@ import image11 from "./_assets/paypal/screenshot9.png";

- 단, `windowType` 파라미터 지정 시 PC 및 모바일 환경 모두 `UI`로 지정하셔야 하며, 이 외의 값을 입력하는 경우 에러가 리턴됩니다.

## 일반 결제/빌링키 발급 공통 준비 사항

페이팔의 경우 고객사의 화면에 페이팔 결제/빌링키 발급 버튼을 렌더링 한 후, 페이팔의 버튼을 클릭하여 페이팔의 결제/빌링키 발급 창을 호출하는 방식입니다.

페이팔의 버튼을 렌더링 하기 위해, 버튼을 렌더링 할 곳에 클래스명이 `portone-ui-container`인 DOM element를 선언하셔야 합니다.

```html
<!--
페이팔 버튼을 렌더링 하고 싶은 위치에 "portone-ui-container"라는 class 이름을 갖는 DOM element를 넣습니다.
포트원 SDK는 해당 id를 가지는 element를 찾아 버튼을 렌더링합니다.
-->
<div class="portone-ui-container">
<!-- 여기에 페이팔 버튼이 생성됩니다. -->
</div>

```

## 일반 결제(`loadPaymentUI`) 호출하기

페이팔의 경우 고객사의 결제 화면에 페이팔 결제 버튼을 렌더링 한 후 클릭해 페이팔의 결제창을 호출하는 방식입니다.
일반 결제의 경우, 고객사의 결제 화면에 페이팔 결제 버튼을 렌더링 하기위해 `loadPaymentUI` 함수를 사용해야 합니다.

결제 성공 시의 동작을 `onPaymentSuccess` 콜백 함수에, 결제 실패 시의 동작을 `onPaymentFail`에 작성해야 합니다.

```javascript
Expand Down Expand Up @@ -119,7 +137,8 @@ function updateLoadPaymentUIRequest() {

## 빌링키 발급(`loadIssueBillingKeyUI`) 호출하기

페이팔의 경우 고객사의 결제 화면에 페이팔 빌링키 발급 버튼을 렌더링 한 후 클릭해 페이팔의 결제창을 호출하는 방식입니다.
빌링키 발급의 경우, 고객사의 빌링키 발급 화면에 페이팔 빌링키 발급 버튼을 렌더링 하기위해 `loadIssueBillingKeyUI` 함수를 사용해야 합니다.

발급 성공 시의 동작을 `onIssueBillingKeySuccess` 콜백 함수에, 발급 실패 시의 동작을 `onIssueBillingKeyFail`에 작성하셔야 합니다.

```javascript
Expand Down Expand Up @@ -1531,6 +1550,13 @@ STC 기능을 사용하기 위해 다음 정보를 확인해 주세요.
</ParamTree>
</Details>

<Details>
<p slot="summary">미국 테스트 상점 아이디 사용 불가</p>

페이팔 내부 이슈로 인해 미국 테스트 상점 아이디인 `7WBB3CKT63FRG`을 사용할 수 없습니다.
영국이나 일본 등 다른 테스트 상점 아이디를 통해 테스트가 필요합니다.
</Details>

<Details>
<p slot="summary">**(필독) Rist Data Aquisition 정책**</p>

Expand Down Expand Up @@ -1573,12 +1599,12 @@ STC 기능을 사용하기 위해 다음 정보를 확인해 주세요.

- 파라미터 설명

|파라미터 |설명 |예시 |
|---------|-------------------------------------------------------------------------------|-----------------------------------------------|
|`fncls` |`fnparams-dede7cc5-15fd-4c75-a9f4-36c430ee3a99`로 항상 고정 |`fnparams-dede7cc5-15fd-4c75-a9f4-36c430ee3a99`|
|`f` |주문번호(`paymentId`) 전달 |`paymentId_230980198` |
|`s` |string (`{페이팔 Account ID}_{페이지 유형}` 형식. 페이지 유형은 아래 목록 참고)|`7WBB3CKT63FRG_checkout-page` |
|`sandbox`|페이팔 Account ID가 테스트 용인지 운영 용인지 여부 |`true` |
|파라미터 |설명 |예시 |
|---------|-------------------------------------------------------------------------------|-----------------------------------------------|
|`fncls` |`fnparams-dede7cc5-15fd-4c75-a9f4-36c430ee3a99`로 항상 고정 |`fnparams-dede7cc5-15fd-4c75-a9f4-36c430ee3a99`|
|`f` |주문번호(`paymentId`) 전달 |`paymentId_230980198` |
|`s` |string (`{페이팔 Account ID}_{페이지 유형}` 형식. 페이지 유형은 아래 목록 참고)|`7WBB3CKT63FRG_checkout-page` |
|`sandbox`|페이팔 Account ID가 테스트 용인지 운영 용인지 여부 |`true` |

- 페이지 유형

Expand Down