AirDnS 회고 #2

 

토스페이먼츠

 

토스페이먼츠

 

https://docs.tosspayments.com/guides/payment-widget/integration

연동하기 | 토스페이먼츠 개발자센터

토스페이먼츠에서 제공하는 결제 flow는 위와 같다.

주요 정보 몇가지만 캡쳐해서 넣었지만 아래 이미지에서도 볼 수 있듯

토스페이먼츠에서는 개발하기 편리하게 상세한 정보를 제공한다. 

 

간편결제를 적용하고 싶다면 우선 본인이 원하는 플랫폼에서 제공하는 결제흐름이나 적용 방식에 대해 먼저 상세하게 공부하기를 추천한다.

나는 사전에 많은 정보를 찾아보고 토스페이먼츠 flow를 이해했다! 라고 생각했음에도 불구하고 막상 개발할 때 많은 애를 먹었다.. 

   

 

 

아주! 간단하게 정리해보면

결제 위젯을 화면에 띄우고 결제 정보를 입력한 후 요청을 한다.

토스페이먼츠에서 해당 정보를 검증하고 승인한 후에 결제에 성공하면 해당 정보를 쿼리로 리다이렉트 해준다.

쿼리에 담긴 결제를 구분할 payment key, orderId, 금액과 같은 것을 뽑아서 백엔드로 넘긴다.

백엔드는 해당 정보를 DB에 저장한다.

 

 

https://github.com/tosspayments/payment-widget-sample

GitHub - tosspayments/payment-widget-sample: 토스페이먼츠 결제위젯 샘플 프로젝트입니다.

 

-> 위 링크에 접속하면 토스페이먼츠에서 제공하는 다양한 언어로 개발된 결제위젯을 확인할 수 있다. 

 

---

 

<template>
  <div class="wrapper">
    <div class="box_section">
      <!-- 결제 UI -->
      <div id="payment-method"></div>
      <!-- 이용약관 UI -->
      <div id="agreement"></div>
      <!-- 결제하기 버튼 -->
      <div class="result-wrapper">
        <button @click="requestPayment" class="button" id="payment-button" style="margin-top: 30px">
          결제하기
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import {loadPaymentWidget, ANONYMOUS} from "@tosspayments/payment-widget-sdk";
import {nanoid} from "nanoid";

export default {
  data() {
    return {
      data: null,
      paymentWidget: null,
      paymentMethodWidget: null,
      clientKey: "test_ck_Ba5PzR0ArnWdaxZloyQ18vmYnNeD",
      customerKey: nanoid(),
      amount: null,
    };
  },
  methods: {
    async requestPayment() {
      try {
        if (this.paymentWidget) {
          var regex = /[^0-9]/g;
          var result = this.data.userContact.replace(regex, "");
          await this.paymentWidget.requestPayment({
            orderId: nanoid(),
            orderName: this.data.reservationName,
            customerName: this.data.userName,
            customerEmail: this.data.userEmail,
            reservationId: this.data.id,
            customerMobilePhone: result,
            successUrl: `${window.location.origin}/success?orderName=${encodeURIComponent(
                this.data.reservationName)}&reservationId=${this.data.id}`,
            failUrl: `${window.location.origin}/fail`,
          });
        }
      } catch (error) {
        console.error(error);
      }
    },
  },
  async mounted() {
    this.paymentWidget = await loadPaymentWidget(this.clientKey, ANONYMOUS);
    this.paymentMethodWidget = this.paymentWidget.renderPaymentMethods("#payment-method",
        {value: this.amount}, {variantKey: "DEFAULT"});
    this.paymentWidget.renderAgreement("#agreement", {variantKey: "AGREEMENT"});
  },
  created() {
    const {data} = history.state;
    this.data = data;
    this.amount = this.data.price
  }
};
</script>
<style>
.box_section {
  width: 650px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgb(0 0 0 / 1%), 0 6px 6px rgb(0 0 0 / 6%);
  padding: 40px 30px 50px 30px;
  margin: auto;
  margin-top: 100px;
  color: #333D4B;
}
.button{
  color: #f9fafb;
  background-color: #3182f6;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  border: 0 solid transparent;
  user-select: none;
  transition: background 0.2s ease, color 0.1s ease;
  text-decoration: none;
  border-radius: 7px;
  padding: 10px 13px;
}

.result-wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

 

 

우리는 결제화면을 Vue로 띄웠다. 

해당 코드로 결제 위젯을 불러오고 입력한 결제 정보를 백엔드로 넘기면 

