우치•10mo ago

결제수단이 아직 선택되지 않았어요. 결제수단을 선택해 주세요.

잘되다나 갑자기 이렇게 뜬다고 나옵니다. 뭔가 바뀌었다고 했는데 가이드에는 뭐가 어떻게 바뀌었는지 나와있지가 않네요.

13 Replies

토스페이먼츠 BOT•10mo ago

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

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

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

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

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

유부장•10mo ago

결제위젯 연동은 어떻게 진행 하셨는지, 위젯 렌더링 부분, 위젯 초기화 부분 등 html 코드를 알려 주시겠어요?

today.lastday•10mo ago

div id가 변경되었는지 확인 부탁드려요

우치OP•10mo ago

 import { loadPaymentWidget } from '@tosspayments/payment-widget-sdk';

const customerKey = '-oX_VxaJPm0DKzIDfm_Ev';
const clientKey = process.env.REACT_APP_TOSS_PAYMENTS_Client_Key?.toString() || '';

interface ITossOrder {
    id: string;
    totalPrice: number;
    asset_name: string;
    user_name: string;
}

export async function tossPaymentsOrder({ id, totalPrice, asset_name, user_name }: ITossOrder) {
    const paymentWidget = await loadPaymentWidget(clientKey, customerKey);

    paymentWidget.renderPaymentMethods(
        '#payment-widget',
        { value: totalPrice },
        // 렌더링하고 싶은 결제 UI의 variantKey
        // 아래 variantKey는 문서용 테스트키와 연동되어 있습니다. 멀티 UI를 직접 만들고 싶다면 계약이 필요해요.
        // https://docs.tosspayments.com/guides/payment-widget/admin#멀티-결제-ui
        { variantKey: 'DEFAULT' }
    );

    paymentWidget.requestPayment({
        orderId: id,
        orderName: asset_name,
        customerName: user_name,
        // amount: totalPrice,
        successUrl: `${window.location.origin}/toss-payments-complete`,
        failUrl: `${window.location.origin}`,
    });
}

 import { loadPaymentWidget } from '@tosspayments/payment-widget-sdk';

const customerKey = '-oX_VxaJPm0DKzIDfm_Ev';
const clientKey = process.env.REACT_APP_TOSS_PAYMENTS_Client_Key?.toString() || '';

interface ITossOrder {
    id: string;
    totalPrice: number;
    asset_name: string;
    user_name: string;
}

export async function tossPaymentsOrder({ id, totalPrice, asset_name, user_name }: ITossOrder) {
    const paymentWidget = await loadPaymentWidget(clientKey, customerKey);

    paymentWidget.renderPaymentMethods(
        '#payment-widget',
        { value: totalPrice },
        // 렌더링하고 싶은 결제 UI의 variantKey
        // 아래 variantKey는 문서용 테스트키와 연동되어 있습니다. 멀티 UI를 직접 만들고 싶다면 계약이 필요해요.
        // https://docs.tosspayments.com/guides/payment-widget/admin#멀티-결제-ui
        { variantKey: 'DEFAULT' }
    );

    paymentWidget.requestPayment({
        orderId: id,
        orderName: asset_name,
        customerName: user_name,
        // amount: totalPrice,
        successUrl: `${window.location.origin}/toss-payments-complete`,
        failUrl: `${window.location.origin}`,
    });
}

{tosModal && (
                <Modal>
                    <Body id="payment-widget" />
                </Modal>
            )}

{tosModal && (
                <Modal>
                    <Body id="payment-widget" />
                </Modal>
            )}

유부장•10mo ago

특정상황일때 결제위젯 모달을 띄우나요? 이때 결제위젯은 정상적으로 렌더 되어 있는 상태 이고, 렌더된 결제위젯 상에서 결제 수단들을 선택하고 결제하기를 수행한것인가요?

우치OP•10mo ago

옛날엔 모달이 자동으로 떴었는데 바뀌었어요.

유부장•10mo ago

잘못 연동 하셨습니다. 주문서 상에 div id 로 payment-widget 명시해둔 곳에 위젯 렌더링이 되어야 하고, 렌더링 된 위젯에서 결제할 수단 선택이 선행 되어야 합니다 .

유부장•10mo ago

https://github.com/tosspayments/payment-widget-sample/blob/main/react/src/pages/Checkout.tsx

GitHub

payment-widget-sample/react/src/pages/Checkout.tsx at main · tosspa...

토스페이먼츠 결제위젯 샘플 프로젝트입니다. . Contribute to tosspayments/payment-widget-sample development by creating an account on GitHub.

우치OP•10mo ago

지금은 이상태에서 다음으로 넘어가지를 않아요

유부장•10mo ago

넘어가지 않는다는 의미가, paymentWidget.requestPayment 에 결제하기 버튼을 연결해두셨을텐데, 해당 액션 후에도 넘어가지 않는다는 의미인가요?

우치OP•10mo ago

네

유부장•10mo ago

콘솔로그에는 뭐가 보이시나요

토스페이먼츠 BOT•10mo ago

❤️ 기술문의 경험이 어떠셨나요?!

간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.

결제수단이 아직 선택되지 않았어요. 결제수단을 선택해 주세요.

Did you find this page helpful?