리아
TPToss payments 개발자 커뮤니티
•Created by 리아 on 10/20/2023 in #❓┃연동개발-문의
클릭이벤트 감지
ui 변경은 아니고 클릭 시 바로 발생하는 이동을 막고 이동할 url만 가져와서 따로 처리하려고 문의드립니다!
7 replies
TPToss payments 개발자 커뮤니티
•Created by 리아 on 10/19/2023 in #❓┃연동개발-문의
variantKey 적용
정상작동합니다 감사합니다!
10 replies
TPToss payments 개발자 커뮤니티
•Created by 리아 on 10/19/2023 in #❓┃연동개발-문의
variantKey 적용
아 저희가 테스트 상점 키에서 실제 상점키로 바꾸지 않고 호출해서 그랬었나봐요
방금 키바꿔서 테스트하는데 아래와 같은 에러가 발생합니다.
clientkey는 test_ck_ZLKGPx4M3M4q1OzyJbo8BaWypv1o 사용중입니다.
"result": "ERROR",
"data": null,
"error": {
"code": "4009",
"message": "존재하지 않는 멀티 결제위젯입니다.",
"data": null
}
10 replies
TPToss payments 개발자 커뮤니티
•Created by 리아 on 9/20/2023 in #❓┃연동개발-문의
결제위젯 에러
캐시 초기화는 해봤고.. 익스텐션 한 번 더 확인해보겠습니다 .
답변 감사합니다!
40 replies
TPToss payments 개발자 커뮤니티
•Created by 리아 on 9/20/2023 in #❓┃연동개발-문의
결제위젯 에러
네... 감도 안 오긴하는데 이런 문제가 있었던 분들은 없었던걸까요..?
40 replies
TPToss payments 개발자 커뮤니티
•Created by 리아 on 9/20/2023 in #❓┃연동개발-문의
결제위젯 에러
네 위젯 뜨는것부터 문제가 있어서 그 후에 과정들은 구현하지 않은 상태입니다..
40 replies
TPToss payments 개발자 커뮤니티
•Created by 리아 on 9/20/2023 in #❓┃연동개발-문의
결제위젯 에러
계속 동일한 에러가 나오긴해요...ㅠ
40 replies
TPToss payments 개발자 커뮤니티
•Created by 리아 on 9/20/2023 in #❓┃연동개발-문의
결제위젯 에러
import Payment from "./components/UI/Payments"; 이 부분에 TossPayment 있는 경로로 대체해서 해보면 되는걸까요??
40 replies
TPToss payments 개발자 커뮤니티
•Created by 리아 on 9/20/2023 in #❓┃연동개발-문의
결제위젯 에러
737501012345678 으로 찍히고 type은 string 입니다!
40 replies
TPToss payments 개발자 커뮤니티
•Created by 리아 on 9/20/2023 in #❓┃연동개발-문의
결제위젯 에러
콘솔에 찍히는 경고 또는 에러코드도 첨부드립니다
(경고)payment-widget:1 [Deprecation] Listener added for a synchronous 'DOMNodeRemovedFromDocument' DOM Mutation Event. This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) and work is underway to remove it from this browser. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead.
(경고)2DevTools failed to load source map: Could not load content for https://static.toss.im/tds/43.3.2/css/tds.min.css.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE
(에러)TypeError: Cannot read properties of undefined (reading 'customerKey')
at h (agreement-630e03e38ab0ad39.js:1:987)
at ab (framework-eda8b9c7d07b8e2d.js:9:60868)
at i (framework-eda8b9c7d07b8e2d.js:9:119408)
at oO (framework-eda8b9c7d07b8e2d.js:9:99057)
at framework-eda8b9c7d07b8e2d.js:9:98924
at oF (framework-eda8b9c7d07b8e2d.js:9:98931)
at ox (framework-eda8b9c7d07b8e2d.js:9:95683)
at oS (framework-eda8b9c7d07b8e2d.js:9:94238)
at x (framework-eda8b9c7d07b8e2d.js:33:1364)
at T (framework-eda8b9c7d07b8e2d.js:33:1894)
at Vo.pt.<computed> (index.js:1:44277)
at $o (index.js:1:44025)
at og (index.js:1:44087)
40 replies
TPToss payments 개발자 커뮤니티
•Created by 리아 on 9/20/2023 in #❓┃연동개발-문의
결제위젯 에러
코드 공유 드립니다
1. TossPaymentWidget.tsx 파일 생성 (파일첨부)
2. import 후 사용
import TossPaymentWidget from "../../Components/Page/TossPaymentWidget.tsx"; <TossPaymentWidget price={intRechargePoint} />
---
사용하는 clientkey는 16자리 정도의 숫자(string)를 사용하다가 임의의 문자조합으로도 테스트해봤는데 동일한 에러 계속 발생했습니다!
40 replies
TPToss payments 개발자 커뮤니티
•Created by 리아 on 9/20/2023 in #❓┃연동개발-문의
결제위젯 에러
npm 으로 설치해서 진행한 코드도 공유드릴까요 ?
동일한 에러 발생했었습니다
40 replies
TPToss payments 개발자 커뮤니티
•Created by 리아 on 9/20/2023 in #❓┃연동개발-문의
결제위젯 에러
리액트 코드 그대로 사용해봤다가 안돼서 현재 html 코드로 테스트 해본 상태입니다. 둘 다 같은 에러 발생 했습니다(customerKey)
현재 사용한 코드 입니다!
1. index.html 에 <!-- 결제위젯 SDK 추가 --> <script src="https://js.tosspayments.com/v1/payment-widget"></script>
2. TossPayment.js 파일 생성
export default function TossPayment(props) {
const { price, successUrl, failUrl, TOSS_CLIENT_KEY, customerId } = props;
useEffect(() => {
const script = document.createElement("script");
const scriptText = document.createTextNode(
const paymentWidget = PaymentWidget("${TOSS_CLIENT_KEY}", "${customerId}")
paymentWidget.renderPaymentMethods(
"#payment-method",
{ value: ${price} },
{ variantKey: "DEFAULT" } // 렌더링하고 싶은 결제 UI의 variantKey
)
paymentWidget.renderAgreement('#agreement')
);
script.appendChild(scriptText);
document.body.appendChild(script);
}, []);
return (
<>
<div id="payment-method"></div>
<div id="agreement"></div>
</>
);
}
3. 사용하고자하는 js 파일에 import 후 사용
import TossPayment from "../../Components/Page/TossPayment";
// 자체 서버에서 TOSS_CLIENT_KEY, customerId 등 받아옵니다
const getTossKey = async () => {
await API.get("/toss/request-data")
.then((res) => {
if (res.data.status) {
console.log(res.data);
setTossValues(res.data.results);
setIsLoadedTossData(true);
}
})
.catch(function (error) {});
};
// 컴포넌트 호출
{isLoadedTossData && (
<TossPayment
price={intRechargePoint}
TOSS_CLIENT_KEY={tossValues.TOSS_CLIENT_KEY}
customerId={tossValues.customerId}
/>
)}40 replies