페이먼츠 위젯 불러오기 안됨
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();
}
}, []);
콘솔에서 확인되는 오류 화면도 첨부합니다. 문제가 무엇일까요?
44 Replies
{/* 결제 위젯 /}
<div
id="payment-widget"
style={{ width: '100%' }}
/>
{/ 개인 정보 동의 */}
<div id="agreement" style={{ width: '100%' }} />
화면에는 이렇게 반환하고 있습니다
payment-widget이라는 아이디를 가진 일레멘트가 있는지 확인 부탁드립니다
아 있는군요
네네ㅠ
개발자 도구로 inspect해보셨을까요
콘솔 말씀이신가요?
해당 에러에 대한 이미지 첨부했습니다
일레멘트 탭 확인해 달라는 뜻이었어요
일레멘트 탭에서 해당 div가 존재하는지 확인이 필요해요
있습니다
화면에는 전혀 보이지 않아요
아 혹시
위젯에 들어가는 금액이 0원이면 아예 위젯이 생성되지 않는 것인가요?
네 그렇습니다만 오류가 다르게 나와야 할거 같은데요.
3000원 같은 금액으로 지금 한번 넣어보시겠어요?
네 잠시만요
한 3~5분 정도 후에 이미지 남기겠습니다
.
payment-widget은 아까와 같이 존재합니다
사용하시는 npm library 버전이 어떻게 되세요?
어떤 라이브러리 말씀이시죠?
"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 에 # 넣어보세요~
아 잠시만요
@박성화
Widget 로드하는 코드에서 #을 지워 보세요
넣는게 아니라 지워야 하는것 같아 보입니다
금액 0이면 당연히 안되고, body div id 명시한곳에 # 이 누락 되어 있는것 같아요~
그건 원래 selector가 id 값이면 #이 붙으므로 무관한 문제입니다만
아~ 그런가요?
일단 샵넣어도 안되긴 합니다
renderPaymentMethod와 renderAgreement에서
#을 빼보세요
네 querySelector 함수와 css selector 표준에는 id 는 #, class는 . 으로 prefix 하는것으로 나와있어요
30분 안에 결제 페이지 개발하기 (ft. 결제위젯)
어려운 결제 연동, 토스페이먼츠가 결제위젯으로 쉽게 풀어드려요!
그렇네요 ㅎㅎ 감사합니다~
안됩니다ㅠ
혹시 몰라서 #을 빼보라고 가이드를 드린건데
아아 안되시는 군요
혹시
위젯 관련 div 엘리먼트가 생성되는게 useEffect 이용 시기보다 더 느려서 그런것일까요?
그렇다면, 가능합니다
그럼 useEffect의 dependency에 html 엘리먼트를 넣는 방법이 있나요?
그건 조금 어렵습니다.
그럼 좋은 방법이 있을까요?
div 생성 후 위젯 호출 코드를 실행하도록 해보세요
네 방법은 고민 좀 해보겠습니다.
아니면 이 방법도 있습니다.
GitHub
payment-widget-sample/nextjs/src/pages/index.tsx at 20c100d6ccfd22d...
토스페이먼츠 결제위젯 샘플 앱입니다. . Contribute to tosspayments/payment-widget-sample development by creating an account on GitHub.
이 파일 참고하셔서 useAsync 사용하도록 수정해 보시면 될거 같습니다
해당 ref도 모두 똑같이 설정했습니다. 애당초 샘플 프로젝트 보고 가져온거라서요
지금 dependency를 줄 수 있는 방법을 찾고 있습니다.
useAsync는 해당 라이브러리에서 이용한 커스텀 훅인가요?
callback ref로 해결했습니다
useEffect 의존성에 ref를 담을 때마다 찜찜하신 분들을 위해
useEffect에 ref를 의존성으로 추가하는 것이 어떤 문제가 있는지, 해결 방법은 무엇인지 알아봅니다.
라이브러리 업데이트에 도움이 될까 해서 참고한 링크도 드립니다.
import { useAsync } from "react-use";
react-use library의 hook입니다!
공유해 주셔서 감사합니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.