Ayaan이안•3y ago

결제위젯 문의

안녕하세요, 이번에 저희 팀에서 결제위젯을 사용해 보고자 하는 아이디어가 생겨 사업팀에 검토요청을 할 예정입니다. 이 과정에서 결제 프로세스를 시연해야 할 것 같은데, 샘플 소스코드가 제공되는지 여쭤봅니다. 깃허브에는 샘플 소스코드가 없어서요.

45 Replies

토스페이먼츠 BOT•3y ago

⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다

오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.

- 주문번호(orderId) : - 문의 내용 :

(img를 함께 첨부해주시면 도움이됩니다)

* 계약관련 내용은 1544-7772로 문의주세요. * 주말/공휴일에는 답변이 늦을 수 있어요.

이실장•3y ago

현재 결제위젯은 별도의 샘플소스가 제공되지는 않습니다~ 다만 금방 연동해보실 수 있을거에요! 결제위젯 사용신청은 하셨을까요?

Ayaan이안OP•3y ago

아직 못했습니다. mid가 import쪽꺼라서요.. 사업팀에서 검토되면 MID 전환신청을 할 생각이었습니다.

이실장•3y ago

docs에 공개된 키로 간단하게 테스트 하실 수 있습니다. 아래 코드 그대로 브라우저에 띄워보시면 될 것 같아요~

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charSet="utf-8"/>
    <title>결제하기</title>
    <script src="https://js.tosspayments.com/v1/payment-widget"></script>
</head>
<body>
    <script>
        const clientKey = 'test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq';
        const customerKey = 'C9uVJW6NMRMj'; 
        const paymentWidget = PaymentWidget(clientKey, customerKey); // 회원 결제
    </script>
    <div id="payment-method"></div>
    <script>
        paymentWidget.renderPaymentMethods('#payment-method', 15000);
        paymentWidget.requestPayment({
            orderId: 'AD8aZDpbzXs4EQa-UkIX6',
            orderName: '토스 티셔츠 외 2건',
            successUrl: 'http://localhost:8080/success',
            failUrl: 'http://localhost:8080/fail',
            customerEmail: 'customer@tosspayments.com', 
            customerName: '김토스'
        })  
    </script>
</body>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charSet="utf-8"/>
    <title>결제하기</title>
    <script src="https://js.tosspayments.com/v1/payment-widget"></script>
</head>
<body>
    <script>
        const clientKey = 'test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq';
        const customerKey = 'C9uVJW6NMRMj'; 
        const paymentWidget = PaymentWidget(clientKey, customerKey); // 회원 결제
    </script>
    <div id="payment-method"></div>
    <script>
        paymentWidget.renderPaymentMethods('#payment-method', 15000);
        paymentWidget.requestPayment({
            orderId: 'AD8aZDpbzXs4EQa-UkIX6',
            orderName: '토스 티셔츠 외 2건',
            successUrl: 'http://localhost:8080/success',
            failUrl: 'http://localhost:8080/fail',
            customerEmail: 'customer@tosspayments.com', 
            customerName: '김토스'
        })  
    </script>
</body>

대시보드까지 확인해보려면, 추후 사용신청 후 확인해주세요~

Ayaan이안OP•3y ago

감사합니다. 단순히 프로세스를 확인하기 위함이라 저정도도 괜찮을거 같습니다.

토스페이먼츠 BOT•3y ago

❤️ 기술문의 경험이 어떠셨나요?!

간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.

Ayaan이안OP•3y ago

남겨주신 내용으로 테스트 페이지를 급하게 구축하여 테스트 중인데요. 토스페이의 경우 상단에 닫기 버튼이 안나오고 국민카드는 KBPay 결제만 보여집니다. 일반결제 등은 불가능한건가요 ?

Ayaan이안OP•3y ago

No description

이실장•3y ago

국민카드는 해당 테스트계정이 그렇게 설정되어 있어 그런 것 같습니다

이실장•3y ago

No description

이실장•3y ago

토스페이는 말씀해주신게 맞네요~ 확인해보겠습니다

Ayaan이안OP•3y ago

감사합니다 .남겨주신 key말고는 테스트할 수 있는 key가 없을까요 ?

이실장•3y ago

docs에 나와있는 key외에는 별도로 전달해드리기 어렵습니다~

Ayaan이안OP•3y ago

일반 결제 데모에 있는 키와 결제위젯 docs에 있는 키가 다르던데, 일반 결제 데모에 있는 키로는 테스트가 안되는거죠?

이실장•3y ago

한번 교체해보시면 될 것 같아요!

Ayaan이안OP•3y ago

감사합니다.

Ayaan이안OP•3y ago

확인해 주실 때, 토스페이 말고 ISP 인증서 계열 결제 시에 아래와 같은 문제가 있어 같이 확인해 주시면 감사드리겠습니다. 1. 로딩과 설치화면에서 iframe이 뒤에서 쌓이는 것 처럼 보이는 문제 2. 닫기 버튼 부재

No description

Ayaan이안OP•3y ago

