React Payments 결제(1)

이번에 TossPayments 결제시스템을 구현해봤습니다.

먼저 주요 기능을 간단히 설정하자면

• 단건결제 페이지 (/payment): 한 번의 결제를 처리하는 화면입니다.
• 정기결제 페이지 (/subscription): 구독을 위한 카드 등록 및 첫 결제를 처리하는 화면입니다.
• 결제 승인 API (/api/payments/confirm): 단건결제 시 토스페이먼츠로부터 받은 결제 정보를 최종 승인하는 서버 기능입니다.
• 빌링키 발급 API (/api/billing/issue): 정기결제를 위해 고객의 카드 정보를 암호화된 '빌링키'로 바꾸어 발급받는 서버 기능입니다.
• 자동결제 API (/api/billing/pay): 발급된 빌링키를 이용해 주기적으로 자동으로 결제를 실행하는 서버 기능입니다.
• 성공/실패 페이지들: 결제 또는 카드 등록의 성공/실패 여부를 사용자에게 보여주는 화면들입니다.

바로 결제시스템을 만들어보겠습니다

토스페이먼츠 개발자센터에 들어가시면

이렇게 키들을 발급을 받습니다. 그리고 나서 MCP라는거를 연결 시켜줘야 합니다.

https://docs.tosspayments.com/guides/v2/get-started/llms-guide#cursor

동그라미친 여기를 클릭하시면 바로 cursor 에디터 화면들 뜰겁니다.

여기서 install 부분을 클릭 설치합니다.

여기 mcp가 연결된걸 확인하면 바로 cursor Agent에다 

토스페이먼츠 mcp 이용해서 결제부분 개발해달라고한다 ㅎㅎ

여기서 처음부분에 사진올린 클라이언트키, 시크릿키를 같이 올려줍니다 그러고 명령어로 해주면 이렇게 바로 완성을 시켜줍니다.

그러면 위 사진에 보이는 3. 구현된 페이지에서 /payment 단건결제 페이지로 들어갑니다!

이화면이 뜹니다 여기서 카드 결제를 클릭하게되면

여러 결제목록이 뜨는데 여기서 카카오페이로 결제 해보겠습니다.

 

이렇게 완료가 성공적으로 뜨는게 보입니다.!!

여기보면 결제내역을 보실수있는데 정말 많이 테스트를 한게 보이죠?? ㅎㅎㅎ,,,,

블로그에서는 성공적인 부분만 올리는데 개발하면서 에러나고 수정 엄청합니다 . 

결제됐다고 떴는데 데이터베이스보면 저장이 안되어있고 아니면 웹에서 에러가 나있고 등등 이러한것들은 해결하고나면 그때 완성본을 올립니다.

다음에는 에러부분 해결하는법도 올려보겟습니다/

아무튼 다시 돌아와서

여기 데이터베이스에 저장된게 보입니다.

 

여기 메일에도 결제완료가 되었다고 오네요 ㅎㅎ

손코딩으로하다 AI가 나오고나서부터 정말 많이 편리해졌습니다 저만에 컨텐츠로 늘려가고, 제 프로젝트에 수익화를 정말로 시켜봐야겠네요

다음번에 이어서 정기결제를 보여드리겠습니다.