서버에서 토스페이먼츠측에 결제 승인을 요청한다. 

 

위 코드 작성하기까지도 참 많은 과정이 있었다.

Vue의 가장 최근 버전이 Vue3 라고 알고 그걸 기준으로 webpack으로 설치까지 완료했는데

토스에서 제공하는 게 vite 버전이라 프로젝트 설정을 아예 바꿔야하나 싶어서 바꾸려고 삽질하다가 

삭제 재설치 삭제 재설치 반복하다 다시 webpack으로 두고 코드를 뜯어보니 설정 문제가 아니라

코드 문제라는 것을 발견하고 수정해서 결국 해결한 경험.. 

아무래도 해당 언어, 파일구조가 익숙하지 않아서 사소한 문제가 계속 발생했다..

   

public class PaymentController {

    private final PaymentServiceImplV1 paymentService;

    @PostMapping("reservation/{reservationId}/payment")
    @Operation(summary = "결제 요청", description = "예약 건에 대해 결제 요청을 한다.")
    @ApiResponses(value = {
            @ApiResponse(responseCode = "201", description = "결제 성공"),
            @ApiResponse(responseCode = "400", description = "존재하지 않는 예약입니다."),
    })
    public ResponseEntity<CommonResponse<PaymentResponseDto.CreatePaymentResponseDto>> createPayment(
            @AuthenticationPrincipal UserDetailsImpl userDetails,
            @PathVariable Long reservationId,
            @RequestBody PaymentRequestDto.CreatePaymentRequestDto requestDto) {

        PaymentResponseDto.CreatePaymentResponseDto paymentResponseDto = paymentService.createPayment(
                userDetails.getUser().getId(),
                reservationId,
                requestDto);
        return ResponseEntity.status(HttpStatus.CREATED).body(
                new CommonResponse<>(
                        HttpStatus.CREATED,
                        "결제 성공",
                        paymentResponseDto
                )
        );

    }

 

---

 

우리는 예약 정보를 포함해서 넘기고 예약정보가 일치할 경우에만 결제 요청을 하도록 구현했다.

이렇게 결제 승인이 떨어지면 토스페이먼츠 측에서 클라이언트에 성공 URL을 넘겨주고 클라이언트는 받아온 정보를 다시 서버에 넘겨

DB에 저장된다.

 

    private PaymentResponseDto.CreatePaymentResponseDto handleSuccessfulResponse(
            PaymentRequestDto.CreatePaymentRequestDto requestDto
            , Reservation reservation) {
        Payment payment = Payment.builder()
                .orderId(requestDto.getOrderId())
                .orderName(requestDto.getOrderName())
                .amount(requestDto.getAmount())
                .paymentKey(requestDto.getPaymentKey())
                .paymentType(requestDto.getPaymentType())
                .reservation(reservation)
                .build();
        paymentRepository.save(payment);
        return PaymentResponseDto.CreatePaymentResponseDto.from(payment);
    }



 

서버에서 토스페이먼츠 측으로 결제요청을 하는 코드는 상단의 Github 링크에서 참고하는 것이 가장 좋다.

 

나도 제공된 코드를 프로젝트에 맞게 커스텀해서 구현했다.

 

 

 

우여곡절 끝에 결국 완성하긴 했다.

다만, 시간 관계상 구현하지 못한 부분들이 꽤나 있어 상당히 아쉽다.

Vue.js를 처음 다뤄보는 거라 이 부분에서 예상치 못하게 많은 시간이 소요됐다.

 

프론트랑 백을 연결하는 경험 자체가 처음이라 정말 애를 먹었다..

결제정보가 DB에 안 쌓이는게 가장 큰 난관이었는데 어처구니 없이 코드 한 줄만 수정하면 되는 문제였다.. (코드를 꼼꼼하게 살핍시다 ..)   

그리고 DB 연결된 것 확인했는데 배포하고 나서 갑자기 또 안 되는 경우..  (이것 또한 주소 오타 문제.. 꼼꼼하게 확인합시다..)

배포하고 나서는 로컬, 배포 주소 왔다 갔다 하면서 개발을 진행했는데 여기서 꼼꼼하게 확인하지 않으면 박살난다는걸 경험을 통해 알게되었다..

 

우리가 시간에 쫓겨 프론트 부분은 코드컨벤션을 제대로 지키지 못했는데 이번 프로젝트 경험을 통해

협업에서 코드컨벤션, github을 잘 사용하는 것이 얼마나 필수적이고 중요한 것인지 깨달았다.