위 이미지에 두가지 문제가 같이 보여 하나만 올려드렸습니다. 상단에 . . . .처럼 생긴게 iframe으로 보입니다. 또한 밑에 결제창에 토스페이처럼 X버튼이 없습니다.

Ayaan이안OP•3y ago

몇분 지나니 상단에 이만큼 쌓이네요.

Ayaan이안OP•3y ago

국민카드는 현재 10000원 이상의 경우 KBPay 할인 이벤트를 진행중인데 10000원 이상으로 설정할 경우 기본으로 할인이 적용되나봅니다. 그래서 KBPay만 보이는 것으로 확인되었고 1000원같이 낮은 금액으로 세팅하니 정상 호출됩니다. 가능하시다면 내부적으로 검토하셔서 체크박스라도 만들어 주시는게 좋을거 같습니다.

이실장•3y ago

이건 BC카드 호출하신거죠? mac - 크롬 환경인가요?

Ayaan이안OP•3y ago

BC카드에서는 인증서 결제로 들어가면 발생하고 국민카드 ISP 인증서 결제나 카카오페이 등등 ISP 인증서 형태가 모두 동일해 보입니다.

Ayaan이안OP•3y ago

개발자 도구에서 보니 실제로 쌓이는게 맞아 보입니다.

No description

Ayaan이안OP•3y ago

Windows - Edge 환경입니다. Mac에서는 ISP 일반결제가 지원하지 않는다며 아예 저 화면이 뜨질 않습니다. ;;

이실장•3y ago

네네 말씀해주신 부분이 맞네요

Ayaan이안OP•3y ago

아마도 ISP 모듈이 설치되었는지 체크하는 로직에 문제가 있는거 같습니다. iframe을 계속 생성하네요 #isp_div > iframe으로 생성되어야 하는거 같은데 isp_div이 계속 생기면서 JS 내부에서 element가 꼬여 isp_div랑 iframe이 따로 노는거 같아요.

Ayaan이안OP•3y ago

iframe이 생성될때 isp_div도 같이 생성되고 iframe이 쌓이는건 첫번쨰 isp_div입니다.

No description

이실장•3y ago

설치가 아예 안되시나요₩?

Ayaan이안OP•3y ago

설치가 되기는 하는데 다음 화면이 렌더가 안됩니다

이실장•3y ago

https://service.vp.co.kr/html/vpt_ispOpenWeb.html

브이피(주) 고객센터

브이피(주) 상품서비스를 이용하시는 고객을 위해 다양한 서비스를 제공합니다.

이실장•3y ago

여기서도 동일 현상이 발생하시나요?

Ayaan이안OP•3y ago

한글 깨짐 이외에는 문제가 보이지 않습니다. 외산 윈도우라 그런지 한글은 깨지네요

이실장•3y ago

일단 문의주신부분은 재현은 안되는데 확인해보겠습니다~

이실장•3y ago

더불어 약관 랜더링은 별도로 해줘야하니 참고해주세요 https://docs.tosspayments.com/reference/widget-sdk#renderagreement%EC%84%A0%ED%83%9D%EC%9E%90

결제위젯 JavaScript SDK | 토스페이먼츠 개발자센터

결제위젯 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.

Ayaan이안OP•3y ago

네 이미 진행하고 있습니다~ 기본값이 체크됨인거 같아요. 설치되지 않은 PC에서 접속하면 재현됩니다. 혹시 제 테스트 서버 정보가 필요하시면 보내드릴 수 있습니다..

이실장•3y ago

괜찮으시면 영상으로 한번 제보해주실 수 있을까요? 콘솔창까지요

Ayaan이안OP•3y ago

영상은 현재 저희쪽 서버 DDOS 이슈가 방금 와서, 해결되는 데로 녹화 후 보내드리겠습니다.

토스페이먼츠 BOT•3y ago

토스페이먼츠 결제연동팀

techsupport@tosspayments.com

Ayaan이안OP•3y ago

techsupport@tosspayments.com 으로 보내드리면 되죠? 네 감사합니다

이실장•3y ago

항상 감사드려요~ url은 지워주셔도 됩니다

Ayaan이안OP•3y ago

확인했습니다! 감사합니다.

Ayaan이안OP•3y ago

Ayaan이안OP•3y ago

먼저 올려드립니다. 필요할 경우 메일로도 제보해 드리겠습니다. 설치의 경우 한글꺠짐과 같이 로캘문제로 보이는 다른 이슈로 설치가 제대로 안되어서 영상엔 포함되지 않았습니다. 로캘이슈는 ISP에 노운 이슈로 존재한다고 알 고 있어 제보할 필요가 없어보였습니다.

이실장•3y ago

@Ayaan_ 토스페이 닫기버튼 없는 이슈는 해결되었습니다.

Ayaan이안OP•3y ago

빠른 확인 감사드립니다!

Toss payments 개발자 커뮤니티 질문하러가기

Toss payments 개발자 커뮤니티입니다. 결제 연동하며 겪는 기술 문의부터, 결제 시장에 대한 다양한 정보까지 얻어가세요~

12KMembers

View on Discord

Did you find this page helpful?