flutter "결제위젯" 연동 관련 질문 드립니다.
안녕하세요.
tosspayments_sdk_flutter-0.1.8 사용해서 tosspayments 연동중입니다.
예제코드를 이용하여 테스트 중인데, 일반 신용카드 결제 페이지는 잘 뜹니다.
근데 관리자 페이지에서 UI 를 관리할 수 있는 "결제위젯" 을 연동하려고 하니, 추가 작업이 필요해보이더라구요.
https://docs.tosspayments.com/guides/payment-widget/integration
위 문서 참고해서 html 변경해주고 테스트 해봤는데,
"TossPaymentsError: 결제위젯이 없는 베리언트 키입니다. 상점관리자에서 결제위젯을 생성하세요."
라고 로그가 뜨네요.
클라이언트 key 설정도 제대로 했고, 상점 관리자에서 결제 UI 까지 설정 완료한 상태입니다.
도움 주시면 감사하겠습니다.
결제위젯 연동하기 | 토스페이먼츠 개발자센터
토스페이먼츠 결제위젯 연동 가이드입니다. 내 상점의 주문서 페이지에 최적의 주문서 UI를 연동하세요. 결제 연동하기 가장 편리한 로우코드(Low-code) 솔루션입니다.
29 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
안녕하세요 우선 MID 확인해주시겠어요?
"darino0z1c" 입니다.
html변경은 어떤 부분에서 하셨을까요?
TosspaymentsWebview Class 내부에 html 코드를, 위에 나와있는 문서 참고해서 변경했습니다.
우선 현재 flutter에서 위젯은 전체 웹뷰페이지 위에서만 사용 가능합니다. 이 부분은 문제 없을까요?
네
일단 sdk에서 공식적으로 위젯은 제공하지 않고 있는데요.
html 코드 수정하신 거 통채로 남겨주실 수 있을까요?
<head>
<meta charset="utf-8" />
<!-- 결제위젯 SDK 추가 -->
<script src="https://js.tosspayments.com/v1/payment-widget"></script>
</head>
<body>
<!-- 결제위젯, 이용약관 영역 -->
<div id="payment-method"></div>
<div id="agreement"></div>
<!-- 결제하기 버튼 -->
<button id="payment-button">결제하기</button>
<script>
const clientKey = ""
const customerKey = "K4XIu54Zq5EpVzL8a3D9q" // 내 상점에서 고객을 구분하기 위해 발급한 고객의 고유 ID
const button = document.getElementById("payment-button")
// ------ 결제위젯 초기화 ------
// 비회원 결제에는 customerKey 대신 ANONYMOUS를 사용하세요.
const paymentWidget = PaymentWidget(clientKey, customerKey) // 회원 결제
// const paymentWidget = PaymentWidget(clientKey, PaymentWidget.ANONYMOUS) // 비회원 결제
// ------ 결제위젯 렌더링 ------
// 결제수단 UI를 렌더링할 위치를 지정합니다.
#payment-method와 같은 CSS 선택자와 결제 금액 객체를 추가하세요.
// DOM이 생성된 이후에 렌더링 메서드를 호출하세요.
// https://docs.tosspayments.com/reference/widget-sdk#renderpaymentmethods선택자-결제-금액-옵션
paymentWidget.renderPaymentMethods("#payment-method", { value: 15000 })
// ------ 이용약관 렌더링 ------
// 이용약관 UI를 렌더링할 위치를 지정합니다. #agreement와 같은 CSS 선택자를 추가하세요.
// https://docs.tosspayments.com/reference/widget-sdk#renderagreement선택자
paymentWidget.renderAgreement('#agreement')
// ------ '결제하기' 버튼 누르면 결제창 띄우기 ------
// 더 많은 결제 정보 파라미터는 결제위젯 SDK에서 확인하세요.
// https://docs.tosspayments.com/reference/widget-sdk#requestpayment결제-정보
button.addEventListener("click", function () {
paymentWidget.requestPayment({
orderId: "PnArg53_0HahxDD1ZSSoH", // 주문 ID(직접 만들어주세요)
orderName: "토스 티셔츠 외 2건", // 주문명
successUrl: "https://my-store.com/success", // 결제에 성공하면 이동하는 페이지(직접 만들어주세요)
failUrl: "https://my-store.com/fail", // 결제에 실패하면 이동하는 페이지(직접 만들어주세요)
customerEmail: "customer123@gmail.com",
customerName: "김토스"
})
})
</script>
</body>결제위젯 JavaScript SDK | 토스페이먼츠 개발자센터
결제위젯 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
예제 코드를 그대로 붙여넣었구요, 여기서 client key 만 변경해줬습니다.
그리고
TossPayments 클래스에서 TosspaymentsWebview 를 빌드할 때, 자바스크립트를 바로 실행 시켜주는 코드인
evaluateJavascript(...) 를 주석처리 한 상태입니다.
사용하신 clientKey가
식스샵 클라이언트 키입니다.
위에 남겨주신 mid에 클라이언트키를 사용해주세요
네 위에 적혀있는 클라이언트 키는, 예제 코드에 적혀있는 테스트 키이구요, 따로 제 계정의 테스트 클라이언트 키를 사용했습니다.
여기에 클라이언트 키를 올려도 될까요 ?
💡 정보 제출
아래 버튼을 눌러 외부로 노출되기 민감한 정보를 제출해주세요
Ton#6491
정상적으로 제출되었습니다.
그런데 위에 적혀있는 클라이언트키도.. 귀사 식스샵 mid의 키이긴해요
SS_yugacrlj44'
mid의 key입니다..
결제위젯은 d로 시작하는 mid에 활성화되어있어요
다시한번 확인해보시겠어요 ?
아 .. 그러네요 .. 상점을 여러개 만들어 놓으셨었네요 하하 .. 감사합니다 정상적으로 작동하네요 !
추가로 구현 자체에 대해 몇가지 질문드릴게요
앱자체가 모두 웹뷰위에 모바일웹 띄우는 방식으로 구현하시나요?
아뇨 toss payments 관련 된 화면만 웹뷰로 띄우고 처리할 예정입니다.
우측이 위젯화면인데요
tosspayments관련된 화면만 웹뷰로 띄우실 경우
위젯의 장점이 없어서요! 굳이 위젯을 쓰시려는 사유가 있을까요?
어드민에서 따로 ui 수정이 가능한것으로 알고 있어서, 위젯으로 사용하려고 합니다.
UI를 자주 수정하실게 아니라면, 일반 결제창화면을 사용하시는게 훨씬 간단히 연동하실 수는 있을거에요!
flutter에서 위젯 공식지원이 아직이라 이렇게 안내드리는 점 양해바랍니다.
충분히 비교해보시고 의사결정해주시기 바랍니다~
네 감사합니다 ^^
결제창 사용하시라고 강요드리는 건아니에요~! 말씀하시는 것처럼 위젯 사용하시면 또 여러가지 장점이 있습니다 ㅎㅎ
궁금한점은 편하게 문의 남겨주세요~
넵 !
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
일반 결제창 관련해서 몇 가지 추가 질문 드립니다.
1. 카드 결제 시에 나오는 카드 회사 목록은 따로 수정할 순 없나요 ? 만약 허용하지 않을 카드사가 있는 경우, 편집이 가능한지 궁금합니다.
2. 카카오페이, 네이버페이를 사용하려고 하는데, 목록에 따로 있진 않네요. 아래 문서 참고 했을 땐, 별도로 easyPay 속성 값을 추가해줘서 결제창을 호출해야 되는 것 같은데요.
https://docs.tosspayments.com/guides/payment/integration-direct
"tossPayments와 계약된 결제 수단이 아닙니다" 라고 뜨네요
이 경우엔 방법은 맞지만, 아직 승인을 받지 못한 상태일까요 ?
mid : darino0z1c
카드사 및 간편결제 자체창 바로 열기 | 토스페이먼츠 개발자센터
카드사 및 간편결제 자체창을 연동하는 방법을 알아봅니다.
1. 불가합니다. 허용하지 않는 카드사가 있다면 1544-7772로 연락하셔서 해당 카드사를 제외해 달라고 요청해 주세요.
2. 카카오페이 네이버 페이도 별개로 신청이 필요합니다. 역시 1544-7772를 로 연락주셔서 카카오페이 네이버 페이 사용신청을 위한 절차를 가이드 받으시면 됩니다.
답변 감사합니다 ! 😁