kevinGwon•2w ago

V2 위젯 결제 연동 문의

안녕하세요. V2 위젯을 이용하여 페이팔및 이외 카드 결제 연동을 진행하면서 질문 내용이 있습니다. ---------------------------------------------------------------------------------------------------------------- 개발 환경 Script: https://js.tosspayments.com/v2/standard Framework: Next.js v14.3.3 ---------------------------------------------------------------------------------------------------------------- 질문 1. requestPayment 호출 시 method 및 amount 설정이 유효한가요? 결제 요청 시 "method, amount는 정의되지 않은 파라미터입니다." 라는 오류가 발생하며 요청이 실패합니다. 하지만 method와 amount를 생략하면 정상적으로 호출됩니다. 공식 가이드에 따르면 requestPayment 호출 시 method와 amount를 설정하는 것이 가능한 것으로 보이는데, 혹시 제가 놓치고 있는 부분이 있을까요? ref. 결제 요청 (requestPayment) ---------------------------------------------------------------------------------------------------------------- 질문 2. setAmount() 이후 requestPayment 호출 시 결제 모듈이 정상적으로 동작하지 않는 현상 useEffect를 활용하여 setAmount()로 결제 금액을 업데이트한 후 결제를 요청하면, 결제 페이지로 이동하지 않습니다. 로그를 확인해보면 "status: START"까지만 호출되고 이후 추가적인 액션이 발생하지 않는 상태입니다. 반면, setAmount()를 사용하지 않고 결제를 진행하면 정상적으로 호출됩니다. ref. setAmount() 이와 관련하여 해결 방법이나 고려해야 할 사항이 있을까요? 답변 기다리겠습니다. 감사합니다 💪

27 Replies

토스페이먼츠 BOT•2w ago

⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다

오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.

- 주문번호(orderId) : - 문의 내용 :

(img를 함께 첨부해주시면 도움이됩니다)

* 계약관련 내용은 1544-7772로 문의주세요. * 주말/공휴일에는 답변이 늦을 수 있어요.

Kimoon Lee•2w ago

1. 결제위젯에서는 해당값이 유효하지 않습니다. method, amount 는 위젯이 아니라 일반 결제창에서 사용하는 파라미터 입니다. setAmount() 이후 requestPayment 호출 하신 주문번호를 알려주시기 바랍니다.

kevinGwonOP•2w ago

테스트 환경에서 진행했습니다. orderId: 3253085 입니다!

Kimoon Lee•2w ago

해당 값으로 저희쪽 호출 이력이 없는것으로 보아 set amount 시에 이미 에러가 발생한게 아닌가 싶은데요. 사용하신 client key 알수 있을까요?

kevinGwonOP•2w ago

test_gck_Z 입니다. 결제 요청전에 로그에 업데이트 기록도 확인되고 있고. status: success 도 확인되고 있습니다.

kevinGwonOP•2w ago

Kimoon Lee•2w ago

콘솔에 다른 오류는 없으신가요?

Ayaan이안•2w ago

참고로 next.js면 npm으로 설치해서 테스트해보시는것도 좋습니다.

Kimoon Lee•2w ago

그런데 혹시 v1, v2 를 혼용해서 사용하시나요?

kevinGwonOP•2w ago

호출은 다음과 같이 되고 있습니다. v1,v2 혼용해서 같이 사용하는걸 구분할 수 있을까요? 스크립트 호출

// https://js.tosspayments.com/v2/standard

// https://js.tosspayments.com/v2/standard

위젯 렌더링

    const tossPayments = window.TossPayments(TossPayment.clientKey);
    const widgets = tossPayments.widgets({ customerKey });

    // ------ 주문의 결제 금액 설정 ------
    await widgets.setAmount({
      currency: PaymentLocale.currency,
      value: toCurrencyView(totalPaymentPrice.totalAmount),
    });

    // ------ 결제 UI 렌더링 ------
    const paymentMethods = await widgets.renderPaymentMethods({
      selector: `#${TossPayment.selector}`,
      variantKey: `COL_GL_${purchaseStore.selectedPaymentType}`, // 커스텀 결제 수단
    });

    // ------ 결제 수단 ------
    paymentMethods.on('paymentMethodSelect', ({ code: paymentMethod }: Record<string, unknown>) => {
      console.log('==== [LOG DATA: paymentMethod] ====');
      console.log(paymentMethod);
    });

    const tossPayments = window.TossPayments(TossPayment.clientKey);
    const widgets = tossPayments.widgets({ customerKey });

    // ------ 주문의 결제 금액 설정 ------
    await widgets.setAmount({
      currency: PaymentLocale.currency,
      value: toCurrencyView(totalPaymentPrice.totalAmount),
    });

    // ------ 결제 UI 렌더링 ------
    const paymentMethods = await widgets.renderPaymentMethods({
      selector: `#${TossPayment.selector}`,
      variantKey: `COL_GL_${purchaseStore.selectedPaymentType}`, // 커스텀 결제 수단
    });

    // ------ 결제 수단 ------
    paymentMethods.on('paymentMethodSelect', ({ code: paymentMethod }: Record<string, unknown>) => {
      console.log('==== [LOG DATA: paymentMethod] ====');
      console.log(paymentMethod);
    });

결제 요청

    widgets
      ?.requestPayment({
        orderId: `${orderId}`,
        orderName: payload.name,
        successUrl: "",
        failUrl: "",
        customerEmail: payload.buyer_email,
        customerName: payload.buyer_name,
      })

    widgets
      ?.requestPayment({
        orderId: `${orderId}`,
        orderName: payload.name,
        successUrl: "",
        failUrl: "",
        customerEmail: payload.buyer_email,
        customerName: payload.buyer_name,
      })

Kimoon Lee•2w ago

지금 캡쳐하신건 저희가 로그 남기는게 성공했다는 통신이라 console 쪽 캡쳐를 해서 보내주실수 있을까요?

kevinGwonOP•2w ago

콘솔 캡처는 payload 부분일까요? 조금더 상세하게 말씀해주시면 확인해서 공유드리겠습니다.

Kimoon Lee•2w ago

크롬에서 콘솔 탭이요.

Kimoon Lee•2w ago

여기 말씀드리는 겁니다. 지금은 network tab 내용을 보내주시는것 같아서요.

kevinGwonOP•2w ago

가격 변경이후 로그입니다!

Kimoon Lee•2w ago

setamount 하고 바로 requestpayment 를 호출하시나요?

kevinGwonOP•2w ago

바로 호출하지 않고, 사용자가 결제 버튼을 클릭할때 호출하고 있습니다. setamount -> 가격 변경시 업데이트 (by. useEffect) requestpayment -> 결제요청 클릭 가격을 변경하지 않고, 결제요청을 하면 다음의 API 를 호출하면서 결제창으로 이동되고는 있습니다. https://api.tosspayments.com/v1/payment-widget/widget-groups/keys?variantKey=COL_GL_PAYPAL

Kimoon Lee•2w ago

결제요청 클릭시에 저 unchecked rintime error 가 발생하시나요? 혹시 크롬 확장 프로그램 사용중이시면 확장프로그램 안깔린 PC 나 브라우저로 테스트 가능하신가요?

kevinGwonOP•2w ago

unchecked rintime error 에러는 안일어나고 있는걸로 확인 됩니다. 다른 환경에서 진행해보겠습니다.

kevinGwonOP•2w ago

파이어폭스에서 진행해보았고 현상은 동일하네요. 😢 .. (확장프로그램 없는 환경입니다.)