import { useQuery } from '@tanstack/react-query';
import { loadPaymentWidget } from '@tosspayments/payment-widget-sdk';
import { nanoid } from 'nanoid';
const clientKey = '클라이언트 키';
const customerKey = nanoid();
const usePaymentWidget = (clientKey: string, customerKey: string) => {
useQuery({
queryKey: ['paymentWidget', clientKey, customerKey],
queryFn: () => {
return loadPaymentWidget(clientKey, customerKey);
},
});
};
const TossPaymentWidget = () => {
const data = usePaymentWidget(clientKey, customerKey);
console.log(data);
return <div>hi</div>;
};
export default TossPaymentWidget;
import { useQuery } from '@tanstack/react-query';
import { loadPaymentWidget } from '@tosspayments/payment-widget-sdk';
import { nanoid } from 'nanoid';
const clientKey = '클라이언트 키';
const customerKey = nanoid();
const usePaymentWidget = (clientKey: string, customerKey: string) => {
useQuery({
queryKey: ['paymentWidget', clientKey, customerKey],
queryFn: () => {
return loadPaymentWidget(clientKey, customerKey);
},
});
};
const TossPaymentWidget = () => {
const data = usePaymentWidget(clientKey, customerKey);
console.log(data);
return <div>hi</div>;
};
export default TossPaymentWidget;