그

Toss payments 개발자 커뮤니티•3y ago•

38 replies

그냥사람

결제수단 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}/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 가 이중이긴 한데 결제 잘 되고 결과도 잘 오고 있습니다.
그래도 보이는 화면이 통일성이 없어서 고쳐야 할 것 같습니다.

작성한 코드에서 수정이 필요한 곳이 있는지 확인 부탁 드립니다.