buildup•2y ago

테스트환경에서 결제위젯을 띄웠는데 카드결제가 나와요

안녕하세요. 테스트환경에서 결제위젯을 띄웠는데 카드결제 화면이 나오는데요, 브라우저 캐시를 지워봐도 동일한 문제가 생기는데 혹시 상점쪽에서 별도로 설정을 해줘야 할까요?

8 Replies

토스페이먼츠 BOT•2y ago

⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다

오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.

- 주문번호(orderId) : - 문의 내용 :

(img를 함께 첨부해주시면 도움이됩니다)

* 계약관련 내용은 1544-7772로 문의주세요. * 주말/공휴일에는 답변이 늦을 수 있어요.

이실장•2y ago

render와 request부분 스크립트 공유해주실 수 있나요?

buildupOP•2y ago

넵 잠시만요 vue를 사용하고 있고 전체코드는 아래와 같습니다 <template lang=""> <div id="payment-method"></div> <div id="agreement"></div></template><script>import {loadPaymentWidget, ANONYMOUS} from '@tosspayments/payment-widget-sdk';import axios from "axios"const clientKey = 'test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq'export default { async mounted() { this.getPayment().then((response) => { const paymentId = this.$route.query.paymentId; if (response.data.responseCode == "200") { this.showTossPayments(response.data.responseData) } else if (response.data.responseCode == "614") { window.location.replace("/payment/failed?code=NOT_FOUND_PAYMENT&message=결제정보를%20찾을수%20없습니다&orderId=" + paymentId) } else { window.location.replace("/payment/failed?code=LOAD_MODULE_FAILED&message=토스페이먼츠%20로딩에%20실패했습니다&orderId=") + paymentId } }) await this.showTossPayments() }, methods: { async getPayment() { return axios.get("/api/v1/payment/" + this.$route.query.paymentId) }, async showTossPayments(payment) { const paymentWidget = await loadPaymentWidget(clientKey, ANONYMOUS) console.log(payment.amount) paymentWidget.renderPaymentMethods("#payment-method", payment.amount); paymentWidget.renderAgreement('#agreement') paymentWidget.requestPayment({ orderId: payment.id, orderName: payment.orderName, successUrl: 'http://localhost/payment/succeded', failUrl: 'http://localhost/payment/failed', }).catch(() => { window.location.replace("/payment/failed?code=LOAD_MODULE_FAILED&message=토스페이먼츠%20로딩에%20실패했습니다&orderId=") + payment.id }) } },}</script> 아이고 이쁘게 안나오네요..

이실장•2y ago

<template lang="">  <div id="payment-method"></div>  <div id="agreement"></div></template><script>import {loadPaymentWidget, ANONYMOUS} from '@tosspayments/payment-widget-sdk';import axios from "axios"const clientKey = 'test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq'export default {  async mounted() {    this.getPayment().then((response) => {      const paymentId = this.$route.query.paymentId;      if (response.data.responseCode == "200") {          this.showTossPayments(response.data.responseData)        } else if (response.data.responseCode == "614") {          window.location.replace("/payment/failed?code=NOT_FOUND_PAYMENT&message=결제정보를%20찾을수%20없습니다&orderId=" + paymentId)        } else {          window.location.replace("/payment/failed?code=LOAD_MODULE_FAILED&message=토스페이먼츠%20로딩에%20실패했습니다&orderId=") + paymentId        }    })    await this.showTossPayments()  },  methods: {    async getPayment() {      return axios.get("/api/v1/payment/" + this.$route.query.paymentId)    },    async showTossPayments(payment) {      const paymentWidget = await loadPaymentWidget(clientKey, ANONYMOUS)      console.log(payment.amount)      paymentWidget.renderPaymentMethods("#payment-method", payment.amount);      paymentWidget.renderAgreement('#agreement')      paymentWidget.requestPayment({          orderId: payment.id,          orderName: payment.orderName,          successUrl: 'http://localhost/payment/succeded',          failUrl: 'http://localhost/payment/failed',        }).catch(() => {          window.location.replace("/payment/failed?code=LOAD_MODULE_FAILED&message=토스페이먼츠%20로딩에%20실패했습니다&orderId=") + payment.id        })    }  },}</script>

<template lang="">  <div id="payment-method"></div>  <div id="agreement"></div></template><script>import {loadPaymentWidget, ANONYMOUS} from '@tosspayments/payment-widget-sdk';import axios from "axios"const clientKey = 'test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq'export default {  async mounted() {    this.getPayment().then((response) => {      const paymentId = this.$route.query.paymentId;      if (response.data.responseCode == "200") {          this.showTossPayments(response.data.responseData)        } else if (response.data.responseCode == "614") {          window.location.replace("/payment/failed?code=NOT_FOUND_PAYMENT&message=결제정보를%20찾을수%20없습니다&orderId=" + paymentId)        } else {          window.location.replace("/payment/failed?code=LOAD_MODULE_FAILED&message=토스페이먼츠%20로딩에%20실패했습니다&orderId=") + paymentId        }    })    await this.showTossPayments()  },  methods: {    async getPayment() {      return axios.get("/api/v1/payment/" + this.$route.query.paymentId)    },    async showTossPayments(payment) {      const paymentWidget = await loadPaymentWidget(clientKey, ANONYMOUS)      console.log(payment.amount)      paymentWidget.renderPaymentMethods("#payment-method", payment.amount);      paymentWidget.renderAgreement('#agreement')      paymentWidget.requestPayment({          orderId: payment.id,          orderName: payment.orderName,          successUrl: 'http://localhost/payment/succeded',          failUrl: 'http://localhost/payment/failed',        }).catch(() => {          window.location.replace("/payment/failed?code=LOAD_MODULE_FAILED&message=토스페이먼츠%20로딩에%20실패했습니다&orderId=") + payment.id        })    }  },}</script>

buildupOP•2y ago

이실장•2y ago

render가 되기전에 requestPayments가 호출되어 그렇습니다. 결제위젯은 개념자체가 render된 화면에서, 결제수단 선택후 결제요청해주셔야하는데요. requestPayment를 같이 실행하지 마시고, 클릭 이벤트등 핸들링해서 실행해주세요

buildupOP•2y ago

아 넵 한번 수정해서 해보겠습니다. 빠르게 확인해주셔서 감사합니다.

토스페이먼츠 BOT•2y ago

❤️ 기술문의 경험이 어떠셨나요?!

간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.

테스트환경에서 결제위젯을 띄웠는데 카드결제가 나와요

Did you find this page helpful?