아이폰 크롬에서 토스 결제는 어떻게 하나요?
PC에서는 결제가 잘되는데, 아이폰에서 크롬을 열어 상품 결제페이지에 접속하면 첨부드린 그림처럼 나옵니다. 따로 처리해야 할 사항이 있을까요?
참고할 사항이나 문서가 있으면 확인 부탁드립니다.
31 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
혹시 Xpay 사용하시나요?
지금 문제는 해당 페이지에서 기기를 PC로 인식하여서 발생하는 문제입니다
Xpay를 사용하는지를 모르겠네요; viewport 설정을 보면 될까요?
결제창을 띄우는 소스쪽에 아래 js 를 호출하면 xpay입니다.
<script language="javascript" src="https://xpayvvip.tosspayments.com/xpay/js/xpay_crossplatform.js" type="text/javascript"></script>
xpay는 pc용 과 모바일용이 구분되어 있습니다. (호출방식 및 샘플이 조금 다릅니다) 위 에러는 PC용 결제페이지를 스마트폰으로 호출하면 발생하는 에러입니다.
그래서 크롬뿐만 아니라 사파리 (아이폰) 및 안드로이드 폰에서도 동일한 에러가 날것 같습니다.
혹시 개발언어는 어떻게 되시나요? 샘플을 전달드리겠습니다.
nuxt.js로 하고 있습니다!
예 혹시 서버용 백엔드 언어는 확인 어려우실까요? xpay는 php, jsp (java), C#, asp 만 제공되고 있습니다
nuxt3가 서버 렌더링을 제공해서 자바스크립트로 구현되고 있습니다..
xpay는 php, jsp (java), C#, asp 만 제공되고 있습니다
지금 결제창 띄우는 페이지 소스를 보시면
require_once("../../lgdacom/XPayClient.php");
아니면,
<%@ page import="lgdacom.XPayClient.XPayClient"%>
이런것이 확인안되실까요?
export const payScripts = [
'https://js.tosspayments.com/v1/payment-widget',
'https://nsp.pay.naver.com/sdk/js/naverpay.min.js',
'https://shop-api.e-ncp.com/payments/ncp_pay.js',
'https://spay.kcp.co.kr/plugin/kcp_spay_hub.js',
'https://xpayvvip.uplus.co.kr/xpay/js/xpay_crossplatform.js',
];
nuxt3에서 타입스크립트로 위 코드를 읽어서 로드시에 아래와 같이 페이지에 써주고 있어요..
const loadScript = () => {
for (const scriptUrl of payScripts) {
const script = document.createElement('script');
script.src = scriptUrl;
script.defer = true;
script.type = 'text/javascript';
document.head.appendChild(script);
}
};
네 보내주신건 각 PG사별 결제창 호출 스크립트인것은 이해했습니다. 이건 결제창만 띄울수 있고 실제 승인요청은 할수가 없을텐데요..
사이트가 올라간 곳의 웹서버나 프레임워크 종류도 확인이 어려우실까요?
ex) IIS, 아파치, 톰캣, 스프링프레임워크 등
현재 aws ec2서버에 올려서 테스트 하고 있습니다.
혹시 괜찮으시다면 테스트 사이트 계정과 계정을 알려드려도 될까요?
저희가 그부분은 지원이 좀 어렵구요.운영하시는곳 사이트 주소가 어떻게 되시나요?
현재 live전이구요, itempang.com으로 테스트하고 있습니다.
현재 실운영중이 아니면, PC던 모바일이던 결제를 진행하실때 주소창에 입력한 url 주소를 부탁드립니다
혹시 호스팅사 쇼핑몰 솔루션을 커스터마이징 해서 이용중이실까요?
맞습니다.
https://shop-api.e-ncp.com/oauth/token
를 보니까..NHN커머스 샵바이 프로나 프리미엄이신듯 한데요
백엔드는, 샵바이 프리미엄 쓰고 있어요.
네..샵바이는 코틀린 기반인데, 안에 내장된 결제모듈은 xpay로 알고 있습니다. 저희는 코틀린용 xpay를 제공하고 있지는 않은데, 저희 xpay JSP를 변환해서 연동중인것으로 알고 있습니다.
그럼 샵바이에 문의를 해야 하나요..
네..샵바이면 백엔드 수정을 어느부분까지 하실수 있는지 잘 모르겠습니다. 우선 NHN커머스쪽에 문의를 하시는게 좋을것 같습니다.
참고로, xpay의 PC용 소스와 모바일용 소스의 다른점은...크게 차이가 나는게 아닌데
1)
<input type="hidden" id="LGD_OSTYPE_CHECK" name="LGD_OSTYPE_CHECK" value=""/>
여기 value가 PC는 P , 모바일은 M으로 들어와야 합니다. 아무것도 안들어오면 P (PC결제)로 처리되서, 저 에러가 납니다.
위에 말씀하신 처리에 따라 XPay가 변경되는가 보네요.
2) PC는 iframe으로 결제창을 띄우는데, 모바일은 submit 으로 띄워야 합니다. 그래서
PC :
<input type="hidden" id="LGD_WINDOW_TYPE" name="LGD_WINDOW_TYPE" value="iframe"/>
모바일 :
<input type="hidden" id="LGD_WINDOW_TYPE" name="LGD_WINDOW_TYPE" value="submit"/> 으로 올려야합니다
그처리는 저희가 해야 하는건가요?
3) 2번때문에, 결제창 종료후 넘어가는 returnUrl 쪽이 좀 다릅니다
PC :
<script type="text/javascript">
function setLGDResult() { parent.payment_return(); try { } catch (e) { alert(e.message); } }
</script> 모바일: <script type="text/javascript"> function setLGDResult() { document.getElementById('LGD_PAYINFO').submit(); } </script> 네 맞습니다. 위 1~3을 구분해서 저희가 PC, 모바일용 샘플페이지를 따로 제공하고 있습니다 소스상에 위 부분 수정이 가능하시다면, PC/ 모바일에 따라 값을 다르게 셋팅해서 테스트해보시는게 좋겠습니다.
function setLGDResult() { parent.payment_return(); try { } catch (e) { alert(e.message); } }
</script> 모바일: <script type="text/javascript"> function setLGDResult() { document.getElementById('LGD_PAYINFO').submit(); } </script> 네 맞습니다. 위 1~3을 구분해서 저희가 PC, 모바일용 샘플페이지를 따로 제공하고 있습니다 소스상에 위 부분 수정이 가능하시다면, PC/ 모바일에 따라 값을 다르게 셋팅해서 테스트해보시는게 좋겠습니다.
디테일하게 알려주셔서 정말로 감사합니다!
혹시 참고가 되실까 해서 전달드립니다.
PC용 샘플 :
https://drive.google.com/file/d/1ws0W3SXkbh60ztD72EKnE1YBs6jTNHE4/view?usp=drive_link
모바일용 샘플:
https://drive.google.com/file/d/1bXiZs8W97j3eX5t69HZeRhpRmd3zIukA/view?usp=drive_link
Google Docs
TossPayments_no_session_JSP.zip
Google Docs
TossPayments_MobileXPay_no_session_JSP.zip
샘플에서,
payreq_crossplatform.jsp
returnurl.jsp
이 두개의 html ,javascript 를 비교해보시면, PC샘플은 지금 연동중인 내용이실것 같습니다. 위 두 소스의 html 부분을 pc와 모바일을 각각 비교해서 다른점을 확인한 후 OS별로 분기처리 하시면 될것 같습니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.