플러터 브랜드 페이 결제창이 나타나지 않아요
webview를 활용하여서 브랜드 페이를 구현중입니다.
공식 문서에 있는 클라이언트키와 customerKey로 했을 때는 결제창이 나타나는데( const clientKey = 'test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm'
const customerKey = "S0rnfmOBNT9AU5JBNE5q0" )
제 상점에 있는 clientKey와 customerKey로 했을 때는 결제창이 나타나지 않습니다.
redirectUrl 은 https://localhost:3000 로 설정하였습니다.
102 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
redirectUrl을 localhost로 해서 그렇습니다.
redirectUrl에서 Token을 받을 수 있도록 작업해주셔야해요
아 그런가요?
그리고 사용한 clientKey가 어떤건가요
브랜드페이 계약은 하셨나요?
현재 계약중입니다.
계약 완료 전일까요?
계약전에 테스트키로 진행하고 있었습니다.
네 완료 전입니다.
💡 정보 제출
민감 정보를 안전하게 제출해주세요
일반결제수단 영역은 렌더링 되는데
브랜드페이 영역이 안되는거죠?
캡처 하나 요청드려요
네 바로 드릴게요
우선
정확한 원인 확인을 위해서는 console log 확인이 필요합니다.
키만 바꾸면 정상적으로 모든게 다 되나요?
네 근데 결제수단을 등록하기 버튼을 누르니 사용할 수 없는 결제수단이 없다고 뜹니다.
공식 홈페이지에 있는 코드를 그대로 갖다 쑤면
브랜드페이 영역은 안보이겠죠?
chrome://inspect/#devices
우선 위 방법 등으로 js console log를 확인해보세요
이렇게 뜹니다.
근데 여기서 클라이언트 키와 커스토머키를 바꾸면 저렇게 안보입니다.
위 화면은 그런데 flutter sdk쓰신게 아니라
웹뷰에다가 웹서버 띄우신건가요?
근데 화면이 안뜨는거는 redirectUrl과 관련이 있는건가요?
redirectUrl은 일단은 결제창이 나오고 나서 필요한 거 아닌가요
네 맞습니다.
웹서버면.. 우선 consolelog 확인해보세요
sdk에도 브랜드 페이가 있나요?
일단 이 에러먼저 확인하ㅣㅅ죠
console 에러 확인해주세요
네 알겠습니다.
요청은 언제 하셨나요?
오늘 계약요청 했습니다.
variantKey는 어떻게 보내시고 계신가요
paymentRequestHTML 에
paymentWidget.renderPaymentMethods(
"#payment-method",
{ value: 50000 },
// 렌더링하고 싶은 결제 UI의 variantKey
// 아래 variantKey는 문서용 테스트키와 연동되어 있습니다. 멀티 UI를 직접 만들고 싶다면 계약이 필요해요.
// https://docs.tosspayments.com/guides/payment-widget/admin#멀티-결제-ui
{ variantKey: "BRANDPAY" } // 브랜드페이와 일반결제가 함께 보이는 결제 UI의 variantKey
// { variantKey: "BRANDPAY_ONLY" } // 브랜드페이만 추가된 결제 UI의 variantKey
)
이렇게 보내고 있습니다.
우선 variantKey를 잘못보내고 있습니다.
귀사 상점관리자에 결제UI설정 보면
variantKey는 default밖에 없습니다.
그리고 clientKey는 결제위젯 연동키를 사용하세요
코드를 복붙해서 그대로 쓰시지마시고, docs 연동하기 쪽을 한번 훑어보시길 추천드립니다
네 감사합니다. 말씀해주신대로 하니 잘 뜹니다.
밤늦게 감사합니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
결제수단을 등록하려고 redirectUrl을 firebasefunctions를 통해 배포해서 등록하였습니다.
url은 https://us-central1-unicial-c5719.cloudfunctions.net/brandPay
이고,
app.get('/callback-auth', async (req, res) => {
await axios.post(
"https://api.tosspayments.com/v1/brandpay/authorizations/access-token",
JSON.stringify({
grantType: "AuthorizationCode",
// Access Token 발급을 위해 리다이렉트 URL에 포함되어 돌아온 code와 customerKey 전달
code: req.query.code,
customerKey: req.query.customerKey,
}),
{
headers: {
// [TODO] Basic 인증 방식의 사용자명과 비밀번호는 콜론으로 구분해서
사용자명:비밀번호로 추가합니다. 상점의 시크릿 키를 사용자명으로, 비밀번호는 공백으로 추가한 뒤 base64로 인코딩하세요.
// 문서: https://docs-staging.tosspayments.com/guides/brandpay/auth#2-브랜드페이-access-token-요청
Authorization: Basic ${Buffer.from(SECRET_KEY + ":", "utf8").toString(
"base64"
)},
"Content-Type": "application/json",
},
}
);
// 성공(HTTP status 200) 응답
res.status(200).send('OK')
})
위와 같은 함수로 작성하였습니다.
그런데, const paymentWidget = PaymentWidget(clientKey, "customerKey122", {
// 결제위젯에 브랜드페이 추가하기
brandpay: {
// Access Token 발급에 사용되는 리다이렉트 URL
redirectUrl: "https://us-central1-unicial-c5719.cloudfunctions.net/brandPay/callback-auth"
}
})
이렇게 해서 웹뷰를 실행하고, 결제 수단을 등록해도 redirectUrl로 이동을 하지 않는 것 같습니다. 계좌번호를 등록하고 "동의하고 다음"을 눌렀을 때 바로 전 화면(결제수단 등록)으로 돌아가서 아무런 반응이 없고 다시 웹뷰를 재시작하면 결제수단이 등록되려는 듯한 로딩화면만 계속 나옵니다. (아래의 사진)
우선 지금 복붙한 코드 참고한 링크 공유해주시겠어요?
이 사이트 참고했습니다.
redirectURL은 이동하는 곳이 아닙니다.
뒷단에서 통신하면서 accessToken만 발급받는거에요
accessToken발급이 제대로 안되었을 것으로 보입니다.
secretKey사용한거 제출해주세요
💡 정보 제출
민감 정보를 안전하게 제출해주세요
클라이언트가 redirectUrl로 이동하면서 accessToken get요청을 하는걸로 이해했는데, 아닌가요?
sever to server통신입니다
그래서 지금 기기에서 받고있는 것은 동작할 수가 없습니다.
redirectUrl을 로컬호스트로 한 것이 아니고 NodeJs로 만들어서 배포했습니다. 잘못한건가요?
서버쪽 에러나, 클라이언트쪽 에러를 같이 전달주셔야 토스페이먼츠 쪽에서도 더 자세히 답변 주실수 있지 않을까요?
redirectUrl 에 대해서 좀만 자세히 설명만 해주시면 제가 해결해 보겠습니다. 이 부분을 잘 이를 못하겠습니다.
지금
주신 dartcode에서
accesstoken발급을 위한 api 호출을 하는데 맞으시죠?
저 부분은 함수를 만들어 놓았는데 호출은 안하고 있습니다.
호출을 하려면 공식문서 읽어보면 https://{ORIGIN}/auth?code={CODE}&customerKey={CUSTOMER_KEY} 여기 있는 코드를 얻어야 하는데 이 코드를 어떻게 얻어야하는지 감이 안옵니다.
우선
api호출을
공식 문서에 클라이언트가 결제정보를 등록하면 redirectUrl로 이동한다고 되어 있는데, 이말뜻을 제가 이해를 못하고 있는거 같네요 ㅠ
redirecturl에서 해주시면되고
저희가 redirectUrl get param으로 code/customerKey를 보내드려요
이건 server to server로 백단에서 통신하고요
네 그렇게 만들어놓았씁니다.
app.get('/callback-auth', async (req, res) => {
await axios.post(
"https://api.tosspayments.com/v1/brandpay/authorizations/access-token",
JSON.stringify({
grantType: "AuthorizationCode",
// Access Token 발급을 위해 리다이렉트 URL에 포함되어 돌아온 code와 customerKey 전달
code: req.query.code,
customerKey: req.query.customerKey,
}),
{
headers: {
// [TODO] Basic 인증 방식의 사용자명과 비밀번호는 콜론으로 구분해서
사용자명:비밀번호로 추가합니다. 상점의 시크릿 키를 사용자명으로, 비밀번호는 공백으로 추가한 뒤 base64로 인코딩하세요.
// 문서: https://docs-staging.tosspayments.com/guides/brandpay/auth#2-브랜드페이-access-token-요청
Authorization: Basic ${Buffer.from(SECRET_KEY + ":", "utf8").toString(
"base64"
)},
"Content-Type": "application/json",
},
}
);
// 성공(HTTP status 200) 응답
res.status(200).send('OK')
})그럼 여기서 정상적으로 token이 발급되고 있는지 한번 log를 찍는 등 확인 우선 해보시겠어요
하나 여쭙고 싶은게, 공식 문서에 있는 "구매자가 카드・계좌 정보를 등록하고 이용약관에 동의하면, 클라이언트가 redirectUrl로 이동해요. redirectUrl에는 다음과 같이 code, customerKey 쿼리 파라미터가 있어요." 이 말이 구매자가 결제 정보를 등록하면 redirectUrl로 이동해서 엑세스토큰 발급을 시도한다고 이해하는게 맞나요?
공식 문서 링크 한번 공유해주시겠어요?
위에 말씀드린대로 클라이언트 페이지가 이동하지 않고
back단에서 서버to서버로 통신합니다.
이건 문서 팀에 확인 요청해둘게요
제가 설정한 redirectUrl(baseUrl+/callback-auth) 로 백단에서 get요청을 한다는 말씀으로 이해해도 되는건가요?
네
const paymentWidget = PaymentWidget(clientKey, "customerKey1234", {
// 결제위젯에 브랜드페이 추가하기
brandpay: {
// Access Token 발급에 사용되는 리다이렉트 URL
redirectUrl: "https://us-central1-unicial-c5719.cloudfunctions.net/brandPay/callback-auth"
}
})
이렇게 redirectUrl을 설정하고 결제수단 등록을 시도해도 이 endPoint에 서버 요청을 하지 않습니다.
서버요청자체가 없어서 에러메세지를 보여드릴수도 없습니다. ㅠ
^^
개발자센터에서 redirectUrl 등록을 안하셨네요
죄송합니다..
console창에 리다이렉트 URL이 등록되지 않았습니다. 개발정보 페이지에서 등록해주세요. 이 오류 안 보이실까요 ?
확인하겠습니다.
어제도 안내드렸지만 연동 편의성을 위해 console창에 확인하실 수 있는 에러를 계쏙 내려드리고 있습니다~!
참고하시면 훨씬 연동하시기 편하실거에요~
여기 말씀하시는거라면 등록을 했는데 뭘 잘못한걸까요?
/callback-auth
가 빠졌네요
말씀해주신대 로그를 확인해보니,
console.log(req.url);
console.log("code:", req.query.code);
console.log("customerKey:", req.query.customerKey);
console.log("method:", req.method);
이 로그에서
/callback-auth?code=gMGZzorzYJ199xBbPVl5E1em&customerKey=customerKey123456
code: gMGZzorzYJ199xBbPVl5E1em
customerKey: customerKey123456
method: OPTIONS
이렇게 표시됩니다. 요청은 제대로 들어온 거 같은데,
/callback-auth 미들웨어로 넘어가지를 않습니다.
/callback-auth는 호출되었는데요 method: GET 요청으로 들어온 로그는 확인되지 않으실까요?
네
app.use(async (req, res, next) => { 여기 로그는 확인이 되는데, // Access Token 발급 받기 app.get("/callback-auth", async (req, res) => { 여기 로그는 확인이 안됩니다.
app.use(async (req, res, next) => { 여기 로그는 확인이 되는데, // Access Token 발급 받기 app.get("/callback-auth", async (req, res) => { 여기 로그는 확인이 안됩니다.
그건 내부적으로 확인을 하셔야 합니다. 저희는 URL 만 호출해 드리고 그 URL 이 nodejs 에서 왜 잘못처리 되는지는 해당 node 코드를 봐야 해서요.
accessToken까지 잘 발급이 되었는데, 결제수단을 등록했을 때, 로딩창만 뜨고 결제수단이 보이지가 않습니다. 테스트 환경이라 그런건가요?
테스트환경에서도 잘 보여야하는데요, 결제수단 등록하신 customerKey 남겨주시면 확인해보겠습니다.
감사합니다.
sdfjlkdsf 입니다.
결제수단 등록은 성공하신 건가요?
해당 증상에 대해서 영상을찍어서 공유해주세요.
이런 상황입니다. 결제수단이 나오지 않고 이 화면만 나옵니다.
커스토머키 : sdfjlkdsf
지금
웹뷰에 웹서버 띄우는게 아니라
flutter local 에다가 html 소스 직접 그리고 계신거죠?
네 맞습니다.
그럼 cors때문에
redirectURL이 호출이 안될거에요
웹뷰에 웹서버 띄울게 아니라면
저희 sdk 로 연동해주셔야합니다.
여기서도 브랜드 페이 가능한가요?
네
제가 이거 말고 tosspayments_sdk_flutter 이거는 이미 사용중인데 이것도 브랜드페이 사용가능한가요?
아니요 안됩니다.
보시면 알겠지만 depreated되었습니다.
결제 자체는 어제 했을데 됐습니다.
네 기능은 되지만
더이상 유지관리 되지는 않고, 위젯은 새로운데에서만 사용가능합니다.
네 알겠습니다.
웹뷰 이슈가 있던거 같은데
0.1.12-beta.2
이버전 사용하면 되나요?
tosspayments_widget_sdk_flutter: ^1.0.3
major version 사용바랍니다
네 감사합니다.
UIState 를 dev로 하고 클라이언트키를 API 개별 연동키로 넣어서 시도했는데, 인증되지 않은 시크릿키 혹은 클라이언트키라고 뜹니다.
static final UIState _dev = UIState(
clientKey: '개별 api',
customerKey: 'CUSTOMER_KEY',
currency: Currency.KRW,
country: "KR",
amount: 50000,
redirectUrl: 'https://us-central1-unicial-c5719.cloudfunctions.net/brandPay/callback-auth',
variantKeyMethod: 'DEFAULT',
variantKeyAgreement: 'AGREEMENT',
);이렇게 입력했습니다.
GitHub
payment-widget-sample/flutter at main · tosspayments/payment-widget...
토스페이먼츠 결제위젯 샘플 앱입니다. . Contribute to tosspayments/payment-widget-sample development by creating an account on GitHub.
샘플앱 한번 실행해보시기 바랍니다.
감사합니다 참조하겠습니다.
여기서 결제수단 등록해서 브랜드페이를 하려면 결제 위젯으로 가야한거 맞나요?
brandpay SDK를 쓰셔도 되고, widget SDK를 쓰셔도 됩니다. 기존에 연동하시는 사진보니 widget을 쓰시는거 같네요.
여기에 결제수단 등록은 어떻게 해야하나요? 찾을수가 없네요..
브랜드페이 sdk에서는 사용할 계좌나 카드를 등록하는 기능이 있었는데 플러터 위젯에는 안보입니다
캡쳐를 해서 올려주세요 어떤 상황인지 말씀만으로는 알기가 어렵습니다.
여기서 결제수단 등록은 어떻게 해야하는건가요?
결제위젯을 눌러보세요.
계좌등록이나 카드등록같은 메뉴는 안보입니다
코드에 있는 클라이언트키 와 variant 키는 브랜드페이가 설정된 결제위젯키로 수정하셨나요?
네 클라이언트키 베리언트키 리다이렉트 url까지 입력했습니다..
다시 한번 확인해볼게요