diff --git a/src/hooks/useRequestPayment.jsx b/src/hooks/useRequestPayment.jsx index 310bec8..897db1c 100644 --- a/src/hooks/useRequestPayment.jsx +++ b/src/hooks/useRequestPayment.jsx @@ -21,12 +21,23 @@ const useRequestPayment = () => { `?paymentType=NORMAL&orderId=${response.data.orderId}&paymentKey=membership&amount=${response.data.amount}`; return; } - console.log(response.data); + console.log('paymentMethodsWidget: ', paymentMethodsWidget); paymentMethodsWidget.updateAmount( Math.max(response.data.amount, 0) ); - paymentWidget?.requestPayment(response.data); - return; + + paymentWidget?.requestPayment(response.data) + .then(function (data) {return;}) + .catch(function (error) { + if (error.code === 'NOT_SELECTED_PAYMENT_METHOD') { + // 결제수단 미선택 오류 + const method = paymentMethodsWidget.getSelectedPaymentMethod(); + console.log('hook 내부 method: ', method); + console.log('requestPayment error: ', error); + alert('토스 페이먼츠 오류로 새로고침을 시도합니다'); + window.location.reload(true); + } + }); } catch (error) { console.error("Error during payment request:", error); } diff --git a/src/pages/PaymentPage/PaymentPage.jsx b/src/pages/PaymentPage/PaymentPage.jsx index a64e71a..3b363ba 100644 --- a/src/pages/PaymentPage/PaymentPage.jsx +++ b/src/pages/PaymentPage/PaymentPage.jsx @@ -56,13 +56,13 @@ const PaymentPage = () => { { 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선택자-옵션