구모듈 리액트 사용 방법 문의
안녕하세요. 구 모듈 (xpay) 로 카드정보 등록 기능을 이용하고 있었는데요,
jsp로 <script src="https://xpay.tosspayments.com/xpay/js/xpay_crossplatform.js" type="text/javascript"></script> 스크립트 삽입하여 사용하고 있었습니다.
그런데 해당 사이트를 react 환경에서 리뉴얼 하게 되었는데 어떤식으로 사용하면 좋을지 궁금하여 글 남겨봅니다...!
22 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
아쉽지만
구모듈은 리액트에서 사용이 불가능하십니다.
억지로 사용할 수 있긴한데..
아.......... 그렇군요.............
추천드리진 않고 연동이 복잡합니다
기존에 XPAY를 이용하고 계셨던것이지요?
네네
개편되는 사이트의 백엔드는 어느 언어일까요?
java입니다....!
프론트의 정확한 스택이 어떻게 되나요? Vite + React CSR인가요? Next.js인가요?
next.js 입니다 ㅎㅎㅎ
그렇다면,
1. (운영기) https://xpay.tosspayments.com/xpay/js/xpay_crossplatform.js
(개발기) https://xpay-sandbox.tosspayments.com/xpay/js/xpay_crossplatform.js 를 next/script 태그를 사용해서 불러온다.
2. XPayClient.jar을 사용하는 모든 로직을 백엔드 Java로 보내고, Restful API로 모든 필드를 통신한다.
이런 방식으로 연동이 가능하긴합니다.
아하 고렇군요.... 한번 시도해보겠습니다! 감사합니다 😄
저같은 경우에도 비슷한 케이스가 있었고,
이렇게 Spring Webflux에서 결제창 오픈에 필요한 formData를 JSON으로 반환,
프론트엔드에서는 저걸 <form> 태그로 반복문 돌면서 생성하도록 했습니다.
그리고 그 form을 가지고 XPAY를 오픈했고, LGD_RETURNURL을 프론트로 설정하면
프론트에서 또 백엔드에 API 요청을 보내게 하구요.
jsp로만 구성할때보단 손이 많이 가긴 하네요ㅠ 흠헴헴 상세한 설명 감사합니다ㅠㅠㅠㅠㅠㅠㅠㅠ
네네 ㅠㅠ
그래서 권장 드리는 방법은 저 방법이아니라
MID를 새로 분리하거나, 혹은 자체적으로 분기 로직을 만들어
-> 기존 XPAY 결제 건에 대한 취소만 기존 jsp 서버에서 처리
-> 새로운 결제는 XPAY 말고, 최신 모듈로 변경
이런 방법이 있습니다.
최신 모듈로 변경하는게 더 깔끔할꺼 같다는 생각도 들긴하네요
왜냐하면 최신 모듈은 React를 공식 지원합니다.
다만 기존 XPAY 결제건에 대한 취소 등의 업무가 일절 불가합니다.
원장이 분리되어 있기때문에 그렇습니다.
그래서 기존 결제건에 대한 취소가 필요한 경우 기존 JSP 서버를 계속 돌리고 계시거나
토스 상점관리자에서 직접 수기로 취소하셔야합니다.
혹은 위 방법으로 기존 결제건만, 백엔드 단에서 직접 XPAY 콜해도 되구요.
결제건 취소가 필요한지는 관련부서에 좀 더 문의해보아야겠네요.. 야매(?)로 구모듈 계속 쓰는거보단 장기적으로 봤을때 새모듈 쓰는게 코드상 깔꼼할꺼같아서 고민됩니다ㅠ
정리드리면
1. 신규 사이트에서도 XPAY를 연동한다
-> 장점: 관리가 일원화 되기에 운영 측면에서는 편하다
-> 단점: 야매로 이용하기에 연동의 복잡성이 높고, 추후 코드 유지보수가 어렵다.
2. 신규 사이트에서는 최신 모듈을 사용한다
-> 장점: 연동이 쉽고, 코드 유지보수가 간편하다
-> 단점: XPAY 결제건에 대한 관리가 불가능하기에, XPAY를 일부 연동하거나 기존 JSP 서버를 동시에 운영해야한다.
저도 새 모듈 쓰는걸 추천드리긴하는데요,
취소가 필요해서 리스크가 있다면
-택 1-
(옵션1)
- 귀사 DB에서 결제가 XPAY/PX(신모듈을 뜻하는 코드입니다)에서 발생한 것인지 기록
- 이것에 따라 기존 JSP 서버로 빠지게 or XPAY를 별도 연동하여 운영
(옵션2)
- MID 자체를 분리하여 완벽하게 분리 관리
- 기존 MID 결제건이면 무조건 기존 JSP 서버로 빠지게 or XPAY를 별도 연동하여 운영
감사합니다!!!! 많은 도움이 되었습니당!!!!!!!👍
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.