15 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
안녕하세요
개발자이신가요?
개발자가 아닙니다!
디자이너라 코드에 약합니다...
토스페이먼츠
YouTube
[공식] 토스페이먼츠 결제 5분 만에 연동하기
이 영상은 온라인 주문서 페이지에 토스페이먼츠 결제위젯을 연동하는 과정을 설명해요.
결제위젯은 토스페이먼츠에서 수많은 상점을 분석하여 만든 최적의 주문서 UI입니다. 개발자가 최초 1회만 연동하면 결제수단 추가, 디자인 수정은 코드 없이 상점관리자만으로 가능해요.
📌 가이드 문서
결제위젯 연동하기 https://docs.tosspayments.com/guides/payment-widget/integration
결제 요청, 인증, 승인… 이게 다 뭔가요? https://blog.tossbusiness.com/articles/paytech-3
📌 기술지원
디스코드 https://discord.com/invite/...
위 링크 보면서 따라해보시면 도움이 될 것 같아요
<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 = "test_ck_Gv6LjeKD8aEbgkknwpL8wYxAdXy1"
const customerKey = "test_sk_0RnYX2w532BwLK12jak3NeyqApQE" // 내 상점에서 고객을 구분하기 위해 발급한 고객의 고유 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 },
{ variantKey: "DEFAULT" } // 렌더링하고 싶은 결제 UI의 variantKey
)
// ------ 이용약관 렌더링 ------
// 이용약관 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: "chEV7uEVfKd54ldun-4ix", // 주문 ID(직접 만들어주세요)
orderName: "토스 티셔츠 외 2건",결제위젯 JavaScript SDK | 토스페이먼츠 개발자센터
결제위젯 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
// 주문명
successUrl: "https://my-store.com/success", // 결제에 성공하면 이동하는 페이지(직접 만들어주세요)
failUrl: "https://my-store.com/fail", // 결제에 실패하면 이동하는 페이지(직접 만들어주세요)
customerEmail: "customer123@gmail.com",
customerName: "김토스"
})
})
</script>
</body>
바디 부분에 이렇게 등록을 해놨는데
이렇게 뭔가 이상하게 나옵니다...
head 태그에 들어가야 하는것은 head 쪽에 넣으셔야 할것 같아요
HTML 코드를 보면 head 로 명시된 태그 부분이 있습니다.
HTML, JavaScript, CSS 를 이해하시고 보시면 도움이 많이 되실것 같습니다.
지금 웹서버를 올려서 하시는 것이 아니고, 다른 툴 이용해서 진행 하시는 것 같아서 더 가이드 드리기에 제한이 많이 있네요
감사합니다 말씀해주신대로 진행을 했는데도 버튼이 아래있네요
코드상에서 수정할 수 있는 게 있을까요?
토스팀에서 프레이머와 관련하여 지원해주실 수 있는 분은 없을까요?
@futureflowtest 현재 질문주시는 내용은 프레이머를 떠나 html/css 의 기본적인 부분입니다.
현재 채널은 토스페이먼츠 결제 연동 관련 질문을 남겨주시는 곳이라 채널 목적에 부합하지 않는 부분에 있습니다.
아마 #💬┃수다방 에 남겨주시면 참여해주신 개발자분들이 조언 주실 수 있을 것 같아요.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.