토스페이먼츠 결제인증 성공
개발 시 vue 를 사용하고 있는데 url 에 /#/ 이 붙습니다.
결제인증 성공 시 url 뒤에 parameter 로 paymentKey 와 일부 주문 정보를 보내주시는데
결제 성공 url 이 /#/order/success 이면 /#/order/success?orderId=xxx&paymentKey=xxx&amount=xx 가 아닌
파라미터값이 ?orderId=xxx&paymentKey=xxx&amount=xxx#/order/success 로 옵니다.
혹시 vue 로 작업 시 따로 작업이 필요한 부분이 있는지 가이드라인이 따로 있는지 문의 드립니다.
11 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
successUrl 부분 작성하신 코드 올려주시겠어요?
GitHub
payment-samples/payment-window/vue at main · tosspayments/payment-s...
Contribute to tosspayments/payment-samples development by creating an account on GitHub.
더불어 vue샘플 코드도 보내드립니다
HashRouter를 꼭 사용해야 하는 이유가 있으신건가요?
참고로 vue는 프론트엔드 프레임워크이므로 결제 처리를 vue에서 하시는건 추천드리지 않습니다.
HashRouter 를 사용하지 않는 경우 화면 url 을 직접 호출할 경우 404 에러가 발생하여 화면 접근이 불가합니다.
[Vue.js] URL뒤에 붙는 #
URL에 왜 #이 붙는걸까?
여기를 참고하셔서 history 방식으로 구현을 해주시는것은 가능하실까요?
SSKATE님이 이야기하신 것처럼 VUE는 Front side 언어라 secretKey를 포함한 승인 API직접 호출하시면 안됩니다. 외부에 쉽게 key정보가 노출됩니다.
successUrl 부분은 Server에 API를 추가하여 backend에서 승인API를 호출하고 결제가 완료되면 front(Vue)로 다시 redirect하는 방법으로 구현하시기를 제안드립니다.
저는 조심스럽게 이런 방식을 추천해 드립니다.
HashRouter를 계속 유지하시고,
서버에서 / path에 Vue의 index.html을 리턴하게 하고
그 이외에 /order/success 같은 path는 서버쪽 라우트에 모두 등록하시는겁니다.
그러는 경우 Vue위에서 호출하는 것과 같은 효과가 있기 때문에 이렇게 사용하는 가맹점도 많은 것으로 보입니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.