결제위젯 연동 키 에러 관련
결제위젯 연동 키의 클라이언트 키로 SDK를 연동해주세요. API 개별 연동 키는 지원하지 않습니다.
-> 해당 에러가 페이지에 계속 뜨면서 결제위젯이 안 뜹니다
환경변수에 위젯 키로 넣어져 있습니다
아래는 현재 개발 관련 코드입니다.
——
import { loadTossPayments, ANONYMOUS } from '@tosspayments/tosspayments-sdk';
const TOSS_CLIENT_KEY = import.meta.env.VITE_TOSS_CLIENT_KEY;
// SDK 초기화
const tossPayments = await loadTossPayments(TOSS_CLIENT_KEY);
// 결제위젯 초기화 (비회원 모드)
const widgets = tossPayments.widgets({
customerKey: ANONYMOUS
});
// 금액 설정
await widgets.setAmount({
currency: 'KRW',
value: 49000, // 예시
});
// UI 렌더링
await widgets.renderPaymentMethods({
selector: '#payment-method',
variantKey: 'DEFAULT'
});
await widgets.renderAgreement({
selector: '#agreement',
variantKey: 'AGREEMENT'
});
// 결제 요청
await widgets.requestPayment({
orderId: 'ORDER_123',
orderName: '상품명',
successUrl: 'https://nestory.co.kr/payment/success',
failUrl: 'https://nestory.co.kr/payment/fail',
customerEmail: 'test@example.com',
customerName: '홍길동'
});
-> 해당 에러가 페이지에 계속 뜨면서 결제위젯이 안 뜹니다
환경변수에 위젯 키로 넣어져 있습니다
아래는 현재 개발 관련 코드입니다.
——
import { loadTossPayments, ANONYMOUS } from '@tosspayments/tosspayments-sdk';
const TOSS_CLIENT_KEY = import.meta.env.VITE_TOSS_CLIENT_KEY;
// SDK 초기화
const tossPayments = await loadTossPayments(TOSS_CLIENT_KEY);
// 결제위젯 초기화 (비회원 모드)
const widgets = tossPayments.widgets({
customerKey: ANONYMOUS
});
// 금액 설정
await widgets.setAmount({
currency: 'KRW',
value: 49000, // 예시
});
// UI 렌더링
await widgets.renderPaymentMethods({
selector: '#payment-method',
variantKey: 'DEFAULT'
});
await widgets.renderAgreement({
selector: '#agreement',
variantKey: 'AGREEMENT'
});
// 결제 요청
await widgets.requestPayment({
orderId: 'ORDER_123',
orderName: '상품명',
successUrl: 'https://nestory.co.kr/payment/success',
failUrl: 'https://nestory.co.kr/payment/fail',
customerEmail: 'test@example.com',
customerName: '홍길동'
});
Toss payments 개발자 커뮤니티입니다. 결제 연동하며 겪는 기술 문의부터, 결제 시장에 대한 다양한 정보까지 얻어가세요~
15,588Members
Resources
Similar Threads
Was this page helpful?
