결제수단 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>