iOS WKWebView 에서 해외 카드 결제창 오픈 시 상단 창 닫기 영역 잘림 이슈
결제창을 오픈하는 웹페이지 헤더 태그 뷰포트 viewport-fit=cover 값이 있을 때
오픈된 결제창의 상단 닫기버튼 영역이 잘리는 이슈가 있는데요.
혹시 결제창 오픈할 때 해당 이슈 관련해서 옵션을 따로 줘야하는게 있을까요?
결제창 오픈하는 코드는 아래와 같습니다.
const tossPayments = TossPayments(tpForeignClientKey);
const tsPayments = tossPayments.payment({customerKey});
const pSeq = (paymentData == null ? 0 : paymentData.seq);
tsPayments.requestPayment({
method: 'CARD',
amount: {
currency: 'KRW',
value: tossData.totalPrice,
},
orderId: tossData.impUid,
orderName: tossData.name,
successUrl:
${window.location.origin}/donation/tosspay/success?pseq=${pSeq}&totalPrice=${totalPrice}&payDate=1&pointByPms=${tossData.pointByPms}&isForeignCard=1,
failUrl: ${window.location.origin}/donation/tosspay/fail,
customerEmail: tossData.customerEmail,
customerName: tossData.customerName,
customerMobilePhone: tossData.customerMobilePhone,
taxFreeAmount: tossData.totalPrice,
card: {
useEscrow: false,
useInternationalCardOnly: true
}
});
5 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
safe-area 를 설정해 주셔야 합니다. viewport-fit=cover 의 의미가 UI 를 상단까지 올리는 것이라 이 옵션을 사용하지 말아 주셔야 할것 같아요.
만약 주문서 때문에 어쩔수 없다면 새로 웹뷰를 열어주거나 하셔야 합니다.
safearea 설정해주세요
결제창 오픈 바로 전에 스크립트에서 메타태그 viewport-fit=cover 이 옵션 제거하고 오픈하니까 정상 처리 되네요.
도움주셔서 감사해요.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.