1. 계정 생성
2. 결제 연동
좌측 메뉴에서 결제 연동 탭으로 이동하자.
내 식별 코드를 클릭하면 결제창 연동 및 API 호출 시 필요한 연동 정보를 확인할 수 있다.
하단에서 결제대행사를 추가해주자. 필자는 카카오페이로 PG사를 선택하고 추가 해주었다.
다음과 같이 창이 뜨고, 변경한건 없다.
다음과 같이 등록된걸 확인할 수 있다.
3. JavaScript 코드
resources/templates/payment.html 을 생성했다.
PG사 코드는 다음 링크에서 확인할 수 있다. 위에서 등록한 PG사의 코드를 사용해야 한다.
https://developers.portone.io/docs/ko/tip/pg-2
<!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("가맹점식별코드");
function requestPay() {
IMP.request_pay(
{
pg: "{PG사코드}.{PG상점ID}", //Test는 TC0ONETIME
pay_method: "card",
merchant_uid: "57008833-33004",
name: "테스트 상점",
amount: 1004,
buyer_email: 'test@naver.com',
buyer_name: '코드쿡',
buyer_tel: '010-1234-5678',
buyer_addr: '서울특별시',
buyer_postcode: '123-456',
},
function (rsp) {
$.ajax({
type: 'POST',
url: '/verifyIamport/' + rsp.imp_uid
}).done(function(data) {
if(rsp.paid_amount === data.response.amount){
alert("결제 성공");
} else {
alert("결제 실패");
}
});
});
}
</script>
<meta charset="UTF-8">
<title>Sample Payment</title>
</head>
<body>
<button onclick="requestPay()">결제하기</button>
</body>
</html>
4. React 코드
import React, { useEffect } from 'react';
import axios from 'axios';
const Payment = () => {
useEffect(() => {
const jquery = document.createElement("script");
jquery.src = "http://code.jquery.com/jquery-1.12.4.min.js";
const iamport = document.createElement("script");
iamport.src = "http://cdn.iamport.kr/js/iamport.payment-1.1.7.js";
document.head.appendChild(jquery);
document.head.appendChild(iamport);
return () => {
document.head.removeChild(jquery);
document.head.removeChild(iamport);
};
}, []);
const requestPay = () => {
const { IMP } = window;
IMP.init('가맹점식별코드');
IMP.request_pay({
pg: '{PG사코드}.{PG상점ID}',
pay_method: 'card',
merchant_uid: new Date().getTime(),
name: '테스트 상품',
amount: 1004,
buyer_email: 'test@naver.com',
buyer_name: '코드쿡',
buyer_tel: '010-1234-5678',
buyer_addr: '서울특별시',
buyer_postcode: '123-456',
}, async (rsp) => {
try {
const { data } = await axios.post('http://localhost:8080/verifyIamport/' + rsp.imp_uid);
if (rsp.paid_amount === data.response.amount) {
alert('결제 성공');
} else {
alert('결제 실패');
}
} catch (error) {
console.error('Error while verifying payment:', error);
alert('결제 실패');
}
});
};
return (
<div>
<button onClick={requestPay}>결제하기</button>
</div>
);
};
export default Payment;
5. SpringBoot 서버
서버에 결제 검증 로직을 추가하자.
의존성을 추가해준다
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'com.github.iamport:iamport-rest-client-java:0.2.21'
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
IamportClient를 생성할 때 restApiKey와 restApiSecret이 필요하다. (결제 연동 탭에서 확인했던 정보)
필자는 application.properties에 해당 내용을 따로 작성해주고 @Value 애노테이션을 사용하여 값을 가져왔다. 생성자를 만들어 직접 값을 넣어줘도 상관없다.
PaymentController
@RestController
public class PaymentController {
@Value("${iamport.key}")
private String restApiKey;
@Value("${iamport.secret}")
private String restApiSecret;
private IamportClient iamportClient;
@PostConstruct
public void init() {
this.iamportClient = new IamportClient(restApiKey, restApiSecret);
}
@PostMapping("/verifyIamport/{imp_uid}")
public IamportResponse<Payment> paymentByImpUid(@PathVariable("imp_uid") String imp_uid) throws IamportResponseException, IOException {
return iamportClient.paymentByImpUid(imp_uid);
}
}
application.properties
iamport.key=REST API Key 입력
iamport.secret=REST API Secret 입력
HomController
thymeleaf를 쓰지 않고 React를 사용한다면 이 부분은 만들 필요 없다.
@Controller
public class HomeController {
@GetMapping("/payment")
public Mono<Rendering> payment() {
return Mono.just(Rendering.view("payment").build());
}
}
만약, React로 프론트를 작성했다면, CORS를 허용해주어야 한다.
CORSFilter
@Configuration
@EnableWebFlux
public class CORSFilter implements WebFluxConfigurer {
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*");
}
}
6. 테스트
프론트와 백엔드서버를 실행하고 localhost:포트/payment 주소로 이동해보자.
결제하기 버튼이 뜨고, 클릭하면 다음과 같은 화면이 뜬다.
해당 QR 코드를 핸드폰으로 찍어보면 다음과 같은 결제창이 뜬다.
테스트 결제하기를 클릭하면 카카오페이로 부터 결제 알림 메시지가 온다.
'Spring' 카테고리의 다른 글
[Spring] 의존성 주입(DI: Dependency Injection) (0) | 2023.07.22 |
---|---|
[Spring] Junit5 테스트 No tests found for given includes 오류 해결 (0) | 2023.06.21 |
[Spring] Webflux + RSocket, React 사용한 전체 채팅 구현 (0) | 2023.06.02 |
[Spring] SpringBoot K6 + Grafana 부하 테스트 및 모니터링 (0) | 2023.05.29 |
[Spring] Jacoco 적용하여 코드 커버리지 확인 및 Codecov사용한 PR에 커버리지 코멘트 추가 (0) | 2023.05.27 |