1. 1차적으로 요청하는 API

@PostMapping("/{boardId}")
    public ResponseEntity<ApiResult<PaymentResponse>> request(
            @PathVariable Long boardId,
            @Valid @ModelAttribute PaymentRequest request
    ) {
        String email = authenticationService.getEmail();
        PaymentResponse paymentResponse = paymentService.request(request, email, boardId);
        return ResponseEntity.ok(ApiUtils.success(paymentResponse));
    }

• 이곳에서 먼저 요청값들에 대한 검증이 이뤄지고 성공적이라면 → 토스페이먼츠로 실제 결제 요청을 보내게 된다.

그럼 결과 값으로

{
  "success": true,
  "response": {
    "payType": "CARD",
    "amount": 100,
    "orderName": "주문명",
    "customerName": "푸항항",
    "customerEmail": "[email protected]",
    "orderId": "4_923237306",
    "successUrl": "<http://localhost:8080/payment/success>",
    "failUrl": "<http://localhost:8080/payment/fail>",
    "createAt": "2023-07-04T20:53:15.2922703",
    "paymentStatus": "READY"
  },
  "error": null
}

• 값을 받을 수 있다.

클라이언트

button.addEventListener('click', function () {
        tossPayments.requestPayment('카드', {
            amount: 100,
            orderId: '4_923237306',
            orderName: "주문명",
            customerName: "푸항항",
            customerEamil: "[email protected]",
            successUrl: '<http://localhost:8080/success>',
            failUrl: '<http://localhost:8080/fail>',
        })
    })

• 이걸 작성하자.
• 해당 자바스크립트를 실행하면

• 토스에서 제공하는 결제 시스템이 뜨게 된다.
• 결제금액 및 상품명이 요청시 작성한 내용과 동일한 것을 볼 수 있다.
• 정상적으로 결제가 완료되면
• http://localhost:8080/success?orderId=4_923237306&paymentKey=OR1ZwdkQD5GePWvyJnrK2wQl025P9aVgLzN97EoqYA60XKx4&amount=100
• 의 URL을 받을 수 있다.
• 이렇게 되면 paymentKey, orderId, amount 총 3개의 파라미터 값이 넘어 오게 된다.
• 이때 주문 별 UUID이므로 유니크하다. 따라서 이 값을 가지고 저장된 결제 호출 내역을 조회해서 현재 amount값과 결제 요청 때 저장된 amount 값과 비교하면 정상적으로 가격 이상없이 주문이 이뤄졌는지 알 수 있다.
• 이때 받은 paymentKey가 결제 취소 및 결제 조회에 사용되므로 결제 Entity에 추가해줄 필요가 있다.
• 그럼 이제 프론트에서 요청한 데이터를 반환하였고, 프론트가 다시 응답 데이터로 결제요청을 해서 토스페이먼츠가 결제 결과로 성공 시 콜백 주소로 응답을 보낸것을 처리한다.