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를 커스터마이징할 수 있어요.
4 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
결제하기 눌렀을때 에러가 발생한게 없는지 확인부탁드립니다.
그런데 지금 보내주신 코드상에 버튼에 이벤트가 없는거 아닌가요?
Vue면 paymentBtn를 @click 메소드로 HTML 코드단에서 받습니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.