const [isWidgetReady, setIsWidgetReady] = useState<boolean>(true);
/** 토스페이먼츠 위젯 추가 */
useEffect(() => {
if (paymentWidget == null) return;
const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
'#payment-widget',
{ value: orderPriceSummary.totalCost },
{ variantKey: 'DEFAULT' },
);
paymentMethodsWidget?.on('ready', () => {
paymentMethodsWidgetRef.current = paymentMethodsWidget;
setIsWidgetReady(false);
});
}, [paymentWidget]);
/** 토스페이먼츠 결제 금액 반영(orderPriceSummary 변경 시 자동으로 값 적용) */
useEffect(() => {
const paymentMethodsWidget = paymentMethodsWidgetRef.current;
if (paymentMethodsWidget == null) return;
paymentMethodsWidget.updateAmount(orderPriceSummary.totalCost);
}, [orderPriceSummary.totalCost, paymentMethodsWidgetRef.current]);
...
<Button
className="mb-12"
type="primary"
fullWidth
size="large"
loading={submitting || isWidgetReady}
onClick={결제하기}
disabled={!결제가능상태()}
>
...
const [isWidgetReady, setIsWidgetReady] = useState<boolean>(true);
/** 토스페이먼츠 위젯 추가 */
useEffect(() => {
if (paymentWidget == null) return;
const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
'#payment-widget',
{ value: orderPriceSummary.totalCost },
{ variantKey: 'DEFAULT' },
);
paymentMethodsWidget?.on('ready', () => {
paymentMethodsWidgetRef.current = paymentMethodsWidget;
setIsWidgetReady(false);
});
}, [paymentWidget]);
/** 토스페이먼츠 결제 금액 반영(orderPriceSummary 변경 시 자동으로 값 적용) */
useEffect(() => {
const paymentMethodsWidget = paymentMethodsWidgetRef.current;
if (paymentMethodsWidget == null) return;
paymentMethodsWidget.updateAmount(orderPriceSummary.totalCost);
}, [orderPriceSummary.totalCost, paymentMethodsWidgetRef.current]);
...
<Button
className="mb-12"
type="primary"
fullWidth
size="large"
loading={submitting || isWidgetReady}
onClick={결제하기}
disabled={!결제가능상태()}
>
...