💳 토스페이먼츠 연동하기 (2) _결제 요청

현주·2023년 5월 31일

📌 우리 프로젝트에서 토스페이먼츠를 이용한 결제 파트를 어떻게 구현하였는지 살펴보려고 한다 !
📌 <결제 흐름 역할별 정리>에서 1~3번에 해당하는 내용입니다.

먼저, 토스페이먼츠의 개발자 테스트용 API 키를 받아 사용해야하기 때문에

토스페이먼츠에 가입 후, 개발자용 테스트상점에서 API 키를 받을 수 있다.

[토스페이먼츠 API 키 받기 참고]

이 API 키는 화면을 구성할 때 토스페이먼츠 결제창 API와 연결하기 위해 사용할 것이므로

appliaction.yml에 위에서 발급받은 테스트 클라이언트 키와 테스트 시크릿 키를 아래와 같이 적어준 후,

TossPaymentConfig 클래스에 @Value 애너테이션을 사용하여 API 키와 URL들을 변수로 사용할 수 있도록 만들어 줄 것이다.

🌼 백엔드의 역할

서버에서 결제에 필요한 정보를 입력받을 수 있도록 하는 Controller,
전달받은 정보를 가지고 검증 / 필요한 값들을 생성하는 Service,
요청 값들을 가지고 있는 Dto,
결제 요청 내역으로써 DB에 저장될 Entity,
저장 장소인 Repository를 구현할 것이다.

✔️ 결제 Dto

결제 호출 요청을 하는 PaymentDto

@Setter
@Getter
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class PaymentDto {
    @NonNull
    private PayType payType; // 결제 타입 - 카드/현금/포인트
    @NonNull
    private Long amount; // 가격 정보
    @NonNull
    private String orderName; // 주문명
⠀
    private String yourSuccessUrl; // 성공 시 리다이렉트 될 URL
    private String yourFailUrl; // 실패 시 리다이렉트 될 URL
⠀
    public Payment toEntity() {
        return Payment.builder()
                .payType(payType)
                .amount(amount)
                .orderName(orderName)
                .orderId(UUID.randomUUID().toString())
                .paySuccessYN(false)
                .build();
    }
}

➜ 위 값들을 프론트에서 입력받음

응답으로 올 PaymentResDto

@Setter
@Getter
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class PaymentResDto {
    private String payType; // 결제 타입 - 카드/현금/포인트
    private Long amount; // 가격 정보
    private String orderName; // 주문명
    private String orderId; // 주문 Id
    private String customerEmail; // 고객 이메일
    private String customerName; // 고객 이름
    private String successUrl; // 성공 시 리다이렉트 될 URL
    private String failUrl; // 실패 시 리다이렉트 될 URL
⠀
    private String failReason; // 실패 이유
    private boolean cancelYN; // 취소 YN
    private String cancelReason; // 취소 이유
    private String createdAt; // 결제가 이루어진 시간
}

➜ PaymentDto로 받은 정보들을 검증 후, 실제 토스페이먼츠에서 결제 요청을 하기 위해 필요한 값들을 포함하여 PaymentResDto로 반환

✔️ 결제 Entity

Payment

@Entity
@Getter
@Builder
@AllArgsConstructor
@NoArgsConstructor
@Setter
@Table(indexes = {
        @Index(name = "idx_payment_member", columnList = "customer"),
        @Index(name = "idx_payment_paymentKey", columnList = "paymentKey" ),
})
public class Payment extends Auditable {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "payment_id", nullable = false, unique = true)
    private Long paymentId;
    @Column(nullable = false , name = "pay_type")
    @Enumerated(EnumType.STRING)
    private PayType payType;
    @Column(nullable = false , name = "pay_amount")
    private Long amount;
    @Column(nullable = false , name = "pay_name")
    private String orderName;
    @Column(nullable = false , name = "order_id")
    private String orderId;
⠀
    private boolean paySuccessYN;
    @ManyToOne(cascade = CascadeType.PERSIST)
    @JoinColumn(name = "customer")
    private Member customer;
    @Column
    private String paymentKey;
    @Column
    private String failReason;
