토스 페이먼츠 브랜드페이 연동문의
안녕하세요
브랜드 페이 연동해서 사용하고 있었는데
은행 선택 화면이 흰 화면으로 표시되는 문제가 있어 문의드립니다.
import { loadBrandPay } from '@tosspayments/brandpay-sdk';
const brandpay = await loadBrandPay(
process.env.NEXT_PUBLIC_TOSSPAYMENT_CLIENT_KEY,
userId,
{
redirectUrl: process.env.NEXT_PUBLIC_TOSSPAYMENT_REDIRECT_URL,
ui: {
highlightColor: '#16181B',
buttonStyle: 'full',
navigationBar: {
visible: false,
paddingTop: 0,
},
},
windowTarget: 'iframe',
},
);
로 브랜드 페이를 호출하는데요.
혹시 원인을 알 수 있을까요?
저희가 확인한 바로는 디바이스에 따라 어떤 디바이스는 정상 작동하고 어떤 디바이스에서는 브랜드페이가 흰 화면으로 노출됩니다.
21 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
흰 화면으로 뜨는 현상 화면 기록입니다
혹시 브랜드페이가 안된다면 수동으로라도 넣을수 있는 방법이 있을까요?
Client: Flutter
Server: next.js
클라이언트에서 웹뷰를 통해 서버쪽으로 URL을 날리면 서버가 브랜드페이를 호출하는 방식입니다!
보내주신 동영상은,
새 계좌 등록 버튼을 클릭 했을때,
addPaymentMethod 를 호출 하는 동영상 인가요?
아니면, requestAgreement 를 호출하는 동영상 인가요?
코드 전문은 이렇습니다!
import React, { useEffect, useState } from 'react';
import { loadBrandPay } from '@tosspayments/brandpay-sdk';
import { useRouter } from 'next/router';
const IndexPage: React.FC = () => {
const router = useRouter();
const [message, setMessage] = useState('');
async function payment() {
const userId: string = router.query.user_id as string;
const isMain: string = router.query.is_main as string;
console.log(router.query);
const brandpay = await loadBrandPay(
process.env.NEXT_PUBLIC_TOSSPAYMENT_CLIENT_KEY,
userId,
{
redirectUrl: process.env.NEXT_PUBLIC_TOSSPAYMENT_REDIRECT_URL,
ui: {
highlightColor: '#16181B',
buttonStyle: 'full',
navigationBar: {
visible: false,
paddingTop: 0,
},
},
windowTarget: 'iframe',
},
);
try {
await brandpay.requestAgreement('빌링'); // 자동 결제 선택 약관 동의 호출
await brandpay.addPaymentMethod('미선택');
const methods = await brandpay.getPaymentMethods();
const addResult = await fetch('/api/v1/payment/add', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
user_id: userId,
methods: methods,
is_main: isMain,
}),
});
console.log(addResult);
(window as any).Print.postMessage('close');
} catch (error: any) {
// console.log(error);
if (error.code === 'USER_CANCEL') {
// 사용자가 결제창을 닫은 경우 에러 처리
}
}
}
useEffect(() => {
if (router.query.user_id) {
payment();
} else {
// setMessage('사용할 수 없습니다.\n고객센터에 문의해주세요');
}
}, [router]);
return <div></div>;
};
export default IndexPage;
리액트에서 브랜드페이를 로드하고
await brandpay.requestAgreement('빌링'); // 자동 결제 선택 약관 동의 호출
await brandpay.addPaymentMethod('미선택');
를 순차적으로 호출하고 있습니다
requestAgreement 제외 하고, addPaymentMethod 단독 호출에는 문제 없으신것 맞을까요?
addPaymentMethod 만 단독 호출해서 테스트 해보겠습니다
위 테스트 결과 안되던 환경에서 동작 되는것을 확인했습니다.
근데 동의 절차 제외하고 바로 addPaymentMethod를 호출해도 되는건가요? (정책 차원)
<추가 의문 사항>
앱 버전 및 sdk 업데이트 전혀 없었고, api 조차 업데이트가 없었습니다.
항상 잘되던것인데 일요일 새벽부터 문제가 있는것 같습니다.
저희 내부 팀원들도 잘되었었는데 흰화면만 보이며 안되는 분이 5명중 4명입니다..!
일단은 빠른 조치 위해 이렇게 해도 되는지 먼저 답변 주시면 감사하겠습니다.
자동결제 동의를 등록전에 반드시 받고 싶으신 것 이시죠?
로그 확인 위한 MID 하고 customerKey 도 전달 주실 수 있을까요?
참고를 위해 테스트 영상 하나 더 드립니다. @유부장
아까 드린 영상과 동일하게 "흰화면" 증상인데
저는 아주 잠깐 깜빡하며 은행 리스트가 보이고 흰화면이 나옵니다.
네, 영상 감사합니다
MID 하고 customerKey 도 전달 주실 수 있으실까요?
@유부장
- MID : cp_epic1011
- customerKey : d709021f-9f5e-4d73-bf94-722c2349a4b1
js console 이나 network쪽에 별도 에러는 없나요?
확인후 말씀드리겠습니다!
@이실장 cc @epiccorp
해당 흰화면에서 딱히 에러로그가 나오진 않습니다.
(단, 혹시 로그가 출력이 안되는건지 상세 확인중)
다만 로그 확인 시도 중에 [동일환경] 인데
3회 중 1회는 계좌선택화면이 잘뜨고 2회는 계속 흰화면이 뜨네요..!
네 우선 저희 쪽에서 확인 후에 회신드리겠습니다.
await문으로 순차 호출하는 부분에서 에러 발생하는 것으로 보이며, 이부분 급하게 손볼 예정입니다.
지금 다시 한번 확인해보시겠어요?
< 폰 3개로 테스트 중 > @이실장 cc @epiccorp
- A : 5회 시도, 모두 정상
- B : 5회 시도, 모두 정상
- C : 5회 시도, 모두 정상
@이실장 cc @epiccorp
이제 정상화 된것으로 보입니다.
결국 되던게 안되던 이유가 토스페이먼츠 측 시스템 이슈인것 같은데
운영에는 크리티컬한 내용이라
1. 내부 임원진 리포트 보고
2. 실제 고객들(50여명 예상) 에게 일시 오류 및 복구 안내
를 위해 아래 정보를 요청드립니다.
1. 일시적 문제 이유
2. 문제 기간 (언제부터 언제까지 이 await 문제가 발생했는지)
메일 주소 공유해주시면 관련해서 원인 확인 후 공유드리겠습니다.
💡 정보 제출
민감 정보를 안전하게 제출해주세요
seongsoo.moon@epiccorp.io, cto@epiccorp.io 입니다.
오늘 중 메일로 전달드리겠습니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.