페이먼츠 위젯 불러오기 안됨
next.js 로 페이먼츠 위젯을 불러오는 기능을 작동시키려고 하는데 콘솔에 error가 생기면서 위젯이 생성되지 않습니다. 코드는 아래와 같습니다.
useEffect(() => {
const setToss = async () => {
const clientKey = process.env
.NEXT_PUBLIC_TOSS_PAYMENTS_CLIENT_KEY as string;
const customerKey = myDatabaseId;
const paymentWidget = await loadPaymentWidget(
clientKey,
customerKey,
);
// 결제방법 UI
const paymentMethodWidget = paymentWidget.renderPaymentMethods(
'#payment-widget',
{ value: finalPrice, currency: 'KRW', country: 'KR' },
);
// 이용약관 동의 UI
paymentWidget.renderAgreement('#agreement');
paymentWidgetRef.current = paymentWidget;
paymentMethodWidgetRef.current = paymentMethodWidget;
console.log('widjet activated');
};
if (myDatabaseId != (null || undefined)) {
setToss();
}
}, []);
콘솔에서 확인되는 오류 화면도 첨부합니다. 문제가 무엇일까요?
17 Replies
{/* 결제 위젯 /}
<div
id="payment-widget"
style={{ width: '100%' }}
/>
{/ 개인 정보 동의 */}
<div id="agreement" style={{ width: '100%' }} />
화면에는 이렇게 반환하고 있습니다
네네ㅠ
콘솔 말씀이신가요?
해당 에러에 대한 이미지 첨부했습니다
있습니다
화면에는 전혀 보이지 않아요
아 혹시
위젯에 들어가는 금액이 0원이면 아예 위젯이 생성되지 않는 것인가요?
네 잠시만요
한 3~5분 정도 후에 이미지 남기겠습니다
.
payment-widget은 아까와 같이 존재합니다
어떤 라이브러리 말씀이시죠?
"dependencies": {
"@svgr/webpack": "^5.5.0",
"@tosspayments/payment-widget-sdk": "^0.9.0",
"@types/react-scroll-sync": "^0.8.3",
"@types/styled-components": "^5.1.12",
"axios": "^0.21.1",
"babel-plugin-styled-components": "^1.13.2",
"nanoid": "^3.1.25",
"next": "11.1.0",
"next-s3-upload": "^0.2.4",
"react": "17.0.2",
"react-daum-postcode": "^3.1.3",
"react-dom": "17.0.2",
"react-kakao-login": "^2.1.0",
"react-scroll-sync": "^0.9.0",
"react-spring": "^9.5.5",
"styled-components": "^5.3.0",
"swiper": "^9.3.2"
},
"devDependencies": {
"@types/react": "17.0.19",
"@typescript-eslint/eslint-plugin": "^5.0.0",
"@typescript-eslint/parser": "^5.0.0",
"eslint": "7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-next": "11.1.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"typescript": "^4.9.3"
}
}
토스 위젯 말씀이시라면 0.9.0 입니다.
해당 코드는 package.json 일부입니다.
div id 에 # 넣어보세요~
금액 0이면 당연히 안되고, body div id 명시한곳에 # 이 누락 되어 있는것 같아요~
아~ 그런가요?
일단 샵넣어도 안되긴 합니다
30분 안에 결제 페이지 개발하기 (ft. 결제위젯)
어려운 결제 연동, 토스페이먼츠가 결제위젯으로 쉽게 풀어드려요!
그렇네요 ㅎㅎ 감사합니다~
안됩니다ㅠ
혹시
위젯 관련 div 엘리먼트가 생성되는게 useEffect 이용 시기보다 더 느려서 그런것일까요?
그럼 useEffect의 dependency에 html 엘리먼트를 넣는 방법이 있나요?
그럼 좋은 방법이 있을까요?
네 방법은 고민 좀 해보겠습니다.
해당 ref도 모두 똑같이 설정했습니다. 애당초 샘플 프로젝트 보고 가져온거라서요
지금 dependency를 줄 수 있는 방법을 찾고 있습니다.
useAsync는 해당 라이브러리에서 이용한 커스텀 훅인가요?
callback ref로 해결했습니다
useEffect 의존성에 ref를 담을 때마다 찜찜하신 분들을 위해
useEffect에 ref를 의존성으로 추가하는 것이 어떤 문제가 있는지, 해결 방법은 무엇인지 알아봅니다.
라이브러리 업데이트에 도움이 될까 해서 참고한 링크도 드립니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.