브랜드 페이 redirectUrl 관련 문의입니다

안녕하세요. 토스 페이먼츠 sdk 통해 브랜드 페이 연동하고 있는 개발자입니다.
연동 과정 중 redirectUrl 통한 Access Token 발급 단계에서 문제가 있어 문의드립니다.

첨부한 이미지와 같이 GET으로 redirectUrl에 code, customerKey 모두 전달되고, 아래 2번과 같이 redirectUrl에 대한 페이지 구현 및 api 호출 처리가 되어 있는데,
redirectUrl에 해당하는 페이지로 진입 자체가 되지 않는 것으로 보입니다.
그렇게 TOO_MANY_REQUESTS 에러가 발생하고 토큰 발급이 실패하는데 혹시 원인을 알 수 있을지 문의 남깁니다.

구현한 상태는 아래와 같습니다.

1. 토스 페이먼츠 계정 정보에 리다이렉트 URL 설정 완료(http://localhost:7001/toss-payment/bp-auth)
2. FE에서 redirectUrl 전달 및 해당 페이지에서 아래와 같은 로직으로 BE에 전달.

// FE에서 구현한 페이지 코드 로직
import { useMutation } from "@apollo/client";
...

export const TossBrandPayAccessTokenApiRedirect: React.FC = () => {
  const [apiFunc] = useMutation(apiMutation);

  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get("code");
    const customerKey = urlParams.get("customerKey");
    apiFunc({ variables: { code, customerKey } });
  }, []);

  return <></>;
};

// FE에서 구현한 페이지 코드 로직
import { useMutation } from "@apollo/client";
...

export const TossBrandPayAccessTokenApiRedirect: React.FC = () => {
  const [apiFunc] = useMutation(apiMutation);

  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get("code");
    const customerKey = urlParams.get("customerKey");
    apiFunc({ variables: { code, customerKey } });
  }, []);

  return <></>;
};

3. BE에서는 전달 받은 variables로 Access Token 발급 위한 api 호출(~/v1/brandpay/authorizations/access-token)

// index.tsx
import * as React from "react";
import ReactDOM from "react-dom/client";

import App from "./app/App";

const root = ReactDOM.createRoot(document.getElementById("root"));

const startApp = async () => {
  root.render(<App />);
};

startApp();

// index.tsx
import * as React from "react";
import ReactDOM from "react-dom/client";

import App from "./app/App";

const root = ReactDOM.createRoot(document.getElementById("root"));

const startApp = async () => {
  root.render(<App />);
};

startApp();

브랜드 페이 redirectUrl 관련 문의입니다

// FE에서 구현한 페이지 코드 로직
import { useMutation } from "@apollo/client";
...

export const TossBrandPayAccessTokenApiRedirect: React.FC = () => {
  const [apiFunc] = useMutation(apiMutation);

  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get("code");
    const customerKey = urlParams.get("customerKey");
    apiFunc({ variables: { code, customerKey } });
  }, []);

  return <></>;
};

// FE에서 구현한 페이지 코드 로직
import { useMutation } from "@apollo/client";
...

export const TossBrandPayAccessTokenApiRedirect: React.FC = () => {
  const [apiFunc] = useMutation(apiMutation);

  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get("code");
    const customerKey = urlParams.get("customerKey");
    apiFunc({ variables: { code, customerKey } });
  }, []);

  return <></>;
};

3. BE에서는 전달 받은 variables로 Access Token 발급 위한 api 호출(~/v1/brandpay/authorizations/access-token)

// index.tsx
import * as React from "react";
import ReactDOM from "react-dom/client";

import App from "./app/App";

const root = ReactDOM.createRoot(document.getElementById("root"));

const startApp = async () => {
  root.render(<App />);
};

startApp();

// index.tsx
import * as React from "react";
import ReactDOM from "react-dom/client";

import App from "./app/App";

const root = ReactDOM.createRoot(document.getElementById("root"));

const startApp = async () => {
  root.render(<App />);
};

startApp();

브랜드 페이 redirectUrl 관련 문의입니다

브랜드 페이 redirectUrl 관련 문의입니다

Continue the conversation

Toss payments 개발자 커뮤니티

Continue the conversation

Toss payments 개발자 커뮤니티

Similar Threads