장바구니를 얼추 끝내고 주문 결제 단계에 도달했다. 그래서 Swagger를 참조해보니
토스 페이먼츠 연동하세연
음... 결제같은거 처음이였다. 그래서 일단 공식문서 밖에 답은없다.
https://docs.tosspayments.com/guides/windows/card
신용·체크카드 결제창 연동하기 | 토스페이먼츠 개발자센터
결제창에서 카드사를 선택하고 카드사 인증을 거쳐 결제할 수 있도록 연동해보세요.
docs.tosspayments.com
이렇게 CDN으로 가져올수도 있고
<head>
<title>결제하기</title>
<script src="https://js.tosspayments.com/v1"></script>
</head>
<body>
<script>
var clientKey = 'test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq'
var tossPayments = TossPayments(clientKey) // 클라이언트 키로 초기화하기
</script>
</body>SDK 패키지를 설치해서 사용할 수 있다. 자세한 내용은 아래 링크로 가자
https://docs.tosspayments.com/reference/js-sdk
일반 결제 JavaScript SDK | 토스페이먼츠 개발자센터
토스페이먼츠 일반 결제 JavaScript SDK 사용을 위한 준비와 메서드 사용법, 결제 실패 및 에러 처리 방법을 알아봅니다.
docs.tosspayments.com
그리고 함수를 만들어서 Required Params를 넣고 호출해주면 된다.참고로 나는 Toss의 Test Client Key 환경변수로 빼서 가져왔었다. 중간에 뭔가 많이 생략이 되었지만 중요한 것은 아님.
구현부 코드만 딱 가져와봤다.
import { loadTossPayments } from '@tosspayments/payment-sdk';
export async function TossPayment(
orderId: string, // 백엔드가 뱉어준 에서 가져온 orderId
total: number, // 제품들 누적합 가격
delivery: number, // 배송비
userName: string, // 유저이름
Toss_Key: string, // 토스 클라이언트 키
payingItems: string[], // 주문한 아이템들 카트 아이디
) {
const tossPayments = await loadTossPayments(Toss_Key);
tossPayments.requestPayment('카드', {
amount: total + delivery,
orderId: orderId,
orderName: '인코스런 주문',
customerName: userName,
successUrl: `http://localhost:3000/orderpage/success?items=${payingItems}`,
failUrl: 'http://localhost:3000/fail',
});
}
/** 결제 페이지 */
TossPayment(
response.id,
prices.total,
prices.delivery,
userName
TOSS_KEY,
payingItems,
);
연동 완성쓰 ... 실제로 되고 돈은 안나가니까 기부니가 좋습니다.
'Project > 인코스런' 카테고리의 다른 글
| 페이지이동에 관해서 ... (0) | 2022.11.15 |
|---|---|
| Pagination 전문가 React-Query... (0) | 2022.10.29 |
| Unable to preventDefault inside passive event listener invocation - 에러 (1) | 2022.10.19 |
| 무한 스크롤 feat. useInfiniteQuery, Observer (0) | 2022.10.12 |
| JWT 토큰 Refresh 하기 feat. Axios (0) | 2022.10.11 |