결제수단 TOSSPAY를 선택하면 결제창이 이중(?)으로 나와요
sdk :
"@tosspayments/payment-sdk": "^1.6.4",
import { loadTossPayments } from '@tosspayments/payment-sdk';
loadTossPayments(clientKey).then((tossPayments) => {
tossPayments
.requestPayment('TOSSPAY', { // TOSSPAY, CARD, TRANSFER
amount: amount,
orderId: orderId,
orderName: orderName,
customerName: customerName,
successUrl:
${originUrl}/successUrl,
failUrl: ${originUrl}/failUrl,
})
.catch(function (error) {
if (error.code === 'USER_CANCEL') {
// 결제 고객이 결제창을 닫았을 때 에러 처리
} else if (error.code === 'INVALID_CARD_COMPANY') {
// 유효하지 않은 카드 코드에 대한 에러 처리
}
});
});
CARD, TRANSFER 들은 첨부 이미지 오른쪽처럼 정상적으로 나오는데 TOSSPAY 를 선택하면 모달창 안에 이중으로 나오는 것 처럼 x 닫기 버튼도 2개에 background color도 이중으로 어두워지고 있습니다.
iframe 도 2개가 생기고 있습니다.
TOSSPAY 로 했을때 보이는 창 닫기 버튼과 back color 가 이중이긴 한데 결제 잘 되고 결과도 잘 오고 있습니다.
그래도 보이는 화면이 통일성이 없어서 고쳐야 할 것 같습니다.
작성한 코드에서 수정이 필요한 곳이 있는지 확인 부탁 드립니다.
26 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
이부분은 간편결제 별로 X 를 지원하는 경우와 지원하지 않는 경우가 있어서 저희 입장에서 공통적으로 X 를 제공하기 때문에 그렇습니다.
카드사도 카드사 별로 X 가 두개 표시 되는 경우가 있긴한데, frame 안쪽은 각 카드사 또는 간편결제사가 제공하는 것이다 보니 통일하기 여러운점 양해 부탁드립니다.
tosspay 결제창은 토스에서 제공하는게 아닌가요?
그렇다면 최소 토스에서 제공하는 결제창은 x를 1개만 나오도록 컨트롤 할 수 있는 게 아닌가요?
정확히는 토스페이를 제공하는 비바와 토스페이먼츠는 별도의 다른 회사 이구요.
토스페이쪽에서는 토스페이먼츠 이외에 다른 PG 를 통해서도 해당 페이지를 제공하기때문에 빼거나 넣는 부분을 특정 PG 에 맞추기는 어려운 부분이 있습니다.
현재 저희 회사에서 다른 언어로 구현해 놓은 (javascript) 토스 결제창에서는 x 가 1개만 나오고 있습니다.
그럼 여기에서는 어떻게 1개만 나오는건가요?
다른방식으로 호출하신거 아닌가요? 결제창 통해서 호출한게 아니고 직접 호출 하신것 같은데요??
맨 위에 적어 놓은 방식으로 호출했습니다
지금 위 파라미터 동일하게, 다른 연동 언어로 호출하면 어떤건 x 가 있고, 어떤건 x 가 없다는 건가요?
네 맞습니다
토스페이먼츠 분들 로그 확인 하실수 있도록 두개 케이스 주문 번호 공유 해주세요
orderId : PT1690774418066 (x 닫기 버튼 1개)
orderId : PT1690775047441 (x 닫기 버튼 2개)
감사합니다.
위 주문들은 결제 취소 해도 될까요?
PT1690774418066 로 요청하셨던 요청을 저희가 그대로 사용해도 X 가 2개 나옵니다.
지금 신규 주문번호로 다시 해보실수 있을까요?
조금 전에 다시 해봤는데 똑같이 x 버튼 1개 나오고 있습니다.
PT1690779262615
혹시 브라우저 어떤것 쓰시나요?
흠.. 이상하네요.. 지금 요청주신 파라미터 그대로 저희샘플 사이트에서 띄우면 X 표가 2개 뜹니다.
내부적으로 1개가 뜨는 조건이 있는지 확인후 공유드릴께요.
Chrome이 최신 버전입니다.
버전 115.0.5790.110(공식 빌드) (64비트)
x 1개 뜨는 경우의 코드 작성 방식이 맨 위와 조금 달랐습니다.
아래는 CARD/TOSSPAY/TRANSFER 모두 x 1개 뜨는 경우고 많이 크롬, 엣지에서 확인해 봤을 때 x 1개씩 나오고 있습니다.
<script src="https://js.tosspayments.com/v1"></script>
<script type="text/javascript">
const clientKey = 'clientKeyclientKeyclientKey';
const tossPayments = TossPayments(clientKey);
let pay_type = 'TOSSPAY'; // CARD/TOSSPAY/TRANSFER
function pay_request()
{
pay_data = {
amount: amount,
orderId: orderId,
orderName: orderName,
successUrl: origin_url + '/successUrls',
failUrl: origin_url + '/failUrl',
customerName: customerName,
customerEmail: customerEmail,
};
toss_payments(pay_type, pay_data);
}
function toss_payments(pay_type, pay_data)
{
tossPayments.requestPayment(pay_type, pay_data);
}
</script>
저는 보내주신 코드 그대로 했을때 2개가 보이네요.
코드 구현 이슈가 아니라 사용자 환경에 따른게 아닌가 싶습니다.
사용자 환경이라면 구체적으로 어떤 부분을 말씀하시는 걸까요?
위에서 '정확히는 토스페이를 제공하는 비바와 토스페이먼츠는 별도의 다른 회사' 라고 하셨는데 다른 회사라 하더라도 같은 계열사라고 볼 수 있는 게 아닌가요?
토스 끼리 결제창 ui를 이런 식으로 제공하고 (x 두개에 백드롭 이중) 이 상황이 정상이라는 식으로 말씀하시는 것 같아서 토스에 조금 실망스러운 마음이 듭니다.
당장은 아니더라도 향후 이 부분은 개선이 되면 좋겠습니다.
당장은 아니더라도 향후 이 부분은 개선이 되면 좋겠습니다.
개발팀을 통해 확인을 했는데요, 다음과 같이 정리됩니다.
- 저희가 내부적으로 현재 2개 버전의 결제창을 운영중인데요.
이중 구형에서 X가 하나, 신형에서 X 가 2개로 표시 됩니다.
구형에서는 저희가 별도로 X 를 표시 하지 않았었는데, 얼마전에 토스페이측 정책 변경으로 X 를 빼버리면서 갑작스럽게 저희 결제창에서 창을 닫을 방법이 없어진 이슈가 발생했습니다.
그에 따라 신규 결제창에는 카드사나 간편결제사의 정책과 무관하게 X 버튼을 제공하는것이 고객불편을 줄이는 방법이라고 판단이 되어 신규 결제창에서는 저희도 X 를 제공하는 것으로 결정이 되었습니다.
계열사라고는 하지만 어쨌든 분리된 회사인데다, 토스 특성상 변경이 잦다 보니 보기에 이상하더라도 안전하게 동작을 하는 쪽에 더 중점을 둔 선택이라고 이해해주시면 될것 같습니다.
이부분은 토스페이측과 추가적으로 협의해 보도록 하겠습니다.
자세한 설명 감사합니다.
추가 협의를 하실 때 백드롭 이중 문제도 같이 해결될 수 있으면 좋겠습니다.
결제수단 마다 백드롭 어둡고 밝은 정도가 달라서 버그처럼 느껴집니다.
감사합니다!
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
백드롭이라 하심은 dim 되는 배경 색을 말씀하시는 건가요?
네 배경에 화면 전체 영역에 backgroud-color 부분요
네 이부분도 관련팀에 전달하도록 하겠습니다.
감사합니다!!