브랜드페이 결제위젯이 렌더링되지 않음
안드로이드에서 웹뷰로 브랜드페이 결제 위젯을 렌더링할때
"TypeError: Failed to construct 'Headers': String contains non ISO-8859-1 code point." 에러가 발생하고, 결제 위젯이 렌더링 되지 않습니다.
혹시, 어떤 부분이 문제인지 알 수 있을까요?70 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
이 내용 인가요?
https://3-stack.tistory.com/105
3-STACK
String contains non ISO-8859-1 code point.
[문제] String contains non ISO-8859-1 code point. [원인] ISO-8859-1 에 포함되지 않은 값을 사용해서 그렇다. ISO/IEC 8859-1:1998(별칭: Information technology - 8-bit single-byte coded graphic character sets - Part 1: Latin alphabet No. 1)[1]은 ISO/IEC 8859의 일부인 문자 집합으로, 약칭 라틴-1(Latin-1)로 불린다. [해결] URI 사양에서 UTF-8 인코딩 해야한다. [참고] 인코딩 종류 1. escape() : unescape() ABCDEFGHIJK...
운영하시는 환경에 맞게 추가 구글링 등을 수행 해보셔야 할것 같아요
이거
redirectUrl및 AccessToken제대로발급되었는지 확인해보시기 바랍니다.
redirectUrl등록은 하셨나요?
넵 redirectUrl 등록 했습니다.
d일단 에러메세지 받은 화면 캡처하나 주시겠어요?
accessToken발급 시도한customerKey알려주세요
7eba94c9-ff77-478c-b3a9-3f27deafb90b 입니다
브랜드페이 API | 토스페이먼츠 개발자센터
브랜드페이에서 제공하는 API 엔드포인트(Endpoint)와 객체 정보, 파라미터, 요청 및 응답 예제를 살펴보세요.
호출한 내역이 안보이는데
확인 가능할까요
위젯 호출시 redirectUrl을 설정해서 렌더링하는데, 해당 redirectUrl로 요청이 들어오지는 않는것 같아요
redirectUrl을 개발자센터에 등록하셨나요?
네 등록되어있습니다
위젯 호출하는 코드좀 공유주시겠어요? ㄹ
로그상으로는
redirectUrl이 안올라와서요
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
답변이 많이 늦어지게되서 죄송합니다. 결제 위젯을 초기화할때 아래의 코드로 초기화합니다.
window.location.origin + "/v1/payment/access-token"
이라는 URL 을 구현하신건가요?
이 URL 은 저희 토큰 발급하는 path를 그냥 입력하신것 같은데요.
서버에 해당 엔드포인트 구현되어있습니다.
그럼 지금 테스트 해보신 customerkey 공유 부탁드립니다.
7eba94c9-ff77-478c-b3a9-3f27deafb90b 입니다사용하시는 MID 는 뭔가요?
cp_shipchdpdz 입니다지금다시 해보실수 있을까요?
똑같이 브랜드페이 위젯이 렌더링되지 않습니다
렌더링된 상태를 캡쳐해서 올려주실수 있을까요?
그리고 customerkey 는 어떻게 보내고 계신가요?
해당 스크린샷의 검정색 사각형 부분에 렌더링 되게되어있고, customerKey는 서버에서model에 담아서 해당 페이지로 전달합니다.
보내신 실제 customerkey 값을 알려주세요.
7eba94c9-ff77-478c-b3a9-3f27deafb90b입니다.지금 제가 동일한 client 키에 동일한 customer 키로 하면 렌더링이 잘되는데요..
흠 이상하네요.
variantkey 는 어떻게 보내고 계신가요?
test-brand-pay-key 이렇게 보내고 있습니다.그런데 원래 문의는 에러가 발생한다는 것이었는데, 오늘은 안보인다고 하신건데요. 혹시 증상이 변경되었나요?
증상이 변경된건 아니고, 처음부터 저런식으로 웹뷰 페이지는 불러와지지만, 브랜드페이 위젯은 렌더링 되지 않는 현상이였습니다.
"TypeError: Failed to construct 'Headers': String contains non ISO-8859-1 code point." 이 문구는 웹뷰가 로딩될때 콘솔에 찍히는 로그입니다.html 을 웹서버에 구현하신후에 앱에서는 직접 웹뷰를 만들어서 로딩 하시는 건가요?
그리고 해당 에러가 발생하는 에러 메시지 상의 URL 도 공유해 주실수 있을까요?
이전에 올려주신 캡쳐 내용에 "/paytment-widget/e8245ce4ecd7dd76264d56691e8f7564e17cce58/_next/static" 이부분의 전체 URL 입니다.
html을 웹서버에 구현한 후에 앱에서 api로 해당 html을 받아오고 loadDataWithBaseURL을 사용해서 웹뷰에 띄우고 있습니다
https://payment-widget.tosspayments.com/payment-widget/e28bd72d6ca07e0cfdec673bc2e7aa6e1ccc1ccd/_next/static/chunks/framework-f4cbedcca48e53ef.js 입니다
토스 개발자센터의 샌드박스에서 저희 clientkey사용해서 위젯을 띄울때 customerkey를 123이런 임의 값으로 했을때는 카드등록 ui가 나오는데 7eba94c9-ff77-478c-b3a9-3f27deafb90b 를 사용했을땐ㄴ 아무것도 안뜹니다!
customerKey 명시하는 방식 업데이트 해볼수 있나요?
const widgets = tossPayments.widgets({ customerKey: {customerkey} });
이렇게 하고 계신데
const widgets = tossPayments.widgets({ {customerkey} });
이렇게요
const widgets = tossPayments.widgets({
"7eba94c9-ff77-478c-b3a9-3f27deafb90b"
brandpay:{
redirectUrl: window.location.origin + "/v1/payment/access-token"
}
})
이렇게 말씀하시는건가요?
네 맞아요.
아예 위젯이 로딩이 안됩니다
죄송한데
customerkey뒤에 ,를 추가하면 위의 에러가 뜨고 ,를 안쓰면 Error transforming /index.js: Unexpected token, expected "(" (15:13) 이런 에러가 뜹니다
지금 직접 구현하신게 아니고
샌드박스에서 하시나요?
네
직접 서버에 띄워서 해보시는게 가능 할까요?
샌드박스에서 하셔야 하나요?
아뇨 직접 띄워서도 가능합니다
기존에 서버에서는 말씀해주신대로 하고있습니다
네, 그럼 기존 서버에서 보여지는 상황 기준으로 볼까요?
기존 서버에서도 동일한가요?
지금 기존서버에서 말씀해주신대로 했을때 생기는 에러입니다
이때 보여지는 콘솔에러가
TypeError: Failed to construct 'Headers': String contains non ISO-8859-1 code point.
이거이고요?
넵
API 로 url 가져와서 웹뷰의 띄운다고 했는데,
이 API 는 단순히 웹뷰에 띄울 웹사이트 URL 을 가져오는 용도 인가요?
https://payment-widget.tosspayments.com/payment-widget/e28bd72d6ca07e0cfdec673bc2e7aa6e1ccc1ccd/_next/static/chunks/framework-f4cbedcca48e53ef.js
이부분은 static js 로 보이는데 여기 헤더처리에 왜 이슈가 있는지 모르겠네요.
네 그렇습니다. 웹사이트를 구현한게 아니라 서버에서 html을 불러와서 웹뷰에 띄우고 있습니다
아 html 을 로컬에 두고 그걸 그대로 로딩하는 방식이신가요?
넵
웹뷰로 구현하실때는 그렇게 처리하시면 안될겁니다.
따로 웹페이지 url에 연결해서만 사용해야하는건가요?
네 웹서버 내에 URL 을 만들어서 로딩하시거나
아니면 nativeSDK 이용해서 처리해 주셔야 합니다.
지금 앱 에서 사용하는 언어가 어떤거 쓰시나요?
앱은 코틀린으로 만들고있습니다
결제위젯 Android SDK | 토스페이먼츠 개발자센터
결제위젯 Android SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
여기 내용을 참고해서 native SDK 로 구현해주셔야 할것 같아요.
그게 아니면 웹서버에 페이지를 만들어서 올려주시기 바랍니다.
customerKey를 새로 발급해서 웹뷰를 띄웠을때 카드 등록ui가 뜨고 카드번호,유효기간,비밀번호 등을 입력한 후에 확인을 누르면 아래와 같은 문제가 생기는데 이게 웹뷰 구현 방식 때문에 생기는 문제라는 거죠?
이 오류는 accesstoken 발행을 못해서 발생하는 에러인데.
html 을 로컬에 구성하시면 토큰 요청을 위한 redirecturl 이동이 불가합니다.
서버에 [GET]
/v1/payment/widget 같은 경로로 요청보낼때 서버의 템플릿에 값을 채워서 내려주는 방식으로 구현하면 안된다는 건가요?저희가 제공하는 API 를 제외한 나머지 endpoint 를 직접 호출하시면 안됩니다.
그게 아니라 저희가 구현한 /v1/payment/widget 이라는 엔드포인트를 호출하면 서버에서 아래의 템플릿에 값을 채워서 응답하게끔 구현한다는 뜻이였습니다.
브랜드페이 jsSDK 에서, 전달된 redirectUrl 로 쿼리파람을 포함한 호출이 진행 되고, redirectUrl 에서 전달된 쿼리파람을 parse 해서 access token 발급 요청을 해야 합니다.
토스페이먼츠가 제공하는 NativeSDK 연동 방식으로 구현하거나,
자체 웹뷰를 이용한다면, 웹서버에 실제 서비스가 올라간 사이트를 웹뷰로 바로 연결해서 띄우는 등의 작업을 하셔야 한다는 의미 입니다.
또한, 지금 virtual device 에서 테스트 하시는 것으로 보이는데, 이때 virtual device 상에서 띄워진 브랜드페이 jsSDK 에서 redirectUrl 로의 연결 요청이 정상적으로 되는건지 저희는 봐서는 알 수 없습니다.
virtual device 의 환경이 redirectUrl 로의 연결에 문제가 없다면야 그대로 진행하시는데, 그런게 아니라면 가급적이면 실제 기기에 빌드하고 진행하세요.
테스트 하시는 환경이 자체적으로 구현하신 환경이신데,
이러한 상황에 대해서 저희가 100% 인지할 수 는 없기 때문에,
가급적이면 실제 운영과 동일한 환경상에서 문제가 발생한것을 기준으로 질문 주실 수 있다면, 저희도 이슈를 빠르게 찾아서 안내 드릴 수 있을것 같습니다.
그게 아니면, 저희의 답변도 계속 돌기만 할 뿐입니다.