yangnyeomcikin_37196
yangnyeomcikin_37196
PostsComments
TPToss payments 개발자 커뮤니티
Created by yangnyeomcikin_37196 on 10/11/2023 in #❓┃연동개발-문의
결제 취소 후 재결제 시 카드결제 정보 선택 에러
넵.... ㅎㅎ 감사합니다!!
20 replies
TPToss payments 개발자 커뮤니티
Created by yangnyeomcikin_37196 on 10/11/2023 in #❓┃연동개발-문의
결제 취소 후 재결제 시 카드결제 정보 선택 에러
제가 모바일에서는 결제 위젯을 사용하고 웹에서는 결제창 방식을 사용하고 있는데, 웹에서 결제 위젯이 hidden 된 상태로 최초 결제시에는 정상 동작(결제창으로 결제)이 되지만 결제 취소 후에도 여전히 hidden 된 결제 위젯이 남아있어서 결제창으로 재결제를 시도하는게 아니라 hidden 된 결제 위젯으로 재결제가 시도되어서 카드를 선택하지 않고 결제하려고 했다는 에러를 받은 것 같습니다! 셀렉터를 인지하는 div의 id 값을 웹뷰 모바일뷰 분기처리해서 모바일뷰일때만 payment-widget을 줘서 위젯으로 렌더링하고 웹뷰에서는 결제창으로 렌더링해서 해결했습니다!
20 replies
TPToss payments 개발자 커뮤니티
Created by yangnyeomcikin_37196 on 10/11/2023 in #❓┃연동개발-문의
결제 취소 후 재결제 시 카드결제 정보 선택 에러
const selector = "#payment-widget"| ... 중략 return ( <> <div id="payment-widget" /> <button onClick={handleClickPayButton}> 강의 결제하기 </button> </> ) selector에는 payment-widget이 들어있고 버튼위의 div가 payment-widget입니다! 지금 웹 뷰에서는 최초 결제 시도시에는 결제창이 뜨고, 취소후 재결제 했을때는 안 뜨는것처럼 보이지만 결제창이 뜨는 것 같습니다. 취소후 재결제하고 모바일뷰로 바꿨을때는 결제창이 하단에 노출되어있습니다. 제가 원하는 동작(결제 취소 후 재결제 시도시 다시 결제 창이 뜨는것)이 모바일 뷰에서는 정상적으로 되는데, 웹 뷰에서만 안되고 있는데 이유를 잘 모르겠습니다..
20 replies
TPToss payments 개발자 커뮤니티
Created by yangnyeomcikin_37196 on 10/11/2023 in #❓┃연동개발-문의
결제 취소 후 재결제 시 카드결제 정보 선택 에러
최초 결제 콘솔창과 함께 보여지는 영상 입니다!
20 replies
TPToss payments 개발자 커뮤니티
Created by yangnyeomcikin_37196 on 10/11/2023 in #❓┃연동개발-문의
결제 취소 후 재결제 시 카드결제 정보 선택 에러
const triggerPaymentWidget = async () => {
    const paymentWidget = paymentWidgetRef.current
    try {
      if (result) {
        await paymentWidget?.requestPayment({
          orderId: result.orderId || "",
          orderName: paymentInfo.orderName,
          customerName: paymentInfo.customerName,
          customerEmail: paymentInfo.customerEmail,
          successUrl: `${process.env.NEXT_PUBLIC_PAYMENT_SUCCESS_URL}?couponId=${paymentInfo.couponId}`,
          failUrl: `${process.env.NEXT_PUBLIC_PAYMENT_FAIL_URL}/${paymentInfo.courseId}`,
        })
      }
    } catch (error: any) {
      console.log(error.message, error.code)
      // 토스 결제 요청 실패 에러 발생시 결제 취소 페이지로 라우팅
      if (error.message && error.code) {
        const { message, code } = error
        router.replace(`/order/${paymentInfo.courseId}?message=${message}&code=${code}&orderId=${result.orderId}`)
      }
    }
  }
  return (
    <>
      <div id="payment-widget" />
      <button
        type="submit"
        onClick={handleClickPayButton}
        className={`rounded-md py-[18px] leading-[19px] text-white ${
          !isDisabled ? "cursor-default bg-primary-customGray bg-opacity-[0.6]" : "cursor-pointer bg-primary-customPink"
        }`}
        disabled={!isDisabled}
      >
        강의 결제하기
      </button>
    </>
  )
