[Spring] 결제 서비스 | 포트원 연결하기

Trudy | 송연 2024. 1. 2. 19:26

결제 서비스 플랫폼 PortOne

PortOne은 결제 처리와 관련된 다양한 서비스를 제공하는 기업 또는 플랫폼으로 알려져 있습니다. 이들은 다양한 결제 수단을 제공하고, 온라인 상거래나 다른 디지털 결제 트랜잭션을 처리할 수 있는 API, 소프트웨어 및 도구를 제공합니다.

PortOne은 보안, 신뢰성, 다양한 결제 방법 지원 등 다양한 기능을 갖추고 있으며, 상인들이 안전하고 편리하게 결제 처리를 관리할 수 있도록 도와준다.

서비스의 세부적인 기능이나 제공되는 API의 사용 방법 등 아래 공식 웹사이트를 참고하여 개발하면 된다.

https://portone.io/korea/ko

포트원, 온라인 비즈니스를 위한 통합 결제 솔루션

코드 한 줄로 세상 모든 방식의 결제를 경험해보세요

portone.io

결제대행사 설정 및 추가

PG 상점아이디 (CID)

결제하기 버튼은 다음과 같이 간단한 html 예시 코드를 이용했다.

이때 init(가맹점 식별코드)와 pg: {등록할 pg사}.{pg상점아이디} 를 변경해주어야 했다.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- jQuery -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
    <!-- iamport.payment.js -->
    <script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.2.0.js"></script>
    <script>
        var IMP = window.IMP; 

	//가맹점 식별코드 입력
        IMP.init("imp62836256"); 
      
        var today = new Date();   
        var hours = today.getHours(); // 시
        var minutes = today.getMinutes();  // 분
        var seconds = today.getSeconds();  // 초
        var milliseconds = today.getMilliseconds();
        var makeMerchantUid = hours +  minutes + seconds + milliseconds;
        
        function requestPay() {
            IMP.request_pay({
		//등록할 pg사.PG상점아이디 
                pg : 'kakaopay.TC0ONETIME',

                pay_method : 'card',
                merchant_uid: "IMP"+makeMerchantUid, 
                name : '당근 10kg',
                amount : 50000,
                buyer_email : 'Iamport@chai.finance',
                buyer_name : '아임포트 기술지원팀',
                buyer_tel : '010-1234-5678',
                buyer_addr : '서울특별시 강남구 삼성동',
                buyer_postcode : '123-456',
                display: {
                    card_quota: [3]  // 할부개월 3개월까지 활성화
                }
            }, function (rsp) { // callback
                if (rsp.success) {
                    $.ajax({
						type: 'GET',
						url: 'http://localhost:8080/validation?impUid='+rsp.imp_uid
					}).done(function(data) {
						console.log(data);
					})
				
                } else {
                    console.log(rsp);
                }
            });
        }
    </script>
    <meta charset="UTF-8">
    <title>Sample Payment</title>
</head>
<body>
    <button onclick="requestPay()">결제하기</button> <!-- 결제하기 버튼 생성 -->
</body>
</html>

PG상점 아이디는 아래처럼 찾을 수 있었다.

CORS Error

프론트와 백의 url이 달라서 나는 error이다.

@RestController을 이용해서 front와 back을 분리해서 구현했기 때문에 발생한다.

아래 그림처럼 다른 사람이 프론트만 만들어서 우리가 만든 백엔드에 붙어서 요청하면 큰 문제가 초래될 수 있다.

이걸 방지하기 위해서 백엔드에서 특정 프론트서버의 요청만 받도록 설정해줘야 한다.

결론은 백엔드에 특정 프론트엔드만을 허용하는 설정을 하면 된다.

이 문제는 @CrossOrigin() 으로 허용할 프론트 서버를 지정함으로써 해결할 수 있다.

//@CrossOrigin 으로 특정 프론트만 연결 하도록 설정!! CORS 에러를 잡기 위함 
// *로 했으니 모두 허용해 주겠다.
@RestController
@CrossOrigin("*")
public class OrderController {
 	...
}

결제 취소(환불)

https://developers.portone.io/api/rest-v1/payment?v=v1#post%20%2Fpayments%2Fcancel

위 메뉴얼을 참고하여 개발하면 된다.

POST 방식으로 /payments/cancel로 Https요청을 보내게 연결시켜주면 된다.

주의할 점은 BODY의 모든 부분이 Optional로 주어져있지만, imp_uid와 merchant_uid 둘 중 하나는 필수로 입력해야 한다.

OrderController.java

private void paymentCancel(String token, String impUid, String amount, String reason) throws IOException {
        URL url = new URL("https://api.iamport.kr/payments/cancel");
        HttpsURLConnection conn = (HttpsURLConnection) url.openConnection();

        conn.setRequestMethod("POST");

        // 요청의 Content-Type, Accept, Authorization 헤더 설정
        conn.setRequestProperty("Content-type", "application/json");
        conn.setRequestProperty("Accept", "application/json");
        conn.setRequestProperty("Authorization", token);

        // 해당 연결을 출력 스트림(요청)으로 사용
        conn.setDoOutput(true);

        // JSON 객체에 해당 API가 필요로하는 데이터 추가.
        JsonObject json = new JsonObject();
        json.addProperty("imp_uid", impUid);
        json.addProperty("reason", reason);

        // 출력 스트림으로 해당 conn에 요청
        BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(conn.getOutputStream()));
        bw.write(json.toString());
        bw.flush();
        bw.close();

        // 입력 스트림으로 conn 요청에 대한 응답 반환
        BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream()));
        Gson gson = new Gson();
        String response = gson.fromJson(br.readLine(), Map.class).toString();

        System.out.println(response);

        br.close();
        conn.disconnect();

        System.out.println("결제 취소 완료: 주문번호 " + impUid);

    }

전체 코드

https://github.com/SongYeonBaek/be02-shopping-mall-practice

GitHub - SongYeonBaek/be02-shopping-mall-practice

Contribute to SongYeonBaek/be02-shopping-mall-practice development by creating an account on GitHub.

github.com