토스 개발자센터 들어가서 토스에서 지원하는 키 제공을 안해주네요...
저도 방금 이런 문제가 발생했는데 현재 강의가 토스 위젯 결제를 사용해서 발생하는 에러에요! 아직 전체 강의는 본게 아니라서 뒤에 제대로 동작하지 않을 수는 있는데 토스 위젯 결제가 아니라 단순 페이먼츠만 사용하게 처리하면 문제 없이 될거에요! 토스페이먼츠 샘플 프로젝트 5,000원 쿠폰 적용 결제하기 const button = document.getElementById("payment-button"); const coupon = document.getElementById("coupon-box"); const generateRandomString = () => window.btoa(Math.random()).slice(0, 20); /**/ console.log("orderId: " + orderId) console.log("orderName: " + orderName) console.log("amount: " + amount) // ------ 결제위젯 초기화 ------ // TODO: clientKey는 개발자센터의 결제위젯 연동 키 > 클라이언트 키로 바꾸세요. // TODO: 구매자의 고유 아이디를 불러와서 customerKey로 설정하세요. 이메일・전화번호와 같이 유추가 가능한 값은 안전하지 않습니다. // @docs https://docs.tosspayments.com/reference/widget-sdk#sdk-설치-및-초기화 const clientKey = ""; const customerKey = generateRandomString(); const paymentWidget = TossPayments(clientKey, customerKey); // 회원 결제 // const paymentWidget = PaymentWidget(clientKey, PaymentWidget.ANONYMOUS); // 비회원 결제 // ------ 결제 UI 렌더링 ------ // @docs https://docs.tosspayments.com/reference/widget-sdk#renderpaymentmethods선택자-결제-금액-옵션 // ------ 결제 금액 업데이트 ------ // @docs https://docs.tosspayments.com/reference/widget-sdk#updateamount결제-금액 coupon.addEventListener("change", function () { if (coupon.checked) { paymentMethodWidget.updateAmount(amount - 5000); } else { paymentMethodWidget.updateAmount(amount); } }); // ------ '결제하기' 버튼 누르면 결제창 띄우기 ------ // @docs https://docs.tosspayments.com/reference/widget-sdk#requestpayment결제-정보 button.addEventListener("click", function () { // 결제를 요청하기 전에 orderId, amount를 서버에 저장하세요. // 결제 과정에서 악의적으로 결제 금액이 바뀌는 것을 확인하는 용도입니다. paymentWidget.requestPayment('카드', { amount: amount, orderId: orderId, orderName: orderName, successUrl: window.location.origin + "/success", failUrl: window.location.origin + "/fail", customerEmail: "customer123@gmail.com", customerName: "김토스", customerMobilePhone: "01012341234", }); });