const triggerPaymentWidget = async () => {
    const paymentWidget = paymentWidgetRef.current
    try {
      if (result) {
        await paymentWidget?.requestPayment({
          orderId: result.orderId || "",
          orderName: paymentInfo.orderName,
          customerName: paymentInfo.customerName,
          customerEmail: paymentInfo.customerEmail,
          successUrl: `${process.env.NEXT_PUBLIC_PAYMENT_SUCCESS_URL}?couponId=${paymentInfo.couponId}`,
          failUrl: `${process.env.NEXT_PUBLIC_PAYMENT_FAIL_URL}/${paymentInfo.courseId}`,
        })
      }
    } catch (error: any) {
      console.log(error.message, error.code)
      // 토스 결제 요청 실패 에러 발생시 결제 취소 페이지로 라우팅
      if (error.message && error.code) {
        const { message, code } = error
        router.replace(`/order/${paymentInfo.courseId}?message=${message}&code=${code}&orderId=${result.orderId}`)
      }
    }
  }
  return (
    <>
      <div id="payment-widget" />
      <button
        type="submit"
        onClick={handleClickPayButton}
        className={`rounded-md py-[18px] leading-[19px] text-white ${
          !isDisabled ? "cursor-default bg-primary-customGray bg-opacity-[0.6]" : "cursor-pointer bg-primary-customPink"
        }`}
        disabled={!isDisabled}
      >
        강의 결제하기
      </button>
    </>
  )
위와 같습니다(코드가 길어서 나눠서 보냈습니다.)
20 replies
TPToss payments 개발자 커뮤니티
Created by yangnyeomcikin_37196 on 10/11/2023 in #❓┃연동개발-문의
결제 취소 후 재결제 시 카드결제 정보 선택 에러
@냥과장 @이실장 네 최초 결제창 띄우기 전에는 브라우저의 콘솔상 에러는 없습니다..ㅜㅜ 코드는 
const fetchRenderPayment = async () => {
    const paymentWidget = await loadPaymentWidget(clientKey, customerKey)
    const paymentMethodsWidget = paymentWidget.renderPaymentMethods(selector, {
      value: price,
      currency: "KRW",
      country: "KR",
    })

    paymentWidgetRef.current = paymentWidget
    paymentMethodsWidgetRef.current = paymentMethodsWidget

    triggerPaymentWidget()
  }

  // payment widget 렌더링
  useEffect(() => {
    if (result && price) {
      fetchRenderPayment()
    }
  }, [result, price])

  const handleClickPayButton = async () => {
    try {
      const res = await getStoredPaymentInfo(paymentInfo)
      if (res.status === 201) {
        await setResult(res.data.data)
        await setPrice(res.data.data.finalAmount)
        fetchRenderPayment()
      }
    } catch (error) {
      console.error("Payment error:", error)
    }
  }
const fetchRenderPayment = async () => {
    const paymentWidget = await loadPaymentWidget(clientKey, customerKey)
    const paymentMethodsWidget = paymentWidget.renderPaymentMethods(selector, {
      value: price,
      currency: "KRW",
      country: "KR",
    })

    paymentWidgetRef.current = paymentWidget
    paymentMethodsWidgetRef.current = paymentMethodsWidget

    triggerPaymentWidget()
  }

  // payment widget 렌더링
  useEffect(() => {
    if (result && price) {
      fetchRenderPayment()
    }
  }, [result, price])

  const handleClickPayButton = async () => {
    try {
      const res = await getStoredPaymentInfo(paymentInfo)
      if (res.status === 201) {
        await setResult(res.data.data)
        await setPrice(res.data.data.finalAmount)
        fetchRenderPayment()
      }
    } catch (error) {
      console.error("Payment error:", error)
    }
  }
20 replies
TPToss payments 개발자 커뮤니티
Created by yangnyeomcikin_37196 on 10/11/2023 in #❓┃연동개발-문의
결제 취소 후 재결제 시 카드결제 정보 선택 에러
@이실장 @냥과장 영상과 같이 최초 결제 시도시에는 위젯이 잘 뜨고 취소를 할 경우에 취소 메세지와 코드를 바탕으로 재결제 모달을 띄웁니다! 이때 재 결제를 시도하면 카드 선택과 무관하게 (위젯이 뜨지만 보이지는 않는 것 같습니다) 바로 카드 선택을 하지 않았다는 NEED_CARD_PAYMENT_DETAIL 에러가 뜹니다... ㅜㅜ
20 replies