짤스
TPToss payments 개발자 커뮤니티
•Created by 짤스 on 8/27/2024 in #❓┃연동개발-문의
자동결제를 위해 빌링키 발급 버튼을 눌렀을 때, 카드 등록 UI가 나오지 않습니다.
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;
10 replies
TPToss payments 개발자 커뮤니티
•Created by 짤스 on 8/27/2024 in #❓┃연동개발-문의
자동결제를 위해 빌링키 발급 버튼을 눌렀을 때, 카드 등록 UI가 나오지 않습니다.
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]);
10 replies
TPToss payments 개발자 커뮤니티
•Created by 짤스 on 8/27/2024 in #❓┃연동개발-문의
자동결제를 위해 빌링키 발급 버튼을 눌렀을 때, 카드 등록 UI가 나오지 않습니다.
코드
- "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: "김토스",
});
10 replies
TPToss payments 개발자 커뮤니티
•Created by 짤스 on 4/2/2024 in #❓┃연동개발-문의
브랜드 페이 결제시 다음과 같이 계좌 등록과 카드 등록 ui가 나타나는데 계좌등록 UI를 없앨 방법이 있나요?
감사합니다!
5 replies