페이팔 연동

1. 페이팔 샌드박스 앱 생성

페이팔 최초 로그인 시 business 계정으로 가입했다면 dashboard 화면이 보일 것이다.

오른쪽 상단 자신의 이름을 클릭 후 My Account로 들어가면

좌측 네비게이션에 DASHBOARD 에서 My Apps & Credentials 로 들어간다.

이 페이지에서 create app 으로 앱을 생성하면 되고 Sandbox 는 테스트 용 Live 는 실제 결제 되는 용도이므로 유의 하고 개발하도록 한다.

생성된 앱으로 들어가게되면 Sandbox account, Client ID, Secret 정보가 뜨는데 Sandbox account 는 결제를 테스트 할 때 필요하고

Client ID 와 Secret 은 페이팔 API에서 토큰 값을 받아 올때 필요하다.

2. 페이팔에서 사용 할 Checkout API 정리

1. https://api-m.sandbox.paypal.com/v1/oauth2/token

모든 조작은 Access 토큰을 얻고, 이를 이용해 유저를 판별해 데이터를 내어준다.

위 API는 토큰값을 얻는 API 이고 사용방법은 아래와 같다.

request

response

2. https://api.sandbox.paypal.com/v2/checkout/orders

주문을 생성하는 API 이다. 클라이언트에서 요청하면 백단에서 이쪽 url 로 리퀘스트를 날려 주문생성을 한다.

response 되어 날아오는 id값은 db에 order_book 과 같은 테이블 생성 후

userId값과 함께 저장시켜 놓고 추후에 status 값을 확인하는 용도로 써야할것으로 생각된다.

그 후에 클라이언트 측으로 rel approve 쪽 href 데이터를 보내준다.

request

response

3. https://api.sandbox.paypal.com/v2/checkout/orders/:orderID/capture

결제를 승인하는 API이다. 클라이언트 쪽에서 요청을 하면 백단에서 페이팔 쪽으로 리퀘스트를 날려주면 된다.

클라이언트에서 userId 파라미터를 보내서 서버에 저장한 orderID와 매칭이 되는지 중간점검을 해보는 것도 좋을것 같음.

request

response

4. https://api.sandbox.paypal.com/v2/checkout/orders/:orderID

orderID의 정보를 확인시켜주는 API이다.

백단에서 status 확인용으로 사용하면 될 것 같다.

request

response

추가로 페이팔 API에 대한 모든 정보는

https://developer.paypal.com/docs/api/overview/

이곳에서 확인할 수 있다.

3. 클라이언트단 연동 및 실제 결제 테스트

클라이언트에서는 페이팔 sdk 를 받아서 쉽게 연동할 수 있는데 cdn 으로 추가할 경우 아래와 같이 추가하고

npm 으로 추가할 경우 아래와 같이 추가한다.

기본적인 작동법은 아래와 같고 클라이언트 에서는 createOrder, onApprove 함수로 백단에 요청을 전송하면 됀다.

1. createOrder 함수 (백단에서 만들어둔 createOrder API 로 요청을 보낸다.)

2. onApprove 함수 (위 상단 그림에서 Pay Now 를 눌렀을때 발생하는 API이다. 백단에서 만들어둔 capture API 로 요청을 보낸다.)

3. 만들어둔 함수는 아래에 import한 jsx에 props로 전달 시킨다.
   

실제 결제 테스트는 sandbox 계정으로 하면 되는데 계정은 https://developer.paypal.com/developer/accounts/ 에서 확인할 수 있다.

Personal 은 결제할 계정, Business 는 결제 받는 계정이고 Personal 계정으로 들어가서 결제를 하게 되면 결제가 잘 진행 되는 것을 확인 할 수 있다.