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 (
{
- {/* 할인 적용내역 */}
할인적용
- {storeId >= 10 && inOut === 2 ? ( - - 축제 상품에는 적용되지 않습니다 - - ) : ( - <> -
- 쿠폰 - +
+ 쿠폰 + + + {salePrice && ( - {salePrice && ( - - {salePrice - .toString() - .replace(/\B(?=(\d{3})+(?!\d))/g, ",")} - 원 - - )} - - 쿠폰적용 - + {salePrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원 - -
-
- {/* 포인트 적용 */} - 통합 포인트 - + )} + + 쿠폰적용 + + + +
+
+ {/* 포인트 적용 */} + 통합 포인트 + + + {usedPoint && ( - {usedPoint && ( - - {usedPoint - .toString() - .replace(/\B(?=(\d{3})+(?!\d))/g, ",")} - 원 - - )} - {/* 적용취소, 적용 금액 한계 설정 */} -
- {usedPoint === 0 ? "최대 적용" : "적용 취소"} -
+ {usedPoint.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원
-
-
-
- 보유: {point} P -
- - )} + )} + {/* 적용취소, 적용 금액 한계 설정 */} +
+ {usedPoint === 0 ? "최대 적용" : "적용 취소"} +
+
+ +
+
+ 보유: {point} P +
결제금액
@@ -255,7 +237,7 @@ const PaymentPage = () => { {salePrice + usedPoint > 0 ? "(-)" + - // 표시되는 할인 금액 조정 + // 표시되는 할인 금액 조정 Math.min(salePrice + usedPoint, totalPrice) .toString() .replace(/\B(?=(\d{3})+(?!\d))/g, ",") +