inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

견고한 결제 시스템 구축

토스 개발자센터 들어가서 토스에서 지원하는 키 제공을 안해주네요...

1010

리나

작성한 질문수 77

0

 

처음에 'API 개별 연동키' 값 통해 설정하게 되면

vvv222.png'Error: [4000]: 인증되지 않은 시크릿 키 혹은 클라이언트 키 입니다.'

에러가 발생되어서 영상에 나오는것 처럼

'결제위젯 연동키' 키 값으로 할려고 하는데요.

 

vvvv.png문제는 '전자결제 신청하고 확인할 수 있어요' 라는 문구가 나오네요.

신청하면 되지 않는가 할 수 있는데 사업자 번호도 입력 해야해서.. 어떻게 해야 할지 모르겠네요.

저 같은 사람은 사업자 번호가 있을리가 없고요...ㅠㅜㅠ

 

 어떻게 해야 하면 좋을까요..? 동시에 토스에게도 질문 했습니다...

spring spring-boot dbms/rdbms backend payments

답변 2

0

여정민

안녕하세요~ 질문 남겨주셔서 감사합니다.

 

주말에 열심히 강의 들으시고 계신데 불편하셨을거 같아요.

 

이전에 나왔던 질문이라 답변한 적이 있어서 관련 링크 붙혀둘게요~

 

해당 강좌 수업 노트에도 붙혀놓긴 했었는데, 인프런에서 강의에서 자주 하는 질문 리스트 이런 내용들을 볼 수 있는 페이지가 있으면 좋긴 하겠네요..

 

https://www.inflearn.com/questions/1253630/%ED%86%A0%EC%8A%A4-%ED%8E%98%EC%9D%B4%EB%A8%BC%EC%B8%A0-%EA%B2%B0%EC%A0%9C%EC%9C%84%EC%A0%AF-%EC%97%B0%EB%8F%99-api-%ED%82%A4-%EB%B9%84%ED%99%9C%EC%84%B1%ED%99%94

0

리나

감사합니다 :)

0

민준수

저도 방금 이런 문제가 발생했는데 현재 강의가 토스 위젯 결제를 사용해서 발생하는 에러에요!

아직 전체 강의는 본게 아니라서 뒤에 제대로 동작하지 않을 수는 있는데 토스 위젯 결제가 아니라 단순 페이먼츠만 사용하게 처리하면 문제 없이 될거에요!

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    <link rel="icon" href="https://static.toss.im/icons/png/4x/icon-toss-logo.png" />
    <link th:href="@{/style.css}" rel="stylesheet" type="text/css"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>토스페이먼츠 샘플 프로젝트</title>
    <!-- 결제위젯 SDK 추가 -->
    <script src="https://js.tosspayments.com/v1/payment"></script>
</head>

<body>
<!-- 주문서 영역 -->
<div class="wrapper">
    <div class="box_section" style="padding: 40px 30px 50px 30px; margin-top: 30px; margin-bottom: 50px">
        <!-- 결제 UI -->
        <div id="payment-method"></div>
        <!-- 이용약관 UI -->
        <div id="agreement"></div>
        <!-- 쿠폰 체크박스 -->
        <div style="padding-left: 25px">
            <div class="checkable typography--p">
                <label for="coupon-box" class="checkable__label typography--regular"
                ><input id="coupon-box" class="checkable__input" type="checkbox" aria-checked="true" /><span class="checkable__label-text">5,000원 쿠폰 적용</span></label
                >
            </div>
        </div>
        <!-- 결제하기 버튼 -->
        <div class="result wrapper">
            <button class="button" id="payment-button" style="margin-top: 30px">결제하기</button>
        </div>
    </div>
</div>
<script>
    const button = document.getElementById("payment-button");
    const coupon = document.getElementById("coupon-box");
    const generateRandomString = () => window.btoa(Math.random()).slice(0, 20);

    /*<![CDATA[*/
    const orderId = "[[${orderId}]]"
    const orderName = "[[${orderName}]]"
    var amount = [[${amount}]]
    /*]]>*/

    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",
        });
    });
</script>
</body>
</html>

0

리나

감사합니다 :)

프로그램 아키텍쳐

0

60

1

실습코드 압축해제

0

77

1

confirm 로직에서 amount를 검증하는 부분에서 질문이 있습니다.

0

52

1

Transaction Demo 질문 드립니다.

0

59

1

cdc 방식

0

82

1

seed 키 및 orderId 에 대한 질문

0

64

1

결제 이후 404 Error 발생

0

160

1

테스트 코드 중 isPaymentDone 변환

0

75

1

가상의 Checkout 기능 구현 중 질문

0

183

1

docker Mysql 설정 문의

0

105

1

allOpen 설정이 잘못된 거 같습니다.

0

114

1

recovery 동시성 처리 관련 문의

0

118

1

confluent > skip 이 더이상 안되나봅니다.

0

106

1

강의 클론 코딩한 것 public repo에 올려도 되나요?

0

330

1

멱등키에 request를 넘기는 것

0

256

1

동시성 제어 (optimistic locking) 재시도 부분 질문 드립니다.

0

172

1

결제 복구의 세부 과정을 병렬로 처리한 이유가 궁금합니다

0

222

1

전체적인 헥사고날 아키텍쳐 설명

0

275

1

주문, 결제 로직에 대해서 질문이 있습니다.

0

280

1

주문 번호 생성 방식 관련 질문 있습니다

0

926

1

R2DBC 관련해서 질문 드립니다.

0

586

3

payment 상태 업데이트 변경 메서드를 3개나 두는 이유가 궁금합니다.

0

229

2

'더 견고해지기 위해 남은 작업' 수업자료

0

298

1

혹시 코드 리뷰 신청해도 될까요...?

0

310

1