diff --git a/src/pages/PaymentPage/PaymentPage.jsx b/src/pages/PaymentPage/PaymentPage.jsx index 68a6cdb..3b363ba 100644 --- a/src/pages/PaymentPage/PaymentPage.jsx +++ b/src/pages/PaymentPage/PaymentPage.jsx @@ -27,13 +27,7 @@ const PaymentPage = () => { const paymentRequest = () => { const paymentWidget = paymentWidgetRef.current; const paymentMethodsWidget = paymentMethodsWidgetRef.current; - requestPayment( - cartId, - couponId, - paymentWidget, - paymentMethodsWidget, - usedPoint - ); + requestPayment(cartId, couponId, paymentWidget, paymentMethodsWidget, usedPoint); }; const handleSetPoint = () => { if (usedPoint !== 0) { @@ -51,22 +45,24 @@ const PaymentPage = () => { useEffect(() => { (async () => { try { + // ------ 결제위젯 초기화 ------ // 비회원 결제에는 customerKey 대신 ANONYMOUS를 사용하세요. const paymentWidget = await loadPaymentWidget(clientKey, customerKey); // 회원 결제 // const paymentWidget = await loadPaymentWidget(clientKey, ANONYMOUS) // 비회원 결제 - + const paymentMethodsWidget = paymentWidget.renderPaymentMethods( "#payment-page__payment-widget", { value: Math.max(totalPrice - salePrice - usedPoint, 0) }, // { value: 3000 }, + // 렌더링하고 싶은 결제 UI의 variantKey // 아래 variantKey는 문서용 테스트키와 연동되어 있습니다. 멀티 UI를 직접 만들고 싶다면 계약이 필요해요. // https://docs.tosspayments.com/guides/payment-widget/admin#멀티-결제-ui { variantKey: "DEFAULT" } ); - + // ------ 이용약관 UI 렌더링 ------ // 이용약관 UI를 렌더링할 위치를 지정합니다. `#agreement`와 같은 CSS 선택자를 추가하세요. // https://docs.tosspayments.com/reference/widget-sdk#renderagreement선택자-옵션 @@ -85,6 +81,7 @@ const PaymentPage = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + return (