단체개발일지: 결제기능구현 흐름

😟포트원(Port One) 결제 연동 흐름

포트원(Port One)을 통해 결제 기능을 구현하게 되었고. 처음에는 결제 프로세스가 어떻게 이루어지는지 감을 잡질못해서 매일매일 문서를 보거나 리서치만 하고 소위 말하는 삽질만하다가 프론트 짝꿍과 결제에 대해 소통을하면서 그 흐름을 잡아가는 중이다..! 

▶ 포트원 결제 연동 흐름

1. 백엔드에서 API를 통해 결제 데이터를 클라이언트로 전송

결제 프로세스는 백엔드에서 클라이언트로 결제 관련 데이터를 전송하는 것으로 시작된다. 이때, 전송하는 데이터에는 결제를 위해 필요한 각종 정보가 포함되고, 클라이언트는 이 정보를 바탕으로 결제를 요청하게 된다.

EstimateAndCommissionResponseDto 클래스가 그 예시가 될 수 있다. 이 클래스는 클라이언트에게 결제 관련 데이터를 전송하는 DTO(Data Transfer Object)로, 결제 금액과 멤버 정보, 클린 타입과 같은 중요한 데이터를 포함하고 있다.

public class EstimateAndCommissionResponseDto {

    @JsonProperty("estimate_id")  // 견적 ID
    private final Long estimateId;

    @JsonProperty("commission_id")  // 의뢰 ID
    private final Long commissionId;

    @JsonProperty("estimate_amount")  // 견적 금액
    private final int estimateAmount;

    @JsonProperty("member_nick")  // 멤버 닉네임
    private final String memberNick;

    @JsonProperty("member_phone_number")  // 멤버 전화번호
    private final String memberPhoneNumber;

    @JsonProperty("member_email")  // 멤버 이메일
    private final String memberEmail;

    @JsonProperty("clean_type")  // 클린 타입
    private final CleanType cleanType;

    public EstimateAndCommissionResponseDto(Long estimateId, Long commissionId, int estimateAmount,
                                            String memberNick, String memberPhoneNumber, String memberEmail, CleanType cleanType) {
        this.estimateId = estimateId;
        this.commissionId = commissionId;
        this.estimateAmount = estimateAmount;
        this.memberNick = memberNick;
        this.memberPhoneNumber = memberPhoneNumber;
        this.memberEmail = memberEmail;
        this.cleanType = cleanType;
    }
}

→ 이 DTO는 클라이언트로 전송되어 결제 요청 시 사용되고, 그 과정에서 필요한 데이터들을 구조화된 형태로 전달한다.

 

2. 클라이언트에서 결제 데이터를 가지고 포트원에 결제 요청

클라이언트는 백엔드에서 전송된 데이터를 가지고 포트원에 결제 요청을 보낸다. 이때, 포트원 SDK를 사용하여 결제 요청을 처리할 수 있다. PC 환경에서는 이 요청 후 결제 완료 결과를 처리하기 위해 callback 함수를 설정하여 포트원으로부터 결과를 비동기적으로 받는다.

 

3. 포트원은 PG사와 카드사를 통해 결제를 처리하고 결과를 반환

포트원은 PG사(결제대행사)와 카드사를 통해 결제를 처리한 후, 결제 완료 또는 실패 결과를 반환한다. 이때, 클라이언트는 포트원의 결과를 받아서 결제 성공 여부에 따라 후속 처리를 진행한다.

 

4. 클라이언트는 결제 완료 결과를 받고 처리

클라이언트는 포트원으로부터 결제 완료 결과를 받은 후, 그에 따라 결제 성공 또는 실패에 대한 처리를 수행한다. PC 환경에서는 callback 함수에서 결과를 처리하며, 모바일 환경에서는 다른 방식으로 처리할 수 있다.

 

5. 클라이언트는 백엔드에 결제 완료 결과를 전송

결제가 성공적으로 완료되면, 클라이언트는 백엔드로 결제 완료 결과를 전송한다. 이때, 결제 ID, 결제 금액 등 중요한 정보가 포함된 결제 결과 데이터가 함께 전송된다.

 

6. 백엔드는 포트원 서버에 결제 정보를 조회하여 검증

백엔드는 클라이언트로부터 받은 결제 결과를 포트원 서버와 다시 한 번 검증한다. 이 과정에서 결제 ID를 바탕으로 포트원 서버에 결제 상태를 확인하여 데이터의 무결성을 보장한다.

이 단계에서 토큰 발급이 중요한 역할을 한다. 포트원 서버에서 결제 정보를 조회하기 위해서는 먼저 액세스 토큰을 발급받아야 한다. 이 토큰은 API 호출 시 인증 수단으로 사용되며, 내가 구현한 코드에서는 결제를 검증하는 로직에서 발동된다.

public String getPortOneToken() {
    // 포트원 서버로부터 액세스 토큰 발급
    // 토큰 발급 요청 및 응답 처리
    // API 호출 시 토큰을 인증 수단으로 사용
}

 

7. 백엔드는 검증 완료 후 DB에 결제 데이터를 저장

백엔드는 포트원 서버에서 검증이 완료되면 해당 결제 데이터를 데이터베이스(DB)에 저장한다. 이를 통해 결제 관련 기록을 안전하게 보관하며, 이후 관리자가 이를 조회하거나, 결제 정보를 기반으로 후속 처리를 진행할 수 있다.

 

8. 백엔드는 검증 결과를 클라이언트에 전송

백엔드는 결제 검증이 완료된 후, 그 결과를 클라이언트로 다시 전송한다. 클라이언트는 이 결과를 바탕으로 최종 결제 완료 처리를 진행하게 된다.

 

9. 클라이언트는 최종 결제 완료 처리 및 결제 완료 페이지로 이동

최종적으로, 클라이언트는 결제가 성공적으로 완료되었음을 확인한 후, 결제 완료 페이지로 이동한다. 결제 완료 페이지는 사용자가 결제가 성공적으로 이루어졌다는 정보를 확인할 수 있는 중요한 화면이다.

 

▶ 포트원 결제 흐름을 알아가며 느낀 점

백엔드와 클라이언트가 협력하여 결제를 처리하고, 포트원 서버와 상호작용하는 과정을 처음 접했을 때는 너무 복잡하게 느껴졌지만, 차근차근 학습해 나가면서 그 구조를 조금은 이해할 수 있었다. 특히 포트원과 연동할 때의 어려운 부분 중 하나는 토큰 발급 과정으로, 이 토큰은 포트원 서버와의 통신에서 필수적인 역할을 하고, 결제 검증 단계에서 매우 중요한 요소인데 6번에서 발동해야할게 자꾸 맘대로 튀어나와서 그 로직을 수정하는 중이다.테스트도 맘대로 되지 않고 토큰 하나로 며칠을 전쟁 중.. 그리고 보완할 점도 꽤나 많아서 그건 내일 개발일지에 작성해야겠다!