Jinho•2y ago

브랜드페이 연동 관련

안녕하세요? 브랜드페이 연동 중에 다음과 같은 에러를 발견해서 문의드립니다. 1. 백엔드에서 api.tosspayments.com/v1/brandpay/authorizations/access-token 호출 시, code와 customer Key를 전달하면 400 에러 발생하며 accessToken 발급 불가 2. 이후 브라우저에서 api.tosspayments.com/v1/connectpay/authorizations/customer-token?customerKey={customerKey}를 수백번 부르며 무한 로딩 (스크린샷 참고) 3. AUTH_REQUEST_MAXIMUM_CALL_EXCEEDED 최대 요청횟수를 초과했습니다. 라는 에러 메시지와 함께 무한로딩 종료 이러한 상황이 발생하고 있습니다. 어떻게 해야 할까요? 브랜드 페이를 아직 신청하지 않고, 개발 연동 테스트 상점으로 진행해서 그런가요? 아니면 https://developers.tosspayments.com/ 에서 리다이렉트 URL을 설정했는데, localhost는 안되는걸까요? ======= 현재 구조는 1. NextJS 3000번 포트 => @tosspayments/brandpay-sdk의 loadBrandPay로 브랜드페이 초기화 후, requestPayment 호출 2. redirectUrl로 NextJS 3000번 포트의 API 호출 (CORS 때문에 4500번 포트 백엔드를 바로 호출하지 않고, 3000번 NextJS로 리다이렉트. redirectUrl이 2번 호출됨) 3. NextJS 3000번 포트의 custom API로 4500번 포트 백엔드 호출 (code와 customerKey 백엔드로 전달) 4. 백엔드에서 NextJS로 전달받은 code와 customerKey를 통해 api.tosspayments.com/v1/brandpay/authorizations/access-token를 호출하고, "인증코드 값을 찾을 수 없습니다"라는 에러 발생 5. 프론트엔드 무한 로딩 입니다.

토스페이먼츠 개발자센터

5 Replies

JinhoOP•2y ago

추가 질문: 백엔드에서 accessToken을 NextJS 프론트엔드로 보내주면, 프론트엔드의 SDK는 이 accessToken 정보를 어떻게 알 수 있나요? 현재 코드는

const brandPayClientKey = '결제_연동_테스트_상점_클라이언트_키';
const customerKey = '사용자_ID';

const redirectUrl = `${origin}/api/toss-brandpay-callback`; // CORS를 피하기 위해 NextJS 3000번 포트 API => 4500번 포트 백엔드로 code와 customerKey 전달

const successUrl = '성공_URL';
const failUrl = '실패_URL';

const brandpay = await loadBrandPay(brandPayClientKey, customerKey, {
        redirectUrl: redirectUrl,
      });

      await brandpay
        .requestPayment({
          amount: 100,
          orderId: '주문_ID',
          orderName: '테스트',
          successUrl: successUrl,
          failUrl: failUrl,
        })
        .then(function (data) {
          console.log('응답', data);
        })
        .catch((err) => {
          console.log('error', err);
          if (err.code == 'USER_CANCEL') {
            console.log('사용자 취소')
          } else {
            console.log('기타 에러 상황', err.code, err.message)
          }
        });

const brandPayClientKey = '결제_연동_테스트_상점_클라이언트_키';
const customerKey = '사용자_ID';

const redirectUrl = `${origin}/api/toss-brandpay-callback`; // CORS를 피하기 위해 NextJS 3000번 포트 API => 4500번 포트 백엔드로 code와 customerKey 전달

const successUrl = '성공_URL';
const failUrl = '실패_URL';

const brandpay = await loadBrandPay(brandPayClientKey, customerKey, {
        redirectUrl: redirectUrl,
      });

      await brandpay
        .requestPayment({
          amount: 100,
          orderId: '주문_ID',
          orderName: '테스트',
          successUrl: successUrl,
          failUrl: failUrl,
        })
        .then(function (data) {
          console.log('응답', data);
        })
        .catch((err) => {
          console.log('error', err);
          if (err.code == 'USER_CANCEL') {
            console.log('사용자 취소')
          } else {
            console.log('기타 에러 상황', err.code, err.message)
          }
        });

입니다.

Kimoon Lee•2y ago

1. 에서 400에러가 나서 발생하는 이슈입니다. 사용하신 customerkey 를 알려주시면 원인을 확인해 보겠습니다. 그리고 accessToken은 FE 에서 알면 안됩니다. 이 token 이 유출되었을 경우 도용이 가능합니다.

토스페이먼츠 BOT•2y ago

❤️ 기술문의 경험이 어떠셨나요?!

간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.

ggggglgl•2y ago

혹시 이 경우 어떻게 해결되었는지 알 수 있을까요? 공유주시면 감사하겠습니다!

Kimoon Lee•2y ago

이때 호출이 안된것이 아니고 Accesstoken 호출을 잘못하셔서 400에러가 발생했던 것으로 기억하고 있습니다.

브랜드페이 연동 관련

Did you find this page helpful?