자동결제를 위해 빌링키 발급 버튼을 눌렀을 때, 카드 등록 UI가 나오지 않습니다.
자동 결제에서 빌링키 발급 버튼을 눌렀을 때, 카드 등록 UI가 나오지 않고 사진과 같이 오류가 발생합니다.
왜 그럴까요?
react 코드이고 코드는 다음과 같아요.
clientKey는 아래 연동하기 문서에 있는 키를 사용했습니다
- https://docs.tosspayments.com/guides/v2/payment-widget/integration?frontend=react
연동하기 | 토스페이먼츠 개발자센터
토스페이먼츠의 간편한 결제 연동 과정을 한눈에 볼 수 있습니다. 각 단계별 설명과 함께 달라지는 UI와 코드를 확인해보세요.
6 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
코드
- "use client"
import { loadTossPayments, ANONYMOUS } from "@tosspayments/tosspayments-sdk";
import { useEffect, useState } from "react";
import { uuidv4 } from "lib0/random";
const clientKey = "test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm";
const customerKey = uuidv4()
const Payment = () => {
const [amount, setAmount] = useState({
currency: "KRW",
value: 50_000,
});
const [payment, setPayment] = useState<any>(null);
const [ready, setReady] = useState(false);
const [widgets, setWidgets] = useState<any>(null);
async function requestBillingAuthToss() {
await payment.requestBillingAuth({
method: "CARD", // 자동결제(빌링)은 카드만 지원합니다
successUrl: window.location.origin + "/payment/billing", // 요청이 성공하면 리다이렉트되는 URL
failUrl: window.location.origin + "/fail", // 요청이 실패하면 리다이렉트되는 URL
customerEmail: "customer123@gmail.com",
customerName: "김토스",
});
useEffect(() => {
async function fetchPaymentWidgets() {
// ------ 결제위젯 초기화 ------
const tossPayments = await loadTossPayments(clientKey);
// 회원 결제
const widgets = tossPayments.widgets({
customerKey,
});
const payment = tossPayments.payment({
customerKey,
});
setPayment(payment);
// 비회원 결제
// const widgets = tossPayments.widgets({ customerKey: ANONYMOUS });
setWidgets(widgets);
}
fetchPaymentWidgets();
}, [clientKey, customerKey]);
useEffect(() => {
async function renderPaymentWidgets() {
if (widgets == null) {
return;
}
// ------ 주문의 결제 금액 설정 ------
await widgets.setAmount(amount);
await Promise.all([
// ------ 결제 UI 렌더링 ------
widgets.renderPaymentMethods({
selector: "#payment-method",
variantKey: "DEFAULT",
}),
// ------ 이용약관 UI 렌더링 ------
widgets.renderAgreement({
selector: "#agreement",
variantKey: "AGREEMENT",
}),
]);
setReady(true);
}
renderPaymentWidgets();
}, [widgets]);
useEffect(() => {
if (widgets == null) {
return;
}
widgets.setAmount(amount);
}, [widgets, amount]);
return (
<div className="wrapper rounded-[12px]">
<div className="box_section">
{/* 결제 UI /}
<div id="payment-method" />
{/ 이용약관 UI /}
<div id="agreement" />
{/ 결제하기 버튼 */}
<div className={"bg-achromatic-white flex justify-center pb-[20px]"}>
<button
className={"w-[150px] h-[40px] bg-[#3182f6] rounded-[12px] text-achromatic-white"}
// className="button"
disabled={!ready}
onClick={async () => {
try {
// ------ '결제하기' 버튼 누르면 결제창 띄우기 ------
// 결제를 요청하기 전에 orderId, amount를 서버에 저장하세요.
// 결제 과정에서 악의적으로 결제 금액이 바뀌는 것을 확인하는 용도입니다.
await widgets.requestPayment({
orderId: "Z9evBnUW7vFg7KS7grDxL",
orderName: "토스 티셔츠 외 2건",
successUrl: window.location.origin + "/success",
failUrl: window.location.origin + "/fail",
customerEmail: "customer123@gmail.com",
customerName: "김토스",
customerMobilePhone: "01012341234",
});
} catch (error) {
// 에러 처리하기
console.error(error);
}
}}
>
결제하기
</button>
</div>
<button
onClick={requestBillingAuthToss}
>빌링키 발급</button>
</div>
</div>
);
}
export default Payment;
연동을 잘못하신것 같습니다.
빌링은 결제위젯으로 연동하실수가 없어요.
자동결제(빌링) 이해하기 | 토스페이먼츠 개발자센터
자동결제는 정기 배송, 음악 스트리밍과 같은 구독형 서비스에서 사용할 수 있어요. 자동결제(빌링)의 개념과 과정을 설명합니다.
여기 참고하시기 바랍니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.