React 토스페이먼츠 카드 전표 출력하기

토스 페이먼츠를 사용하여 결제 시스템을 구현한 웹 사이트를 유지보수하던 중.

 

카드 전표(영수증)를 뽑을 수 있냐는 담당자의 문의 전화가 왔음.

 

토스 페이먼츠 개발자 센터를 찾아보니 되는 것 같음.

 

※주의 이 글은 토스 페이먼츠 결제시스템이 구현된 상태에서 진행해야 함.

 

토스페이먼츠 카드 결제 로직

 

위 로직대로 사용자가 결제를 완료하여,

설정한 결제성공 리다이렉트 URL에서 결제 정보를 Payment 테이블에 저장을 함.

 

 

//토스페이먼츠에서 받아오는 결제정보
"card": {
    "company": "농협",
    "number": "12345678****789*",
    "installmentPlanMonths": 0,
    "isInterestFree": false,
    "interestPayer": null,
    "approveNo": "00000000",
    "useCardPoint": false,
    "cardType": "신용",
    "ownerType": "개인",
    "acquireStatus": "READY",
    "receiptUrl": "https://dashboard.tosspayments.com/sales-slip?transactionId=KAgfjGxIqVVXDxOiSW1wUnRWBS1dszn3DKcuhpm7mQlKP0iOdgPCKmwEdYglIHX&ref=PX",
    "amount": 15000
},

 

이와 같은 결제정보에서 "receiptUrl" 정보가 카드 전표를 출력할 수 있는 URL임.

 

그래서 이 객체를 Payment 테이블에 같이 저장해야 함.

 

필자는 처음에는 없던 칼럼이라 Payment 도메인에 receiptUrl 칼럼 추가 후 정보를 받아와서 추가함.

 

//필자의 결제 코드(꼭 같을 필요 없음)
PaymentService.tossPaymentApproval(paymentKey, secretKey, data)	//paymentKey와 secretKey를 토스페이먼츠로 전달
    .then(tossResponse => {
        if (tossResponse.status === 200 && tossResponse.data) {
            tossResponse.data.rent = rentResponse.data;
            //카드결제 승인 후 받아오는 결제정보를 tossResponse.data에 세팅            
            tossResponse.data.receiptUrl =
                tossResponse.data.card.receiptUrl; //카드 전표 출력 url

            PaymentService.insertPayment(	//payment 테이블에 insert
                tossResponse.data,	//위에서 세팅한 tossResponse.data를 전달
                rentId	//예약ID
            ).then(payResponse => {
                if (payResponse.data.id) {
                    //결제 성공 및 실패 alert 처리
                }
            });
        }
})

사용자가 카드로 결제를 완료하면 payment 테이블의 receiptUrl 컬럼에 

 

test db 데이터

이렇게 값이 들어감.

 

이제 버튼을 만들어서 링크만 달아주면 됨!!

 

//react view단 코드
//payment(결제) 정보를 먼저 payment 상태 변수에 저장

{payment ? ( //결제 정보가 있으면 버튼을 출력해 줌.
    <li>
        <Link
            to="#"
            onClick={e => {
                e.preventDefault();
                cardPrint();
            }}
        >
            <span>카드전표출력</span>
        </Link>
    </li>
) : null}

 

//카드전표출력 버튼을 클릭했을 때 함수
const cardPrint = () => {	
    window.open(payment.receiptUrl, "_blank");		//간단하게 해당 url을 새창에서 열어주면 됨.
};

 

카드전표출력 버튼을 클릭하면 !!

 

영수증 화면 예시

 

이런 식으로 출력이 되는 것을 볼 수 있음! 프린트도 가능하다는 점!

 

설명 끝.

 

오늘 하루도 평범한 하루 되길.

 

 

 

📢참조

 

https://docs.tosspayments.com/guides/windows/card

신용·체크카드 결제창 연동하기 | 토스페이먼츠 개발자센터