ํ ์ค ๊ฐ๋ฐ์์ผํฐ ๋ค์ด๊ฐ์ ํ ์ค์์ ์ง์ํ๋ ํค ์ ๊ณต์ ์ํด์ฃผ๋ค์...
์ ๋ ๋ฐฉ๊ธ ์ด๋ฐ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋๋ฐ ํ์ฌ ๊ฐ์๊ฐ ํ ์ค ์์ ฏ ๊ฒฐ์ ๋ฅผ ์ฌ์ฉํด์ ๋ฐ์ํ๋ ์๋ฌ์์! ์์ง ์ ์ฒด ๊ฐ์๋ ๋ณธ๊ฒ ์๋๋ผ์ ๋ค์ ์ ๋๋ก ๋์ํ์ง ์์ ์๋ ์๋๋ฐ ํ ์ค ์์ ฏ ๊ฒฐ์ ๊ฐ ์๋๋ผ ๋จ์ ํ์ด๋จผ์ธ ๋ง ์ฌ์ฉํ๊ฒ ์ฒ๋ฆฌํ๋ฉด ๋ฌธ์ ์์ด ๋ ๊ฑฐ์์! ํ ์คํ์ด๋จผ์ธ ์ํ ํ๋ก์ ํธ 5,000์ ์ฟ ํฐ ์ ์ฉ ๊ฒฐ์ ํ๊ธฐ const button = document.getElementById("payment-button"); const coupon = document.getElementById("coupon-box"); const generateRandomString = () => window.btoa(Math.random()).slice(0, 20); /**/ 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", }); });