브랜드페이 인증 관련
현재 브랜드페이 SDK 및 API를 이용하여 개발 중인데, 계속 authorization 오류가 발생합니다. 브랜드페이 sdk 메서드에서는 redirect URL을 통해 authorization code를 발급받는 로직이 아닌가요? 꼭 브랜드페이 API를 통해서만 구현해야 하나요?
37 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
어떤 오류가 발생하나요
addPaymentMethod 메서드를 호출했을 때 콘솔에 아래 로그가 찍힙니다.
"https://api.tosspayments.com/v1/brandpay/authorizations 400 (Bad Request)"
"Uncaught (in promise) KnownError: customerToken이 존재하지 않습니다. at checkAgreement"
리다이렉트 url 등록하지 않아서 생긴 이슈라 다시 리다이렉트 url을 등록했어요.
그리고 requestPayment 메서드 호출했더니 아래 오류가 발생합니다.
GET https://api.tosspayments.com/v1/brandpay/authorizations/customer-token?customerKey=-1OKZxxJ9PrzlokCfIvYA13 429 (Too Many Requests)
redirectUrl로 이동하면 해당 페이지에서 accessToken을 발급받는 API를 호출하도록 구현해야 합니다.
이 과정을 추가하셨나요?
https://docs.tosspayments.com/guides/payment-widget/integration-brandpay#3-access-token-%EB%B0%9C%EA%B8%89%ED%95%98%EA%B8%B0
브랜드페이 연동하기 | 토스페이먼츠 개발자센터
일반 결제와 내 상점만의 자체 간편결제 시스템 브랜드페이를 한 번에 연동하고 싶다면 결제위젯에 브랜드페이를 추가하세요.
네 했는데도 동일한 현상이 지속되네요..
사용한clinetKey및 secretKey제출해주세요
💡 정보 제출
민감 정보를 안전하게 제출해주세요
위에 누르고 제출하세요
전달드렸습니다.
시크릿키를 제출해주세요
시크릿키 제출했습니다.
현재 사용하시는 js sciprt src도 한번 공유해주시겠어요? 현 채널에 올려주셔도됩ㄴ디ㅏ
const clientKey = 'test_ck_LkKEypNArW9yZ662b6eL3lmeaxYG'; // 테스트용 클라이언트 키
const customerKey = '-1OKZxxJ9PrzlokCfIvYA131243'; // 내 상점에서 고객을 구분하기 위해 발급한 고객의 고유 ID
export default function Test() {
let brandpay: any;
useEffect(() => {
async function loadTossBrandPay() {
brandpay = await loadBrandPay(clientKey, customerKey, {
redirectUrl: 'http://localhost:3000/form/reservation-temp/success',
ui: {
highlightColor: '#26C2E3',
buttonStyle: 'full',
labels: {
oneTouchPay: '내 상점 원터치결제',
},
},
windowTarget: 'iframe',
});
}
loadTossBrandPay();
}, []);
return (
<button
onClick={() => {
brandpay
.requestPayment({
amount: 15000,
orderId: 'iq60pCMyM93TzXpCVhgK-',
orderName: '토스 티셔츠 외 2건',
customerName: '박토스',
customerEmail: 'customer@example.com',
})
.then(function (data) {
// 결제 요청 성공 처리
})
.catch(function (error) {
console.error(error);
});
}}
>
button
</button>
);
}
이게 메인 페이지이고 아래는 리다이렉트 페이지에요
const ReservationFormSuccessPage = () => {
const router = useRouter();
const [isDropDownOpen, setIsDropDownOpen] = useState(false);
const [reservationId, setReservationId] = useState('');
const [reservationDate, setReservationDate] = useState('');
useEffect(() => {
async function getAccessToken() {
try {
const response = await axios.get(
http://localhost:3000/api/payment/authorization?code=${router.query.code}&customerKey=${router.query.customerKey});
console.log(response.data);
} catch (error) {
console.error(error);
}
}
if (router.isReady) {
console.log(router.query);
if (router.query.code && router.query.customerKey) {
getAccessToken();
}
}
}, [router.isReady, router.query]);
...http://localhost:3000/form/reservation-temp/success 여기가 호출은 됬나요?
콘솔로 찍었을 때 안나온걸로 봐선 호출이 안된 것 같아요.
브랜드페이 admin에서 리다이렉트 URL 등록 했는데도요.
콘솔말고 network tab을 한번 살표보시기 바랍니다.
거기서 토큰 발급하시는거 아닌가요?
네 맞아요 근데 그 내부의 콘솔 로그가 안찍혀서요
네 그럼 그부분 확인해보시기 바랍니다.
네 한번 확인해볼게요!
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
안녕하세요. 이게 내부 API 요청 문제가 아닌 것 같아요.
가장 단순한 코드로 테스트하는데 요청을 중복해서 계속 보내고 있네요
그건
accessToken이 발급이 안되면
발급될떄까지 저희가 redirectUrl호출합니다.
그런 로직이 있군요.
import { useRouter } from 'next/router';
import { useEffect } from 'react';
const SuccessPage = () => {
const router = useRouter();
useEffect(() => {
console.log('Query parameters:', router.query);
}, [router.query]);
return (
<div>
<h1>Reservation Success</h1>
<p>Your reservation has been successfully processed.</p>
<div>
<h2>Query Parameters:</h2>
{Object.entries(router.query).map(([key, value]) => (
<p key={key}>{
${key}: ${value}}</p>
))}
</div>
</div>
);
};
export default SuccessPage;
이게 redirect 되는 페이지 코드인ㄷ
여기서 쿼리 파라미터도 출력이 안되고 있어요저희가 코드를 봐드리지 않습니다.
redirect페이지 자체에서 token을 발급해보세요
네 잠시만요
리다이렉트 URL로 아예 안넘어가는 것 같은데 혹시 리다이렉트 URL을 등록하는 방법이 개발자센터 대시보드에서 등록하는 방법 말고 또 있나요?
url을 여러개 등록했는데 등록한 url이 순차적으로 워킹해야 된다던지 localhost로 등록하면 안된다던지 하는 규칙이 있나요?
혹시 전화로 기술 관련 문의도 가능한가요?
1544-7772(고객센터 대표번호) -> 2(기존가맹점 문의) -> 5(기술지원팀)로 연락주시면 전화로도 문의가 가능하기는 합니다만, 현재 문의가 급증하여 연결이 지연될 수 있습니다.
토스페이먼츠 결제연동팀
export default function Test() {
let brandpay: any;
useEffect(() => {
async function loadTossBrandPay() {
brandpay = await loadBrandPay(clientKey, customerKey, {
redirectUrl: 'http://localhost:3000/form/reservation-temp/success',
ui: {
여기 등록하신 url로 리다이렉트 합니다.
http://localhost:3000/form/reservation-temp/success 로 정상적으로 리다이렉션 되고 있다는 말씀이시죠?
브랜드페이 연동에 대해, 어떻게 이해하고 있는지 중간 정리 하는게 좋을것 같아요.
1) 프론트에서 브랜드페이 jsSDK 호출이 발생한다.
2) redirectUrl 로 code, customerKey 가 포함되어 get 방식으로 데이터를 전달 한다.
3) redirectUrl 에서, 전달된 code, customerKey 를 추출해서, access token 발급 API 를 호출 한다.
이 순서 입니다.
redirectUrl 로 get 방식으로 데이터가 전달 될때, 이를 추출해서 access token 호출하는 것이 정상적으로 구현되어 있는지를 봐주시면 됩니다.
redirectUrl 로 고객이 "리다이렉트" 되는게 아닙니다.
결제가 성공하고 고객이 이동하는 도착지는, requestPayment 에 있는 successUrl 입니다.
혹시나 잘못 이해하고 있으신게 아닌가 해서 설명 드립니다.
redirectUrl 이 페이지가 아니라 GET API endpoint가 되어야 하나요?
API로 endpoint로 연동하니까 되네요
브랜드페이 노드 샘플입니다.
https://github.com/tosspayments/brandpay-sample/tree/main/quickstart/node
view - checkout 에서 redirectUrl 설정보면
redirectUrl: 'http://localhost:3000/callback-auth'
이렇게 되어 있지요?
https://github.com/tosspayments/brandpay-sample/blob/main/quickstart/node/index.js
여기에서 callback-auth get 방식 처리 보면
쿼리 파람으로 전달된 데이터 추출해서 토큰 발행 수행하고 있습니다.
node 샘플 이해하실 수 있으실것 같아서 전달 드려 봅니다
아 넵 확인 감사합니다!