[TIL] 내일배움캠프 75일차 - 리액트, 스프링 결제 기능

 

 

오늘의 학습 키워드📚

아이앰포트

아이앰포트에서 결제 관련 API, 라이브러리, 모듈을 제공해준다.

https://portone.io/korea/ko?utm_source=google&utm_medium=google_sa&utm_campaign=pf_conversion_2403_kr&utm_content=homepage&gad_source=1&gclid=CjwKCAjwoPOwBhAeEiwAJuXRh_jttiDjJ_JdfAh_RUobtxOnIxwgKOLxitkJGT1HSZNB0NcgF9UjHBoC-1cQAvD_BwE

포트원 | 온라인 비즈니스 성장을 돕는 기업

위 사이트로 가서 시작하기를 누르고 회원가입을 하면 된다.

이후 결제 연동에 들어가서 채널 추가 버튼을 누른다. 

우선 테스트를 진행할 것이기 때문에 테스트를 선택하고 원하는 결제 대행사를 고르고 다음을 누른다.

일반 결제로 선택하고 이름은 자유롭게 작성해도 된다.
작성을 완료하면 결제 방식이 하나 추가된 것이다. 이제 식별 코드, API Key, API Secret을 통해 해당 채널에 접근할 수 있다.
해당 값들은 절대 유출되면 안 되니 Git에 올리거나 코드에 직접 적는 일이 없도록 하자.

리액트, 스프링에 결제 기능 연동

https://github.com/iamport/iamport-react-example/blob/master/manuals/PAYMENT.md

iamport-react-example/manuals/PAYMENT.md at master · iamport/iamport-react-example

위의 아이앰포트 예제 깃허브를 참고했다.

[의존성 추가]

dependencies {
	// ...
    // I AM PORT
    implementation 'com.github.iamport:iamport-rest-client-java:0.2.21'
}

// I AM PORT
allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

[index.html에 스크립트 추가]

    <!-- 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.1.8.js"></script>

[JavaScript 추가]

import axios from 'axios';

const pg = {
    kakao: 'kakaopay'
}

const pay_method = {
    card: 'card'
}

export const requestPay = async ({user ,salePost, count}) => {
    const {IMP} = window;
    IMP.init(`${process.env.REACT_APP_IMP}`); // 가맹점 식별 코드

    IMP.request_pay({
        pg: pg.kakao,						// PG사
        pay_method: pay_method.card,		// 결제 방법
        merchant_uid: new Date().getTime(),	// 주문 번호
        name: salePost.goods,				// 주문명
        amount: salePost.price * count,		// 가격
        buyer_email: user.email,			// 주문자 이메일
        buyer_name: user.userName,			// 주문자 이름
        // ... 이외 여러 정보(주소, 우편번호, 전화 번호 등)
    }, async (rsp) => {						// 콜백 함수를 정의하는 방법도 있다.
        try {
            const {data} = await axios.post(
                'http://localhost:8080/verify-iamport/' + rsp.imp_uid);
            if (rsp.paid_amount === data.response.amount) {
                alert('결제 성공');
            } else {
                alert('결제 실패');
            }
        } catch (error) {
            console.error('Error while verifying payment:', error);
            alert('결제 실패');
        }
    });
};

https://developers.portone.io/docs/ko/sdk/javascript-sdk/payrq?v=v1

결제요청 파라미터

결제 요청 시 필요한 파라미터는 공식 문서를 참고하면 된다.

.env 파일과 application.properties 파일에 관련 key 등에 대한 정보를 적어 직접 값을 사용하기보단 공개되지 않게 하여 사용하는 것이 중요하다.
IMP
나는 아까 카카오로 채널을 생성했으니 PG사에 kakaopay를 입력하고 전달 받은 유저와 상품의 값들을 입력해 결제 창을 띄우고 요청하는 코드이다.
'구매하기' 버튼을 누르면 카카오 페이 결제 화면이 뜨는 구조이다.

[Controller]

@RestController
public class PaymentController {

    @Value("${iamport.key}")		// REST API Key
    private String restApiKey;
    @Value("${iamport.secret}")		// REST API Secret
    private String restApiSecret;

    private IamportClient iamportClient;

    @PostConstruct
    public void init() {
        this.iamportClient = new IamportClient(restApiKey, restApiSecret);
    }

    @PostMapping("/verify-iamport/{imp_uid}")
    public IamportResponse<Payment> paymentByImpUid(@PathVariable("imp_uid") String imp_uid) throws IamportResponseException, IOException {
        return iamportClient.paymentByImpUid(imp_uid);
    }
}

구현 화면

수량을 입력하고 구매하기 버튼을 클릭하면 결제 화면이 출력된다.

결제가 완료되면 결제 완료 로직이 실행된다.

주문 명과 가격이 잘 뜨는 모습이다.

---

오늘의 회고💬

최종 프로젝트 중간 발표를 진행했는데 잘한 건지 부족한 건지는 잘 모르겠지만 그래도 나름? 괜찮았다고 생각한다. 대용량 트래픽 처리라던가 통계 관리 등 백엔드적인 기능이 좀 더 추가돼야 할 것 같다.

 

내일의 계획📜

결제가 실패하는 여러 상황에 대한 예외 처리 로직을 적용해야 할 것 같은데 아직 방법을 잘 모르겠어서 많이 고민하게 될 것 같다.