준

Toss payments 개발자 커뮤니티•7mo ago•

4 replies

준섭

vue

결제하기 버튼을 누르면 아무 반응이 없습니다. VUE 로 개발중이고..

const amount = {
currency: "KRW",
value: 50_000,
}
const main = async () => {
const tossPayments = await loadTossPayments(
"test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm"
)
const widgets = tossPayments.widgets({
customerKey: ANONYMOUS,
})

/
* 위젯의 결제금액을 결제하려는 금액으로 초기화하세요.
* renderPaymentMethods, renderAgreement, requestPayment 보다 반드시 선행되어야 합니다.
* @docs https://docs.tosspayments.com/sdk/v2/js#widgetssetamount
*/
await widgets.setAmount(amount)

await Promise.all([
/
* 결제창을 렌더링합니다.
* @docs https://docs.tosspayments.com/sdk/v2/js#widgetsrenderpaymentmethods
*/
widgets.renderPaymentMethods({
selector: "#payment-method",
// 렌더링하고 싶은 결제 UI의 variantKey
// 결제 수단 및 스타일이 다른 멀티 UI를 직접 만들고 싶다면 계약이 필요해요.
// @docs https://docs.tosspayments.com/guides/v2/payment-widget/admin#새로운-결제-ui-추가하기
variantKey: "DEFAULT",
}),
/**
* 약관을 렌더링합니다.
* @docs https://docs.tosspayments.com/reference/widget-sdk#renderagreement선택자-옵션
*/
widgets.renderAgreement({
selector: "#agreement",
variantKey: "AGREEMENT",
}),
])

const button = document.getElementById("payment-button")

// button.addEventListener("click", async () => {})
}

const paymentBtn = async () => {
try {
await widgets.requestPayment({
orderId: generateRandomString(),
orderName: "토스 티셔츠 외 2건",
successUrl: window.location.origin + "/sandbox/success",
failUrl: window.location.origin + "/sandbox/fail",
customerEmail: "customer123@gmail.com",
customerName: "김토스",
customerMobilePhone: "01012341234",
})
} catch (err) {
// TODO: 에러 처리
}
}

onMounted(() => {
main()
console.log("props.orderData :: ", props.orderData)
})

소스는 위와 같습니다.

결제위젯 JavaScript SDK(Version 1) | 토스페이먼츠 개발...

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

토스페이먼츠 JavaScript SDK | 토스페이먼츠 개발자센터

토스페이먼츠 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.

결제위젯 어드민 설정하기 | 토스페이먼츠 개발자...

토스페이먼츠와 전자결제 계약을 완료했으면 결제위젯 어드민에서 결제 UI를 커스터마이징할 수 있어요.