고정 헤더 영역
상세 컨텐츠
본문
앞서 paypal 과의 연동을 일반적인 웹 호출방식으로 하는것에 대해서 알아보았다.
웹 호출방식의 장점은.. 커스터마이징이 자유롭다는 것이다. paypal UI 없이 내가 원하는 구매버튼 등을 자유롭게 활용하여 페이팔의 "Pay Now" 버튼을 누른것처럼 만들수가 있다는 것이다.
내가 구현하는 사이트의 경우.. 일반적인 쇼핑몰이 아닌 무형의 상품(?)를 거래하는 사이트이기 때문에 거래 발생시점의 금액도 다양하고 원하는 시점에 구매버튼을 누른것과 같은 트리거 효과를 주기 위해서 웹 방식을 사용하였다.
하지만 유형의 상품을 판매하는 일반적인 쇼핑몰의 경우 위의 웹 호출방식을 이용하지 않고도 간단하게 paypal 연동이 가능하다.
바로 paypal 버튼 기능을 이용하는 것이다.
웹 호출, REST, API... 등 다양한 연동방식이 있지만 버튼 기능을 이용하면 이러한 복잡한 기능을 몰라도 쉽게 연동 가능하다.
0. 준비하기(옵션)
버튼 기능을 이용하기 위해서는 Merchant account ID를 알아야 한다. 이것을 몰라도 버튼을 생성하고 연동할수 있지만(Merchant account ID 대신 판매자 메일계정 입력).. 판매자 이메일 계정을 이용하기 때문에 소스보기 등을 통해 메일계정이 노출되는 것이 싫다면 Merchant account ID를 이용하자. 아래 그림처럼 profile -> My business info -> Merchant account ID 에서 확인할 수 있다.
1. 버튼 만들기
버튼 만들기는 paypal의 다음 URL을 이용한다. http://paypal.github.io/JavaScriptButtons/
아래와 같은 기본버튼 샘플 화면이 나오고.. 버튼을 커스터마이징 할수 있는 링크가 보인다.
아래 표시한 빨간색 박스 부분을 클릭하자
임의의 버튼을 만들 수 있는 팝업이 뜬다. 아래 그림과 같이 내용을 채워준다.
Merchant : Merchant account ID 또는 판매자 이메일계정을 입력
Name : 상품명 입력
Quantity : 구매하는 상품 갯수 입력
Amount : 상품 금액 입력
Currency : 화폐단위(USD, KRW, JPY...)
Shipping : 배송비 입력
Tax : 세금 입력
Callback URL : 결제가 완료된 후 되돌아갈 URL 입력
Environment : sandbox(개발환경) 인지 체크
위의 Callback URL의 경우.. 앞서 살펴보았던 결제가 완료된 후 결과값을 수신할 쇼핑몰 URL이다. IPN과 동일하다. 이미 paypal 서버에서 IPN이나 PDT를 설정해 두었다면.. 위 callback URL 파라메터를 제거하고 사용하면 된다. paypal 서버에서 설정한 PDT나 IPN으로 결과 데이터가 전송이 된다.
(* 이 파라메터는 IPN과 완전히 동일한것으로 보인다. PDT와 동시에 사용한다면.. 두번 호출되므로 유의해서 적용한다.)
위 처럼 작성하고 preview 버튼을 누르면 아래와 같이 작성된 스크립트 화면을 볼 수 있다.
아래 Buy Now 버튼을 눌러서 테스트 해보아도 되고.. 별도로 html 파일을 만들어서 아래 코드를 입력하고 테스트 해보아도 된다.
2. 버튼 테스트 하기
나는 별도로 html 파일을 만들어서 테스트 해 보았다. 전체 html 파일 내용은 아래와 같다.(대부분이 위에서 자동 생성된 스크립트..)
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title> paypal test </title>
</head>
<body>
<h2>페이팔 결제 테스트</h2>
<script async="async" src="https://www.paypalobjects.com/js/external/paypal-button.min.js?merchant=ZTLRVGRXL6MTY"
data-button="buynow"
data-name="나의상품1"
data-quantity="1"
data-amount="3"
data-currency="USD"
data-shipping="0"
data-tax="0"
data-callback="http://나의서버URL/test/ppb_callback.php"
data-env="sandbox"
></script>
</body>
</html>
위와 같은 html 파일을 만들어서 Buy Now 버튼을 클릭하면.. 앞서 웹 호출방식에서 작성된 프로그램과 동일하게 아래와 같은 화면으로 넘어간다. 앗!! 상품명 한글이 깨져 보인다. 분명 html 파일에 메타태그로 인코딩을 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 지정했음에도.. 한글이 깨지고 있다.
한글 깨짐 문제는 아래와 같이 버튼 생성 스크립트에 파라메터를 하나 추가해 줌으로써 해결할 수 있다.
스크립트 안에 인코딩을 지정하는 한줄을 추가해 준다.
data-charset="UTF-8"
한줄을 추가하여 수정된 스크립트는 아래와 같다.
<script async="async" src="https://www.paypalobjects.com/js/external/paypal-button.min.js?merchant=ZTLRVGRXL6MTY"
data-button="buynow"
data-name="나의상품1"
data-quantity="1"
data-amount="3"
data-currency="USD"
data-shipping="0"
data-tax="0"
data-callback="http://나의서버URL/test/ppb_callback.php"
data-env="sandbox"
data-charset="UTF-8"
></script>
수정된 스크립트를 통해 구매하기 버튼을 누르면.. 아래와 같이 한글이 정상적으로 나오는 것을 볼 수 있다.
이 후의 과정은 앞서 웹 호출방식 연동한 것과 동일하게 진행하면 된다.
글을 작성하고 보니.. 웹 호출방식과 버튼을 이용한 연동방식은 큰 차이가 없어 보인다.
paypal에서 제공하는 "Buy Now" 버튼을 그대로 사용하는 경우 버튼방식을 이용하면 되고.. 자체 버튼을 이용해서 구현하고자 한다면 웹 호출방식을 이용하면 되겠다. 이후의 PDT, IPN 은 동일하게 동작한다.
* 테스트를 마치고 상용서버에 적용하고자 한다면.. 위 스크립트에서 sandbox 부분을 제거해야 한다. (data-env="sandbox" 부분 제거)
* 버튼방식에는 웹 호출방식에 있던 item_number 가 없다. order number 등을 paypal에 넘겼다가 다시 받고 싶다면(즉 item_number를 이용하고 싶다면) 항목에 data-number 를 추가하면 된다.
(PDT나 IPN 으로 결과값을 수신해 보면 위의 data-name 은 item_name 으로 data-number 는 item_number 로 되돌아 온다.)
'프로그램개발 > web' 카테고리의 다른 글
| 페이팔(Paypal) 웹방식 연동하기 - 3. 결제결과 전달받기 (21) | 2014.07.20 |
|---|---|
| 페이팔(Paypal) 웹방식 연동하기 - 2. 연동 테스트 (1) | 2014.07.19 |
| 페이팔(Paypal) 웹방식 연동하기 - 1. 테스트 환경 설정 (5) | 2014.07.18 |
| jQuery 레이어 팝업 라이브러리 (0) | 2014.06.13 |
