브랜드페이 연동과정에서 에러 발생 도움 오청드립니다
🅱️브랜드페이
안녕하세요, 김남우 매니저님.
메일 내용에 따른 답변 내용 입니다
1. 상황
결제 위젯(Payment Widget V2) 에서 BrandPay 연동 시, 위젯 렌더링 직후 아래 에러가 발생합니다.
[BRIDGE] Request Timeout.
type: TOSSPAYMENTSREQUEST_RESPONSE
body: {
"step": "TOSSPAYMENTSREQUEST",
"requestName": "GET_PARAMETER",
"payload": { "name": "brandpayCustomerToken" }
}
일부 계정에서는 "name": "customerToken" 으로 나오기도 합니다.
BrandPay 카드 등록(본인인증) 단계에서 발생하며, 일반 카드/간편결제 등 BrandPay 외 수단은 정상 동작합니다.
에러 발생 시점: renderPaymentMethods + renderAgreement 호출 후, SDK 내부 iframe과 호스트 간 postMessage 핸드셰이크(GET_PARAMETER) 단계에서 타임아웃 발생
2. 연동 모듈
결제 위젯 V2 (Payment Widget) 사용
SDK 스크립트: https://js.tosspayments.com/v2/standard
Next.js <Script strategy="beforeInteractive"> 로 로드
3. 개발 환경
항목 내용
개발언어/프레임워크 TypeScript + Next.js 15 (App Router)
런타임 Cloudflare Pages (Edge Runtime)
테스트 환경 웹 (Chrome, Safari 등 데스크톱 브라우저)
도메인 https://www.getkkul.com
Client Key live_gck_ex6BJGQOVDW0aeEX0X5X3W**
4. 연동 코드
위젯 초기화 코드 (checkout 페이지 기준):
// SDK 로드 (layout.tsx)
<Script src="https://js.tosspayments.com/v2/standard" strategy="beforeInteractive" />
// 위젯 초기화 (checkout/page.tsx)
const tossPayments = TossPayments(clientKey); // window.TossPayments
const paymentWidget = tossPayments.widgets({
customerKey, // buildTossCustomerKey()로 생성한 고정 키
brandpay: {
redirectUrl: "https://www.getkkul.com/account/payment/callback",
},
});
await paymentWidget.setAmount({ value: amount, currency: "KRW" });
// V2 SDK 요구사항대로 동시 호출
const [methodWidget, agreementWidget] = await Promise.all([
paymentWidget.renderPaymentMethods({
selector: "#payment-widget-checkout",
variantKey: "getkkul-live-toss",
}),
paymentWidget.renderAgreement({
selector: "#agreement-widget-checkout",
variantKey: "AGREEMENT",
}),
]);
customerKey는 사용자 UID 기반으로 생성하며 세션 내에서 고정입니다.
BrandPay redirectUrl은 토스 개발자센터에 https://www.getkkul.com/account/payment/callback 으로 등록되어 있습니다.
메일 내용에 따른 답변 내용 입니다
1. 상황
결제 위젯(Payment Widget V2) 에서 BrandPay 연동 시, 위젯 렌더링 직후 아래 에러가 발생합니다.
[BRIDGE] Request Timeout.
type: TOSSPAYMENTSREQUEST_RESPONSE
body: {
"step": "TOSSPAYMENTSREQUEST",
"requestName": "GET_PARAMETER",
"payload": { "name": "brandpayCustomerToken" }
}
일부 계정에서는 "name": "customerToken" 으로 나오기도 합니다.
BrandPay 카드 등록(본인인증) 단계에서 발생하며, 일반 카드/간편결제 등 BrandPay 외 수단은 정상 동작합니다.
에러 발생 시점: renderPaymentMethods + renderAgreement 호출 후, SDK 내부 iframe과 호스트 간 postMessage 핸드셰이크(GET_PARAMETER) 단계에서 타임아웃 발생
2. 연동 모듈
결제 위젯 V2 (Payment Widget) 사용
SDK 스크립트: https://js.tosspayments.com/v2/standard
Next.js <Script strategy="beforeInteractive"> 로 로드
3. 개발 환경
항목 내용
개발언어/프레임워크 TypeScript + Next.js 15 (App Router)
런타임 Cloudflare Pages (Edge Runtime)
테스트 환경 웹 (Chrome, Safari 등 데스크톱 브라우저)
도메인 https://www.getkkul.com
Client Key live_gck_ex6BJGQOVDW0aeEX0X5X3W**
4. 연동 코드
위젯 초기화 코드 (checkout 페이지 기준):
// SDK 로드 (layout.tsx)
<Script src="https://js.tosspayments.com/v2/standard" strategy="beforeInteractive" />
// 위젯 초기화 (checkout/page.tsx)
const tossPayments = TossPayments(clientKey); // window.TossPayments
const paymentWidget = tossPayments.widgets({
customerKey, // buildTossCustomerKey()로 생성한 고정 키
brandpay: {
redirectUrl: "https://www.getkkul.com/account/payment/callback",
},
});
await paymentWidget.setAmount({ value: amount, currency: "KRW" });
// V2 SDK 요구사항대로 동시 호출
const [methodWidget, agreementWidget] = await Promise.all([
paymentWidget.renderPaymentMethods({
selector: "#payment-widget-checkout",
variantKey: "getkkul-live-toss",
}),
paymentWidget.renderAgreement({
selector: "#agreement-widget-checkout",
variantKey: "AGREEMENT",
}),
]);
customerKey는 사용자 UID 기반으로 생성하며 세션 내에서 고정입니다.
BrandPay redirectUrl은 토스 개발자센터에 https://www.getkkul.com/account/payment/callback 으로 등록되어 있습니다.
