결제위젯 비활성화 UI
안녕하세요. 현재 팀에서 전체 포인트를 선택할 시 결제 위젯의 버튼을 비활성화해야하는 작업을 하고 있어요.
기존 토스의 서체를 유지하면서 비활성화된 버튼을 보여줄 수 있는 방법이 있을까 하여 문의드립니다.
시도해본 방법은 아래와 같아요.
1. 커스텀으로 UI 교체
- 문제: font(Toss Product Sans <-> 앱 내의 폰트) 가 달라서 UI 의 통일성이 깨지는 이슈가 있어요.
2. variantKey 가 다른 UI 를 만들어서 대체
- 문제: 저희는 현재 로고를 사용하고 있는데 로고의 색상을 변경할 수 없어요.
위의 문제점이 없는 다른 방법이 있는지 궁금하여 문의남깁니다.
(아래 사진은 2번 시도에 대한 비활성화 UI 사진입니다)
8 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
안녕하세요
토스페이먼츠 JavaScript SDK | 토스페이먼츠 개발자센터
토스페이먼츠 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
이 API 이용하셔서, 아예 결제위젯을 destroy하시거나
display: none; 내지는 visibility: hidden; CSS를 줘보시는건 어떠려나요?
전체포인트를 사용하였기에, 결제 필요잔액이 0원이라면 어짜피 결제위젯에서 금액 update가 불가능할거라서. destroy하는게 좋을 것 같아서요.
포인트 전체사용이 다시 해제된 경우, paymentMethodWidget이 존재하는지 확인하고 존재하지 않으면 다시 렌더링하면 될거같아서요.
좋은 방법인 것 같아요! 답변 감사합니다 @Ayaan 님. 제안주신 방법도 같이 검토해보겠습니다 👍
네 대부분의 가맹점에서 저렇게 구현하고 있어서, 말씀드린 부분을 중점적으로 검토해보시는게 좋을 것 같아요.
늦은시간 까지 고생이 많으십니다.
아, 참고로 한가지 말씀을 드리면 위 destroy API는 v2 SDK에서만 지원합니다. v1에서는 지원하지 않으니, 현재 개발에 사용하고 계신 SDK가
https://js.tosspayments.com/v2/standard 혹은
@tosspayments/tosspayments-sdk 인지 확인해 보세요.
https://js.tosspayments.com/v1/payment-widget 혹은 @tosspayments/payment-widget-sdk 은 지원이 안됩니다.다른 가맹점들은 안보이도록 구현하고 있군요. 친절한 설명 감사드립니다! 버전도 확인하여 적용해볼게요 🙏
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.