브랜드페이 결제 연동 중입니다. SDK 연동하는데 npm으로 @tosspayments/brandpay-sdk 을 설치한 상태인데 아래와 같은 오류가 발생합니다.
오류: Failed to fetch dynamically imported module: "@tosspayments/brandpay-sdk"
참고로 config dependencies 첨부합니다.
"dependencies": {
"@quasar/extras": "^1.0.0",
"@tosspayments/brandpay-sdk": "^1.3.0",
"@tosspayments/payment-sdk": "^1.5.0",
38 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.

plugin 설치및 로드에 이상은 없네요
npm install 하셨나요?
네 했습니다.

에러는 단순히 모듈 경로를 제대로 못찾아서 발생하는 문제로 보이는데요
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
안녕하세요, 모듈 경로는 어찌저찌 해결했습니다.
그리고 다음 스텝에서 계좌 등록하는 과정에서 404 에러가 떴습니다. 무엇이 잘못된걸까요 ?
POST https://api.tosspayments.com/v1/brandpay/authorizations 404 (Not Found)
redirectURL에서 아래와 같이 주소로 요청 보냈습니다. https://api.tosspayments.com/v1/brandpay/authorizations/access-token
redirectURL에서 받은 code, customerKey 값을 확인해보고 싶은데, 제 창에서 redirectUrl 화면이 뜨지 않던데, 이것부터 잘못된것인지, 잘못된것이 아니면 받은 code, customerKey 값을 확인할 방법이 있을까요?
redirectURL은 front에서 이동하는게 아니라 backend 통신이 이루어 집니다.
redirecturl 은저희 주소를 입력하는게 아니라
귀사 서버에 주소로 redirect될 때 code, customerKey를 getparam으로 전달하게 되며 그걸 가지고 accesstoken발급을 위한 api를 호출해주시면 되요
redirectUrl은 저희 주소로 하긴 했고, getparam 처리를 해서 이 주소(https://api.tosspayments.com/v1/brandpay/authorizations/access-token)로 post 요청을 보냈는데, 이 에러(POST https://api.tosspayments.com/v1/brandpay/authorizations 404 (Not Found))는 왜 뜬건가요 ?
일반적으로는 secretkey 를 잘못넣어서 발생하는 에러인데요.
https://api.tosspayments.com/v1/brandpay/authorizations/access-token)로 요처하셨던 code 값을 확인해 주실수 있을까요?
브랜드페이 SDK 연동이 잘 안되서, 결제 위제 SDK에 브랜드페이 API 적용 중인데요 , renderPaymentMethods 에서 GET https://api.tosspayments.com/v1/payment-widget/widget-groups/keys?variantKey=DEFAULT 404 (Not Found) 에러가 나내요...
variantKey 값 지정을 지우기도 하고 그래봤고, 상점관리자에서 브랜드 페이 추가도 했는데.....

음..
결국 결제윚세으로 브랜드페이 사용하시련느거죠?
네
그럼 brandpay-sdk는 우선 사용하실 필요 없겠네요
저희가 접근 가능한 사이트가 있나요?
여기서 에러나는 페이지는 어떻게 접근할까요?
사이트는 확인 후 제가 지웠습니다.
간편결제 클릭하면 됩니다.
아, id, pw 필요한데
💡 정보 제출
아래 버튼을 눌러 외부로 노출되기 민감한 정보를 제출해주세요
hglee#9047
정상적으로 제출되었습니다.

ㄹㅗ그인했는데
비활성화되어잇어요
장바구니가


이렇게 3개 버튼 눌러서 장바구니 추가 바랍니다.
widget 초기화하고, render 시도하는 쪽 script 코드 공유해주시겠어요?
아 공유해주시기전에
위젯 render할 때 clientKey는
일반결제걸로 해서 다시 시도해보세요
일반결제 클라이언트 키로 시도해봤는데 안되서 혹시나 해서 브랜드페이 클라이언트키로 해본거에요 .....
그럼 스크립트 공유해주세요
var brandpay = loadPaymentWidget(
${configs.clientKey}
,
customerKey,
{
redirectUrl: 'https://cfomarket.store/auth',
},
);
(await brandpay).renderPaymentMethods(
'#payment-method',
{value: 10000},
// {variantKey: 'DEFAULT'}, // 브랜드페이가 추가된 결제 UI의 variantKey
);
(await brandpay)
.requestPayment({
amount: amountOfPayment,
orderId: random_id,
orderName:
this.cartList[0].product_id +
this.cartList[0].product_name +
this.cartList[0].quantity +
'...',
customerName: userinfo.USER_NAME,
appScheme: 'chinafoodonline://',
successUrl: window.location.origin + '/BrandpaySuccess',
failUrl: window.location.origin + '/Fail',
})
.then(function (data) {
// 결제 요청 성공 처리
console.log('requestPayment 데이터: ' + data);
})
.catch(function (error) {
if (error.code === 'USER_CANCEL') {
// 사용자가 창을 닫아 취소한 경우에 대한 처리
}
console.log('requestPayment 에러: ' + error);
});
결제 위젯 클라이언트 키로 수정해서 적용했습니다.다시한번 시도해보시겠어요?
그대로 해보시면 될것같습니다
일반결제mid로요!
시도해보니 일반 결제로만 되는데요, 브랜드페이를 적용하고 싶었는데요

이런 안내글을 보고 작업 중인데... 개발자센터 안내글 대로 작업했는데 일반결제창만 뜨면....
그건
작업을 잘못하셔서 그래요~
보시면 render되자마자 requestPayments를 이벤트 없이 바로 호출하시는 것 같은데
requestPayments는 결제하기 버튼 이벤트 받아서 실행해주셔야합니다.
결제창은 위젯을 뜨면 아예 안떠야 정상입니다.

여기 연동 안내에서도 이렇게 하셨던데요
결제위젯 연동하기 | 토스페이먼츠 개발자센터
토스페이먼츠 결제위젯 연동 가이드입니다. 내 상점의 주문서 페이지에 최적의 주문서 UI를 연동하세요. 결제 연동하기 가장 편리한 로우코드(Low-code) 솔루션입니다.
여기 보고 해주세요~
햇갈리신건 담당팀에 전달할게요~