퓨처플로우 테스트 Comments - Toss payments 개발자 커뮤니티

// 주문명 successUrl: "https://my-store.com/success", // 결제에 성공하면 이동하는 페이지(직접 만들어주세요) failUrl: "https://my-store.com/fail", // 결제에 실패하면 이동하는 페이지(직접 만들어주세요) customerEmail: "customer123@gmail.com", customerName: "김토스" }) }) </script> </body>

21 replies

TPToss payments 개발자 커뮤니티

•Created by 퓨처플로우 테스트 on 9/21/2023 in #❓┃연동개발-문의

결제 위젯 테스트 화면이 깨집니다.

<head> <meta charset="utf-8" />  <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건",

21 replies

TPToss payments 개발자 커뮤니티

•Created by 퓨처플로우 테스트 on 9/21/2023 in #❓┃연동개발-문의

결제 위젯 테스트 화면이 깨집니다.