null is not an object (evaluating history.state.tosspayments)
"@tosspayments/widget-sdk-react-native": "^1.5.1",
"react": "19.1.1",
"react-native-webview": "^13.16.0", "react-native": "0.82.0", 안드로이드는 브랜드페이 카드 추가에서 카드가 잘 추가가 되는데, ios에서는 저 화면이 뜨면서 추가가 안되네요. 어떻게 해결하면 좋을까요? 운영은 잘 돌아가고 있습니다. rn 버전 마이그레이션 작업에서 지금 안되고 있어요. 운영에서는 1.4.0을 사용 중입니다.
"react-native-webview": "^13.16.0", "react-native": "0.82.0", 안드로이드는 브랜드페이 카드 추가에서 카드가 잘 추가가 되는데, ios에서는 저 화면이 뜨면서 추가가 안되네요. 어떻게 해결하면 좋을까요? 운영은 잘 돌아가고 있습니다. rn 버전 마이그레이션 작업에서 지금 안되고 있어요. 운영에서는 1.4.0을 사용 중입니다.
153 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
혹시 1.5.1 버전 사용하시면서 tosspayments-react-native-webview 를 사용하시는지 확인부탁드립니다.
1.5.1 버전에서는 react-native-webview 를 쓰셔야 합니다.
"react-native-webview": "^13.16.0", 를 사용하고 있습니다! osspayments-react-native-webview는 사용되지 않는다고 인터넷에 나와서 삭제했어요. 혹시나 해서
이렇게 주석 처리를 해 보았는데요, 그렇게 하니까 카드 번호 입력까지는 나오는데, 커스터머 토큰?이 없다는 식으로 나오네요..
왜 주석처리하셨어요?
그냥... 혹시나 해서요..
주석 해제하고 하면 처음 스크린 샷 처럼 뜨기만 해서요..
브랜드페이 인증하기 | 토스페이먼츠 개발자센터
브랜드페이 인증은 OAuth 2.0 인증 프레임워크를 기반으로 구현되어 있습니다. 브랜드페이에서 Access Token을 발급하고 사용하는 방법을 안내합니다.
ㅠㅠ
여기를 위해 꼭 필요한 작업입니다.
v1을 사용하고 있는데 v2를 써야 하나요..?
아뇨
그건 상관없어요
지금도 주석해제하면 에러뜨고
네네 ios에서만요!
주석걸면
좀 진행은되나요?
주석 걸면 카드 번호 입력 까지만 가능합니다.
ios는 18버전, 26버전 둘다 같은 현상입니다.
안드로이드는 15에서 잘 되었어요.
일단 1.5.1 미만 버전에서는 이슈가 없을텐데요
버전 다운은 안되죠?
어제 버전 다운해서 1.4.0으로 설치 해봤을때도 똑같이 에러가 났어요..ㅠㅠ...
일단 웹뷰 쪽 이슈라 확인은 해보겠으나
오래걸릴 수 있습니다.
아하 ..ㅠㅠㅠ 넵... 혹시 일주일 안에는 해결이 될 수 있을까요?
저희가 해결할 수 있는 이슈인지부터 확인이 피룡해요
아하 넵 알겠습니다.
확인 이후에 답글 부탁드립니다!!
확인 후 공유드릴게요
이렇게도 한번 확인해주세요
넵!
버전 변경 해 봤는데, 해결이 되지 않고 그냥 저렇게 흰색 화면만 뜨네요 ㅠㅠ
다시 1.5.1 로 변경하겠습니다...
이건 또 다른현상아니에요?
위젯 렌더링은 되나요?
아니요..
ㅠㅠㅠ
원래는 렌더링은됫잖아요?
그럼 다른 문제 같은데
콘솔이나 네트워크는 무슨에러가 뜨나요
아무런 에러가 나지 않습니다..ㅠ
네트워크 패킷을 까본건 아니라.
ㅠㅠ
그럼 뭔가 아무일도 안일어난 것 같은데요
근데 또 그 라이브러리 안에서
console.log를 찍으면
나오기는 해요..
PaymentMethodWidget
여기에서 찍었어요.
안드로이드에서 카드를 등록한 다음에도 ios에서 결제하기를 누르면 null is not an object (evaluating history.state.tosspayments) 이 에러가 떠요 ㅠ
확인해볼게요 🙂
저희 백엔드 분이 code값이 안들어온다고 하시네요.. ㅠ 혹시나 해서 말씀드려요~
리다이렉트url로요?
error.message:Required request parameter 'code' for method parameter type String is not present 이렇게 뜬다고? 보내주셨어요.
네 그 에러를 어디서 받았는지 궁금해요
ㄹㅣ다이렉트 url에서 받은건가요?
네.
안녕하세요! 제가 오늘 결제 페이지만 만들어서 리액트 네이티브 버전 0.76, 0.77, 0.82에서 ios를 다 테스트 해봤는데.. null is not an object (evaluating history.state.tosspayments) 이 에러가 뜨고 있습니다. ios에서 브랜드 페이만 New Architecture에서 지원이 잘 안되는거 같아 다시 댓글 달아 둡니다.. 브랜드 페이 사용자가 저희 서비스에서 차지하는 비율이 높아 꼭 이슈 확인 부탁드립니다.
네 확인되는대로 공유드리겠습니다.
mid는 어떻게되세요?
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
mid 여기에 남겨도 괜찮을까요?
네 MID는 공개 가능한 값입니다
남겨주세요
아무리 해도 재현이 안되네요 ㅠㅠ
studymiluw 입니다!!
ㅠㅠㅠ
ios 26에서도 재현이 되지 않을까요?
일단은 웹뷰 형식으로 변경해서 해결하기는 했습니다..ㅠㅠ
우선 저희도 추가로 확인해볼게요 !
넵 감사합니다!!
ㄷㅏ른가맹점도 이슈가 없다보니 참 어렵네요
웹뷰 형식으로 변경했다는건
웹뷰에 웹서버 띄웠다는 말씀이시죠?
넵
저희도 싹 돌려봤는데 참 어렵네요 ㅠ
우선 지금 당장은 웹뷰에 웹서버 올려서 이슈는 없으신거죠?
넵 이슈 없습니다! 1
웹뷰 올린 시점이 언제실까요?
시점 기준으로 로그 확인해보려고요
(그전 로그)
지난주 금요일 이었습니다!!
14일 입니다.
ㅇㅔ러는 라이브키에서 발생한거죠?
넵
적극적인 지원 감사합니다~
안녕하세요. 저희 가맹점도 같은 이슈가 발생하여 이곳에 글 올려봅니다.
이슈가 발생한 버전 공유드립니다.
(rnsdk v1에서 제공하는 브랜드페이 UI 카드노출까지는 문제없이 진행되나 카드추가, 카드설정, 결제 진행시 모달이 열릴때 같은 오류 발생)
"expo": "~53.0.20",
"react": "19.0.0",
"react-native": "0.79.6",
"react-native-webview": "13.13.5",
"@tosspayments/widget-sdk-react-native": "^1.5.1",
아래버전에서는 문제없이 동작합니다.
"expo": "^52.0.0",
"react": "18.3.1",
"react-native": "0.76.9",
"react-native-webview": "13.12.5",
"@tosspayments/widget-sdk-react-native": "^1.3.0",
"tosspayments-react-native-webview": "1.0.0"
위 동작하는 버전에서
"@tosspayments/widget-sdk-react-native": “1.5.1” 로 변경하면 동일한 오류가 발생하구요.
아무래도 "@tosspayments/widget-sdk-react-native": “1.5.1” 해당 버전 문제 같은데,
문제는 저희가 이번에 expo53으로 마이그레이션 하면서 "@tosspayments/widget-sdk-react-native": “1.4.0” 아래 이미지와 같이 브랜드페이UI 노출부터 동작하지 않는 문제가 있어 "@tosspayments/widget-sdk-react-native": “1.5.1” 이 버전으로 올렸습니다.
다시 "@tosspayments/widget-sdk-react-native": “1.4.0” 으로 내릴 수는 없다보니, ios와 android의 버전을 달리 가져가야하는 상황인데요.
혹시 "@tosspayments/widget-sdk-react-native": “1.5.1” 해당 버전에 대한 개선이 이루어질지, 개선된다면 언제쯤 진행될지 확인 요청드립니다.
안녕하세요 mid가 어떻게되나요?
현재 저희도 정확히 재현이 안되는 상황이라 개선에 어려움이 있습니다.
cp_wepern48fg 입니다
11월 14일에 마이그레이션을 진행했고, 11월 17일부터 이슈가 들어와서, 다음날 바로 ios만 package.json 및 ios pod file 버전낮춰서 재배포한 상황입니다.
토스 내부인터넷망에서 테스트할때는 1.5.1 버전에서 문제가 없는걸까요?
로그 찾아보시려면 11월 17일 오전9시 50분 이후부터 확인해보시면 될 것 같습니다.
우선, 1.5.1 버전부터는 tosspayments-react-native-webview 의존성은 이제 필요 없으니 제거해보실 수 있나요?
혹시 코드에서 tosspayments-react-native-webview 의 웹뷰 컴포넌트를 쓰는 곳이 있었다면 react-native-webview 의 것으로 바꾸면 됩니다
1.5.1 버전부터 tosspayments-react-native-webview 의존성이 불필요하여 제거한 상태입니다.
아래버전에서는 문제없이 동작합니다.
"expo": "^52.0.0",
"react": "18.3.1",
"react-native": "0.76.9",
"react-native-webview": "13.12.5",
"@Tosspayments/widget-sdk-react-native": "^1.3.0",
"tosspayments-react-native-webview": "1.0.0"
우선 여기선 정상동작하는거죠? 1.3.0
넵 1.3.0 , 1.4.0 모두 동작합니다.
그런데 expo를 올리면 1.4.0에서 에러가 떠서 1.5.1로 올리신거죠?
넵 맞습니다
뭔가 expo 53에서 tosspayments-react-native-webview 랑 충돌이 있어서 에러가 나나보군요
expo 53 에서 tosspayments-react-native-webview 해당 의존성을 제거했는데 충돌이 발생하나요?
53 + 1.4.0에서 에러가 난다고 하셔서요
아하 네넵
53 + 1.5.1은 의존성 제거해서 기존 이에러는 안나는데 브랜드페이 쪽에서 다른 에러가 발생하는게 아닐까 우선 짐작해봤습니다
우선 좀 확인해볼게요
넵 감사합니다
그러면 53+1.5.1은 17일 오전 10시경 부터 하루만 유지하신거죠?
넵 맞습니다.
14일부터 배포가 나간상황이라 이전에 몇번 발생했을수도 있으나 내부로 인입된 건이 없어서 인입된 이후시간부터 말씀드렸습니다.
(rnsdk v1에서 제공하는 브랜드페이 UI 카드노출까지는 문제없이 진행되나 카드추가, 카드설정, 결제 진행시 모달이 열릴때 같은 오류 발생)
이거 조금만 더 질문드릴게요
네넵
처음에 카드번호 입력까지는 되는데,
약관동의하는 순간 에러가 발생하나요?
카드번호 입력도 안됩니다
아니면 모달 뜰때는 무조건 나는군요
넵 모달뜰때 무조건 발생합니다
시뮬레이터에서 하셨나요
실기기에서 하셨나요
실기기에서 오류가 발생했고, 시뮬레이터에서 확인해본결과 같은 문제가 발생했습니다
혹시 주문서 페이지만이라도 코드를 받을 수 있을까요?
재현환경 만들어서 최대한 간단히 주셔도 됩니다.
(위젯렌더링 되는 페이지)
간단히 작성해서 공유드리려면 조금 시간걸릴것 같습니다
그대로 주셔도되고요
재현이 안되서
뭔가 주변 component들의 영향을 받는지 확인해보려고요
혹시 주변 컴포넌트에 영향이 있는건지 간단히 작성해서 테스트해보고 해당 코드 공유드리겠습니다
네 감사합니다 .
혹시 웹뷰에 띄우는 사이트를 화이트리스트로 관리하나요?
우선 재현환경 만들어서 확인 후 알려드릴게요
웹뷰에 띄우는 사이트가 어떤 부분일까요?
브랜드페이 redirectUrl 통해서 저희서버로 보내는 callback-auth는 도메인 화이트리스트로 관리하고 있습니다.
코드 다시 공유드립니다.
export default function App() {
return <ExWidget />
}
export default function ExWidget() {
return (
<SafeAreaProvider>
<PaymentWidgetProvider
clientKey="클라이언트 키를 입력해주세요"
customerKey="고객 키를 입력해주세요"
options={{ brandpay: { redirectUrl: '리다이렉트 URL을 입력해주세요' } }}
>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<PaymentWidget />
</View>
</PaymentWidgetProvider>
</SafeAreaProvider>
)
}
export const PaymentWidget = () => {
const paymentWidgetControl = usePaymentWidget()
return (
<PaymentMethodWidget
selector="payment-methods"
onLoadEnd={() => {
paymentWidgetControl
.renderPaymentMethods(
'payment-methods',
{ value: 50000 },
{
variantKey: '변경 키를 입력해주세요',
},
)
.then((control) => {
// console.log(control)
})
.catch((e) => {
console.log(e)
})
}}
/>
)
}
paymentWidgetControl.renderPaymentMethods 이후 then 에서 console 주석 처리했습니다
실행한 영상도 첨부드립니다
안녕하세요. 혹시 테스트해보셨던 샘플프로젝트 받을 수 있을까요?
저희가 재현은 되어서 어떻게 조치할지 확인해보고 공유드릴게요
넵 알겠습니다
@here
1.5.2-alpha.1
확인되시나요?
넵 확인됩니다
설치해서 실행해봤는데, 모달이 열렸다가 바로 닫히는 문제가 있습니다
redirectUrl 세팅하셨죠?
영상이랑 customerKEy한번 공유해주시겠어요?
잠시만요
시뮬레이터말고
실기기에서 해볼 수 있을까요
시뮬레이터는 cors가 발생하는 것 같아요
customerKey: f5300374-c14c-45af-be4b-9fd97b7b666c
시뮬레이터에서 cors가 발생하는 이유가 뭘까요?
시뮬레이터 웹뷰가 이상한 것 같더라고요
우선 실기기에서 확인가능하세요?
현재 버전을 테스트해보려면 배포해야해서 시간이 좀 걸릴것 같습니다
네 그럼 먼저 안내 하나 드릴게요.
원래 브랜드페이 모달이 뜨는 웹뷰에 about:blank를 띄운 후(잠시 하얀 화면), 브랜드페이 화면으로 이동했는데요.
RN +iOS about blank가 안뜨게 되면서, history를 쌓을 수 없어 기존 에러가 발생했어요.
그래서 1.5.2-alpha.1에는 처음에 about:blank 대시 아래 화면 중 띄워주게 됩니다.
1. 인터페이스에 직접 세팅해두신 redirectUrl
2. sdk 원본 파일 내 세팅할 수 있는 baseUrl
이 중 1번으로 할 경우 sdk단에서는 별도로 작업하실게 없습니다. 세팅한 redirectUrl이 잠깐 화면에 떴다가 브랜드페이로 이동하게 되는데요 (CORS 이슈 때문에 가맹점 도메인 화면을 거쳐가야함)
상황에 따라 accessToken발급요청 에러메세지가 나타날 수 있으니 이부분 검증해보시면 좋을 것 같아요.
2번은 about:blank를 대체할 페이지를 서버내 직접 생성해두고, sdk 원본파일을 수정해서 baseUrl에 박아두는 방식입니다.
2번으로 진행 희망하실 경우 이어서 안내드릴게요
넵 확인해보고 말씀드리겠습니다
2번으로 진행하는 방식도 혹시 알려주실 수 있을까요?
1.5.2-alpha.1 으로 올리고, node_modules에서 아래 코드 변경.
node_modules/@tosspayments/widget-sdk-react-native/src/components/RequestPaymentsModal.tsx 40라인
AS-IS
TO-BE
40라인을 위와 같이 수정해주시면 됩니다.
이 경우 node_modules를 직접 수정하는 것이므로,
타 기기에서 라이브러리 설치(npm i)시마다 해당 부분 수정을 거쳐야하고
Yarn berry 환경에서는 적용이 불가능한 점 참고 부탁드립니다.
네 해당 부분으로 해결이 되면, 실제 1.5.2에서는 Interface로 받는 등으로 개선할 수 있습니다.
ios 테스트플라이트에 배포해서 실기기에서 돌려본 결과 같은 문제가 발생합니다.
2번 방법은 제약사항이 있어서 아무래도 적용하긴 어려울 것 같습니다.
아 그럼 테스트 기기에서 발생한 customerKey랑 테스트 시간대 알려주시겠어요?
customerKey: 3e5f6ada-8dac-4628-b22e-abcdca2769e8
시간대가 정확하지 않아서 방금 테스트했고 4시 26분입니다
에러로그 찍힌건 없으시죠? 콘솔이나 네트워크에요
아 넵 따로 찍힌건 없었어요.
시뮬레이터에서 node_modules sdk RequestPaymentsModal onFail에 넘어온 값은 code: 400, message: "", orderId:unknown
이렇게 뜨긴했습니다.
아 onFail 로 넘어갔나요?
그럼 또 다른 문제이긴한데요..
우선 남겨주신 내용 로그 확인해볼게요
오전에는 따로 확인할게 있어 오후에 확인해볼게요! 감사합니다.
@유정 실기기도 onFail로 이동했나요?
그런데 requestPayments말고 카드 추가하기 눌렀을 때도 바로 내려오는거죠?
설치한 node_modules 패키지에서 실행되는 런타임 에러로그를 캡쳐해보진 않았습니다.
시뮬레이터에서 확인했을때는 모듈이 열리는 상황에서 모두 발생했습니다.
@유정 의심되기로는 등록해두신 redirectUrl을 get으로 직접 접속하면 400에러가 뜨더라구요
그런데 초기화면을 redirectUrl을 잠깐 띄웠다가 넘어가다보니 발생하는게 아닐까 싶어요
그럼 blank page option o주입할 수 있게 처리 한번해보렉요
혹시 리다이렉트url을 getparam없어도 400안나는 것 하나 더 추가해서 테스트 해보실 수도 있을까요?
어떻게 하면될까요?
협조에 감사드립니다.
아 넵 확인했습니다
getparam을넘기면 페이지 접근자체느 ㄴ되더라구요
메시지 복사했습니다. 테스트해보고 말씀드리겠습니다.
아하 네넵, 확인해보고 말씀드리겠습니다.
그리고 혹시 v2 를 react-native로 구성하는 sample 코드가 있을까요?
v1에서 동작하는 방식하고 동일하게 v2를 작업해보려합니다.
다만 작업과정에서 어떻게 처리해야할지 공식문서에는 레퍼런스가 없어 작업에 어려운 부분이 있어서 혹시 관련해서 sample 코드가 있을지 문의드립니다.
rn sdk는 v1기반으로만 제공하고 있습니다.
웹서버로 url 연동해서 띄우는 방법으로 rn에서 제어 할 수 있는 방법이 없나요?
마지막 질문은 이해를 못햇습니다. 웹뷰에서 웹서버 통으로 띄운다는 마릈ㅁ이시죠?
제공해주신 rn sdk v1에서 처럼 일부 컨텐츠 항목으로 webview에 url 연결해서 화면을 띄우고, 브랜드페이 UI 내 이벤트가 발생되면 이 후 동작과정을 rn 모달로 띄우려고 합니다.
그런 경우 2개의 webview 화면이 실행되어 제어가 필요한데, 이런 부분에 대한 sample 코드는 따로 없는건지? 궁금합니다.
https://docs.tosspayments.com/guides/v2/brandpay
rn을 위한 가이드는 없고, 어차피 url을 띄우는거라면 js sdk 연동가이드 참고하시면 될 것 같아요
브랜드페이 이해하기 | 토스페이먼츠 개발자센터
브랜드페이로 내 상점만의 자체 간편결제를 구현해보세요. 브랜드페이가 제공하는 기능과 구현 방식을 소개합니다.
아 넵, js 연동가이드를 통해 작업을 해보려는데요.
제가 궁금한 부분은 webview에서 위젯으로 띄운 브랜드페이 UI에 카드 등록 또는 설정과 같은 버튼을 눌러 이벤트가 발생했을 때, 해당 화면에서 iframe이 dimmed 되어 선택한 이벤트에 대한 화면이 띄워지는데, 이 부분을 띄우지 않고 제가 원하는 이벤트를 발생시키고 싶다면 어떻게 할 수 있을지? 궁금하고, 만약 그런 부분을 지원하지 않는다고 하면, rn에서 어떤식으로 해당 이벤트를 막을 수 있을지 가이드가 있을까요?
아 그럼 위젯을 제외하고 생각하셔야할 것 같아요. 위젯 이벤트는 catch가 안되서요
1. 기존 위젯이 제공하던 UI는 직접 구현
아래 2개 API 사용
- 결제수단 조회(필수) https://docs.tosspayments.com/reference/brandpay#secretkey로-결제수단-조회
- 할부 관련(선택) https://docs.tosspayments.com/reference/brandpay#카드-프로모션-조회
2. 직접 구현된 UI에서 아래 method들 활용
https://docs.tosspayments.com/sdk/v2/js#브랜드페이
브랜드페이 API | 토스페이먼츠 개발자센터
브랜드페이에서 제공하는 API 엔드포인트(Endpoint)와 객체 정보, 파라미터, 요청 및 응답 예제를 살펴보세요.
토스페이먼츠 JavaScript SDK | 토스페이먼츠 개발자센터
토스페이먼츠 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
앗 그렇군요.. 확인감사합니다.
하나만 더 질문드리겠습니다.
sdk 레퍼런스를 보면 v1, v2가 있고, v1에 들어가면 "결제위젯 SDK v1은 더 이상 업데이트되지 않습니다" 라고 써 있는데, 결제위젯 RN SDK v1은 계속해서 지원이 되는건가요?
네 지원종료는 아니구요
Maintenance Mode라고… v1는유지보수 지원은 됩니다. Major Update가 일어나지 않을뿐입니다.
그럼 다른 패키지(expo 등 기타 rn 관련)의 새로운 버전에 따라 만약 이번과 같은 오류가 일부 버전에서 발생한다면, 계속해서 지원이 되는걸까요?
그렇습니다
넵 감사합니다~
엄청 빠르게 즉시즉시 대응은 안될수도 있긴한데(Maintenance Mode이므로 리소스 투입이 줄어듬)
지원은 될겁니다~ 지금도 지원을 해드리고 있으니까요
@유정 400안나는 페이지로 천천히 확인만 한번 부탁드려요~
안녕하세요 @이실장
이번에 RN 버전 업데이트를 하게 되면서 잘 되다가, 저도 위와 같은 브랜드페이를 오픈할 때 null is not an object (evaluating history.state.tosspayents)
에러가 아래와 같은 환경에서 발생했습니다.
expo: 52.0.47
react-native: 0.76.9
widget-sdk-react-native: 1.5.1
tosspayments-sdk: 2.5.0
tosspayments-react-native-webview 1.0.1 (삭제했는데도 안됨)
그래서 위와 같이 제안해주신대로, widget 버전을 아래와 같이 다운그레이드 했더니 브랜드페이는 다시 정상 동작합니다.
expo: 52.0.47
react-native: 0.76.9
widget-sdk-react-native: 1.4.0
tosspayments-sdk: 2.5.0
tosspayments-react-native-webview 1.0.0
다만, 위의 두 환경 모두에서, 일반 결제 > 신용카드 결제할 때는
paymentWidgetControl
.requestPayment?.({
orderId: data.uuid,
orderName: renderProductTitle(),
customerName: user.name,
// customerMobilePhone: user.phone_number
})
.then((result) => {
console.log("theresult: ", result)
if (result?.success) {
// console.log("SUCCESS", result?.success)
// 결제 성공 비즈니스 로직을 구현하세요.
// result.success에 있는 값을 서버로 전달해서 결제 승인을 호출하세요.
paymentApprove.mutate({
orderId: result?.success.orderId,
payload: {
payment_key: result?.success?.paymentKey,
amount: result.success?.amount,
},
})
success result에 payment_key, amount 등 문서에 나온대로 필수인자들이 잘 오는데,
간편결제 중 카카오페이를 눌러서 .requestPayment를 할 때
아이폰 실기기에서 콘솔에 찍어보니,
theresult: {"success": {"additionalParameters": {}, "paymentType": "NORMAL"}}
success param에 additionalParameters 만 오고 있어서 오류가 발생합니다.
혹시 원인이 어떻게 될까요? 해결이 힘들어서 여쭤봅니다.
이상하게 간편결제 중 토스페이/페이코는 정상동작합니다.
상점아이디(MID): apappsgf8c
전달드립니다.
전달드립니다.
카카오페이만 그러나요...?
widget-sdk-react-native: 1.5.1
에서는 이상없고요?
네 위에 말씀드렸는데, 카카오페이의 경우 1.5.1에서도 requestPayment 요청 시
theresult: {"success": {"additionalParameters": {}, "paymentType": "NORMAL"}}
와 같이 success 인자에 payment_key, amount 모두 누락된채 return합니다 ㅠ
네 신기하게 카카오페이만 그럽니다 ㅠ
음 혹시 해당 케이스 주문번호 하나 공유해주실 수 있을까요?
네 이런 식으로 short uuid 형태입니다. 기존에 잘 됬어서 이상하네요..
6Expyca8nUH
다시 말씀드리면 동작이
1. 카카오페이 => reuqestPayment 호춣하게 되면, 웹뷰 모달이 로딩중으로 나오고 바로 종료되면서, result.success를 다음과 같이 이상하게
return합니다
theresult: {"success": {"additionalParameters": {}, "paymentType": "NORMAL"}}
2. 다른 간편결제(토스페이, 페이코) 등은 정상적으로 requestPayment를 호출하게 되면 간편결제 웹뷰 모달이 잘 표시되고 결제 할시 payment_key, amount 등 정상적인 값이 포함된 success response를 return합니다.
이해를 위해서 영상도 첨부합니다.
카카오페이는 아예 로딩도 안되는거군요?
테스트키로 하고 계시군요?
@dexterkim 이제 되시죠?
헛 이제 됩니다..ㅎㅎ
1. 테스트환경에서만 발생하는 내부적인 문제였을까요?
2. 위에 브랜드페이 안되는 문제는 widget-sdk-react-native: 1.5.1 를 1.4.0 으로 다운그레이드하는 방향으로 해결했는데 해당 부분 혹시 다른 문제 발생 가능한 부분 있을까요? 다운그레이드해서 프로덕션에서 사용해도 될지 조금 불안해서 side effect가 있는지 혹시 여쭤봅니다 ㅠ
카카오페이는 테스트환경 세팅이 안되어있으셨네요. 아마 계속 발생했을거에요.
다운그레이드가 문제는 발생하지 않을거에요.
1.5.2-alpha.1 로 저희가 일부 해결한게 있는데 한번 올려서 테스트해보실 수 있을것 같아요
테스트환경 세팅은 제가 어드민에서 따로 할 수 있는 부분일까요? 어디서 볼 수 있는지 궁금합니다
1.5.2-alpha.1 로 저희가 일부 해결한게 있는데 한번 올려서 테스트해보실 수 있을것 같아요
=> 네 한번 테스트해보겠습니다
먼저 안내드리면 햇갈리실 것 같아
일다 ㄴ올려서 확인해보시면 이어 설명드릴게요
네 제가 그
<PaymentWidgetProvider
clientKey={Config.TOSS_PAYMENTS_WIDGET_CLIENT_KEY}
customerKey={user?.toss_payments_customer_key}
options={{
brandpay: {
redirectUrl:
${Config.API_URL}/shop/toss_payments_auth_callback,
},
}}
>
RedirecUrl을 화면이 아니라 서버 api로 하고 있는데 그렇게 되면 어려운걸까요? 클라이언트 페이지를 redirectUrl에서 해야하는지요
일단 올려서 해보겠습니다아뇨 전혀 문제없는데요
처음에 브랜드페이 카드등록 등 화면이 뜰 때
"${Config.API_URL}/shop/toss_payments_auth_callback" 이 페이지가 잠깐 떴다가 이동할거에요
그페이지가 잠깐 떳따가 이동하는게 문제 없으면 그대로 쓰셔도 무방합니다.
아 네네 근데 그 서버 API response가 html 페이지가 아니고,
@action(methods=['GET'], detail=False)
def toss_payments_auth_callback(self, request, uuid=None):
code = request.query_params.get('code')
customer_key = request.query_params.get('customerKey')
if code and customer_key:
response = toss_payments_api.issue_brandpay_access_token(
code=code,
customer_key=customer_key
)
user = User.objects.filter(toss_payments_customer_key=customer_key).first()
if user:
user.toss_payments_brandpay_access_token = response['accessToken']
user.toss_payments_brandpay_refresh_token = response['refreshToken']
user.toss_payments_brandpay_access_token_expires_at = timezone.now() + datetime.timedelta(
seconds=response['expiresIn'])
user.save()
return Response(response)
그냥 callback받아서 토큰값을 저장하고, JSON Response를 돌려주고 있어서요
네 그건 상관없어요. 그냥 cors를 위해서 최초 귀사 도메인을 호출후 이동하는거여서요
대신 ${Config.API_URL}/shop/toss_payments_auth_callback이게 뜰때
화면에 에러메세지등이 잠깐 뜨면 이상할 수 있어서
우선 한버 ㄴ확인해보심 좋을 것 같아요
네 일단 한번 해보겠습니다!
저라면 만약에 아무 파라미터 없이 요청되면
빈 흰색 페이지를 응답으로 뱉어줄 것 같네요
안녕하세요, django 서버를 사용하고 있는데 HTML Response가 아닌 그냥 rest framework 빈 200 Response를 돌려주는데 정상동작하네요!
늦은 시간에 빠른 도움 정말 감사드립니다
django라면 그냥 return “”으로도 빈 HTML을 내려줄거에요, 헤더만 잘 지정한다면
네 잘되네요 ㅎㅎ
참고로 200 응답을 내는건 보장해야합니다. 204 No Content 같은 빈 응답이라는 status code 내려가면 about:blank로 빠지기 때문에 앱에서 추후에 문제가 재발할 수 있어요
네네 200으로 주고 있습니다, 검토 감사합니다 🙂