⠀
    @Column
    private boolean cancelYN;
    @Column
    private String cancelReason;
    public PaymentResDto toPaymentResDto() { // DB에 저장하게 될 결제 관련 정보들
        return PaymentResDto.builder()
                .payType(payType.getDescription())
                .amount(amount)
                .orderName(orderName)
                .orderId(orderId)
                .customerEmail(customer.getEmail())
                .customerName(customer.getName())
                .createdAt(String.valueOf(getCreatedAt()))
                .cancelYN(cancelYN)
                .failReason(failReason)
                .build();
    }
}

➜ 실제 DB에 저장하게 될 결제 관련 정보들
➜ 응답 결과로는 엔티티가 아닌 PaymentResDto 객체로 반환함

✔️ 결제 Repository

JpaPaymentRepository

✔️ 결제 Controller

requestTossPayment

➜ 프론트에서 결제를 요청하기 위해 1차적으로 요청하는 API
⠀
➜ 여기서 Service 로직을 타고 들어가 검증 과정을 마치고 정상적으로 진행이 된다면 토스페이먼츠에 실제 결제 요청을 보냄

✔️ 결제 Service

requestTossPayment

➜ 결제를 위해 요청한 값들을 Controller로부터 전달 받아 검증을 함
⠀
➜ 조건들이 맞는지 확인하고, 모든 조건들이 맞다면 Entity 객체로 만든 후 DB에 저장하고 반환해줌

🚩 여기까지 한다면,
프론트에서 결제를 요청하고 백엔드에서 해당 데이터를 검증 후, 결제 요청 객체를 반환해주는 부분이 완성된 것이다.

간단하게 h2 DB로 확인해보았는데, 위처럼 정보들이 잘 들어간 것을 알 수 있다.

이제 아래와 같은 응답 값이 잘 전달되었을 때,
그 값들을 가지고 토스페이먼츠에 결제 요청을 보낼 것이다.

{
    "data": {
        "payType": "카드",
        "amount": 58500,
        "orderName": "포인트 충전",
        "orderId": "bec1d544-2a34-4f44-ada0-c5213d8fd8dd",
        "customerEmail": "test1@gmail.com",
        "customerName": "첫번째",
        "successUrl": "http://localhost:8080/api/v1/payments/toss/success",
        "failUrl": "http://localhost:8080/api/v1/payments/toss/fail",
        "failReason": null,
        "cancelYN": false,
        "cancelReason": null,
        "createdAt": "2023-06-06T19:25:04.432591600"
    }
}

🌼 프론트의 역할

✔️ 결제 요청 화면

<!DOCTYPE html>
<html lang="ha">
<head>
    <meta charset="utf-8" />
    <title>결제하기</title>
    <!-- 토스페이먼츠 결제창 SDK 추가 -->
    <script src="https://js.tosspayments.com/v1/payment"></script>
</head>
<body>
<section>
    <!--  충전하기 버튼 만들기  -->
    <span>총 포인트 충전 금액 :</span>
    <span>58500원</span>
    <button id="payment-button">58500원 충전하기</button>
</section>
<script>
    // ------ 클라이언트 키로 객체 초기화 ------
    var clientKey = '테스트_클라이언트_키'
    var tossPayments = TossPayments(clientKey)
⠀
    // ------ 충전하기 버튼에 기능 추가 ------
    var button = document.getElementById('payment-button') // 충전하기 버튼
    button.addEventListener('click', function () {
⠀
        // ------ 결제창 띄우기 ------
        tossPayments.requestPayment('CARD', {
            amount: 58500,
            orderId: 'bec1d544-2a34-4f44-ada0-c5213d8fd8dd',
            orderName: '포인트 충전',
            customerName: '첫번째',
            customerEmail: 'test1@gmail.com',
            successUrl: 'http://localhost:8081/api/v1/payments/toss/success',
            failUrl: 'http://localhost:8081/api/v1/payments/toss/fail'
        })
    })
</script>
</body>
</html>