From 20da8c865294eee435b6ecb6714193459ef5ddbe Mon Sep 17 00:00:00 2001 From: youjmen Date: Wed, 27 Mar 2024 04:48:53 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=ED=8E=98=EC=9D=B4=ED=8C=94=20v2=20portone-?= =?UTF-8?q?ui-container=20=EC=84=A4=EB=AA=85=20=EC=B6=94=EA=B0=80,=20?= =?UTF-8?q?=EC=9C=A0=EC=9D=98=EC=82=AC=ED=95=AD=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/ko/v2-payment/pg/paypal-v2.mdx | 44 ++++++++++++++++--- 1 file changed, 38 insertions(+), 6 deletions(-) diff --git a/src/content/docs/ko/v2-payment/pg/paypal-v2.mdx b/src/content/docs/ko/v2-payment/pg/paypal-v2.mdx index 1501ac9f4..6774286b4 100644 --- a/src/content/docs/ko/v2-payment/pg/paypal-v2.mdx +++ b/src/content/docs/ko/v2-payment/pg/paypal-v2.mdx @@ -51,6 +51,8 @@ import image11 from "./_assets/paypal/screenshot9.png"; 페이팔의 경우 고객사의 결제 화면에 페이팔 결제 버튼을 렌더링 한 후 클릭해 페이팔의 결제창을 호출하는 방식입니다. 결제 성공 시의 동작을 `onPaymentSuccess` 콜백 함수에, 결제 실패 시의 동작을 `onPaymentFail`에 작성해야 합니다. +페이팔의 결제 버튼을 렌더링 하기 위해, 버튼을 렌더링 할 곳에 className이 `portone-ui-container`인 DOM element를 선언하셔야 합니다. + ```javascript const requestData = { uiType: "PAYPAL_SPB", @@ -71,6 +73,17 @@ const response = await PortOne.loadPaymentUI(requestData, { }); ``` +```html + +
+ +
+ +``` +
따라서 다른 PG사와 결제 플로우가 상이하기 때문에 고객사는 **결제(체크아웃) 페이지가 렌더링 되는 시점에** @@ -122,6 +135,8 @@ function updateLoadPaymentUIRequest() { 페이팔의 경우 고객사의 결제 화면에 페이팔 빌링키 발급 버튼을 렌더링 한 후 클릭해 페이팔의 결제창을 호출하는 방식입니다. 발급 성공 시의 동작을 `onIssueBillingKeySuccess` 콜백 함수에, 발급 실패 시의 동작을 `onIssueBillingKeyFail`에 작성하셔야 합니다. +페이팔의 빌링키 발급 버튼을 렌더링 하기 위해, 버튼을 렌더링 할 곳에 className이 `portone-ui-container`인 DOM element를 선언하셔야 합니다. + ```javascript const requestData = { uiType: "PAYPAL_RT", @@ -139,6 +154,17 @@ const response = await PortOne.loadIssueBillingKeyUI(requestData, { }); ``` +```html + +
+ +
+ +``` +
따라서 다른 PG사와 결제 플로우가 상이하기 때문에 고객사는 **결제(체크아웃) 페이지가 렌더링 되는 시점에** @@ -1530,6 +1556,12 @@ STC 기능을 사용하기 위해 다음 정보를 확인해 주세요. 페이팔은 상점 세부 정보를 지원하지 않아 해당 파라미터가 무시됩니다. +
+

미국 테스트 상점 아이디 사용 불가

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

**(필독) Rist Data Aquisition 정책**

@@ -1573,12 +1605,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` | - 페이지 유형 From 94e9d4b4069afdf5a212fd69d9ec675578fe924c Mon Sep 17 00:00:00 2001 From: youjmen Date: Wed, 27 Mar 2024 14:42:01 +0900 Subject: [PATCH 2/3] fix: lint --- src/content/docs/ko/v2-payment/pg/paypal-v2.mdx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/content/docs/ko/v2-payment/pg/paypal-v2.mdx b/src/content/docs/ko/v2-payment/pg/paypal-v2.mdx index 6774286b4..fccaf3215 100644 --- a/src/content/docs/ko/v2-payment/pg/paypal-v2.mdx +++ b/src/content/docs/ko/v2-payment/pg/paypal-v2.mdx @@ -1556,6 +1556,7 @@ STC 기능을 사용하기 위해 다음 정보를 확인해 주세요. 페이팔은 상점 세부 정보를 지원하지 않아 해당 파라미터가 무시됩니다.
+

미국 테스트 상점 아이디 사용 불가

@@ -1605,12 +1606,12 @@ STC 기능을 사용하기 위해 다음 정보를 확인해 주세요. - 파라미터 설명 - |파라미터 |설명 |예시 | - |---------|---------------------------------------------------------|-----------------------------------------------| - |`fncls` |`fnparams-dede7cc5-15fd-4c75-a9f4-36c430ee3a99`로 항상 고정 |`fnparams-dede7cc5-15fd-4c75-a9f4-36c430ee3a99`| - |`f` |주문번호(`paymentId`) 전달 |`paymentId_230980198` | + |파라미터 |설명 |예시 | + |---------|-------------------------------------------------------------------------------|-----------------------------------------------| + |`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` | + |`sandbox`|페이팔 Account ID가 테스트 용인지 운영 용인지 여부 |`true` | - 페이지 유형 From 2ddd670c8f885d8d01e2928e13cb5e76795dedcf Mon Sep 17 00:00:00 2001 From: youjmen Date: Wed, 27 Mar 2024 15:05:59 +0900 Subject: [PATCH 3/3] fix: apply review --- .../docs/ko/v2-payment/pg/paypal-v2.mdx | 61 ++++++++----------- 1 file changed, 27 insertions(+), 34 deletions(-) diff --git a/src/content/docs/ko/v2-payment/pg/paypal-v2.mdx b/src/content/docs/ko/v2-payment/pg/paypal-v2.mdx index fccaf3215..f599f267f 100644 --- a/src/content/docs/ko/v2-payment/pg/paypal-v2.mdx +++ b/src/content/docs/ko/v2-payment/pg/paypal-v2.mdx @@ -46,12 +46,28 @@ import image11 from "./_assets/paypal/screenshot9.png"; - 단, `windowType` 파라미터 지정 시 PC 및 모바일 환경 모두 `UI`로 지정하셔야 하며, 이 외의 값을 입력하는 경우 에러가 리턴됩니다. +## 일반 결제/빌링키 발급 공통 준비 사항 + +페이팔의 경우 고객사의 화면에 페이팔 결제/빌링키 발급 버튼을 렌더링 한 후, 페이팔의 버튼을 클릭하여 페이팔의 결제/빌링키 발급 창을 호출하는 방식입니다. + +페이팔의 버튼을 렌더링 하기 위해, 버튼을 렌더링 할 곳에 클래스명이 `portone-ui-container`인 DOM element를 선언하셔야 합니다. + +```html + +
+ +
+ +``` + ## 일반 결제(`loadPaymentUI`) 호출하기 -페이팔의 경우 고객사의 결제 화면에 페이팔 결제 버튼을 렌더링 한 후 클릭해 페이팔의 결제창을 호출하는 방식입니다. -결제 성공 시의 동작을 `onPaymentSuccess` 콜백 함수에, 결제 실패 시의 동작을 `onPaymentFail`에 작성해야 합니다. +일반 결제의 경우, 고객사의 결제 화면에 페이팔 결제 버튼을 렌더링 하기위해 `loadPaymentUI` 함수를 사용해야 합니다. -페이팔의 결제 버튼을 렌더링 하기 위해, 버튼을 렌더링 할 곳에 className이 `portone-ui-container`인 DOM element를 선언하셔야 합니다. +결제 성공 시의 동작을 `onPaymentSuccess` 콜백 함수에, 결제 실패 시의 동작을 `onPaymentFail`에 작성해야 합니다. ```javascript const requestData = { @@ -73,17 +89,6 @@ const response = await PortOne.loadPaymentUI(requestData, { }); ``` -```html - -
- -
- -``` -
따라서 다른 PG사와 결제 플로우가 상이하기 때문에 고객사는 **결제(체크아웃) 페이지가 렌더링 되는 시점에** @@ -132,10 +137,9 @@ function updateLoadPaymentUIRequest() { ## 빌링키 발급(`loadIssueBillingKeyUI`) 호출하기 -페이팔의 경우 고객사의 결제 화면에 페이팔 빌링키 발급 버튼을 렌더링 한 후 클릭해 페이팔의 결제창을 호출하는 방식입니다. -발급 성공 시의 동작을 `onIssueBillingKeySuccess` 콜백 함수에, 발급 실패 시의 동작을 `onIssueBillingKeyFail`에 작성하셔야 합니다. +빌링키 발급의 경우, 고객사의 빌링키 발급 화면에 페이팔 빌링키 발급 버튼을 렌더링 하기위해 `loadIssueBillingKeyUI` 함수를 사용해야 합니다. -페이팔의 빌링키 발급 버튼을 렌더링 하기 위해, 버튼을 렌더링 할 곳에 className이 `portone-ui-container`인 DOM element를 선언하셔야 합니다. +발급 성공 시의 동작을 `onIssueBillingKeySuccess` 콜백 함수에, 발급 실패 시의 동작을 `onIssueBillingKeyFail`에 작성하셔야 합니다. ```javascript const requestData = { @@ -154,17 +158,6 @@ const response = await PortOne.loadIssueBillingKeyUI(requestData, { }); ``` -```html - -
- -
- -``` -
따라서 다른 PG사와 결제 플로우가 상이하기 때문에 고객사는 **결제(체크아웃) 페이지가 렌더링 되는 시점에** @@ -1606,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` | - 페이지 유형