ppd0523•3w ago

결제위젯 brandpay redirectUrl 호출 안 함

1) javascript SDK으로 개발. '일반결제 -> 카카오페이' 결제 시도할 경우 "지원하지 않는 결제 수단" 2) javascript SDK으로 개발. 결제위젯 연동으로 구현할때 위젯이 렌더링 되지 않고 아래 에러가 나타납니다. TypeError: Failed to construct 'Headers': String contains non ISO-8859-1 code point.

tossPayments = await loadTossPayments(clientKey);
widgets = tossPayments.widgets({
    customerKey: me.username,
    brandpay: {
        redirectUrl : URL
    },
});

tossPayments = await loadTossPayments(clientKey);
widgets = tossPayments.widgets({
    customerKey: me.username,
    brandpay: {
        redirectUrl : URL
    },
});

위 코드로 실행하고 widget에서 redirectUrl을 호출하지 않습니다. 상점아이디: cp_photornkwl

22 Replies

토스페이먼츠 BOT•3w ago

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

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

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

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

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

이실장•3w ago

접근가능한 사이트 있나요?

Kimoon Lee•3w ago

실제 테스트 하시는 페이지가 http://localhost:5173/ 이고 redirectURL 은 127.0.0.1:8000 로 설정하신것 같습니다. 이러면 브라우저 에서 Domain 이 다르게 되어 CORS 에러가 발생합니다. 두개의 도메인을 맞춰주세요.

ppd0523•2w ago

host: http://127.0.0.1:5173/ redirectUrl: http://127.0.0.1:5173/api/tosspayments/brandpay-auth 도메인을 일치시켜 호출하는 페이지와 redirectUrl origin을 일치시켰지만 동일한 에러를 내고 있습니다.

이실장•2w ago

redirectUrl에서 토큰발급은 일어나고 있나요?

Kimoon Lee•2w ago

코드 뿐만 아니라 상점관리자에서도 변경해 주셔야 합니다. 상점관리자는 포트가 8000 으로 되어 있습니다.

ppd0523•2w ago

확인 감사드립니다. 상점관리자에서 redirectUrl을 정정했지만 redirectUrl에 토큰발급은 일어나지 않고(호출하지 못하고),

TypeError: Failed to construct 'Headers': String contains non ISO-8859-1 code point

TypeError: Failed to construct 'Headers': String contains non ISO-8859-1 code point

상점아이디 : cp_photornkwl 에러에 대해 확인 부탁드립니다.

이실장•2w ago

http://127.0.0.1:5173/api/tosspayments/brandpay-auth
로 요청온 내역이 없는데요 사용 중인 customerKey남겨주시겠어요

ppd0523•2w ago

방금 요청한 내역으로 customerKey는 test입니다. 10/Oct/2024:01:09:43+0000 호출시간은 5초 내외입니다.

Kimoon Lee•2w ago

customerkey 를 좀 특이한 것으로 해주실수 있을까요?

ppd0523•2w ago

넵 다시 해보겠습니다 customerKey 으로 test664cf3ded785948eb682007d 적용해서 에러없이 ui rendering 됐습니다. 감사합니다 😂 일반결제에서 카카오페이로 지원되지 않는 간편결제 스단입니다. 에러는 어딘가 문의글에서 보기로 토스에서 기능을 열어야한다고 했는데 저도 가능할까요?

이실장•2w ago

TypeError: Failed to construct 'Headers': String contains non ISO-8859-1 code point 에러도 더이상 발생않하나요? custoemrKey만 바꾸니까 해결됬나요?

ppd0523•2w ago

네 customerKey 변경만으로 에러가 해결됐습니다

이실장•2w ago

front단에서 customerKey와 redirectUrl 내에서 customerKey에 차이가 있었나요? 아니면 기존에도 동일했는데 값만 바꾸니까 해결되었나요?

ppd0523•2w ago

다시 확인해보니 redirectUrl accessToken은 호출되지 않고 front단에서만 에러가 사라졌습니다 정정입니다

이실장•2w ago

redirectUrl을 안보내고 계신것 같은데요

ppd0523•2w ago

customerKey와 front단 customerKey가 동일합니다. customerKey: test -> front단 렌더링 에러 customerKey: test664cf3ded785948eb682007d -> front단 브라우저에서 정상호출, redirectUrl상의 서버에서는 호출 기록 없음({"isAgree":false,"register":false,"card":false,"account":false,"billing":false})

이실장•2w ago

위젯 객체 초기화하는 부분 코드 올려주세요

ppd0523•2w ago

let tossPayments = null
let paymentMethodWidget = null;
let agreementWidget = null;
let widgets = null;

const clientKey = "test_gck_GePWvyJnrKmndDDa9nqa3gLzN97E";
        if (tossPayments == null) {
            tossPayments = await loadTossPayments(clientKey);
        }

        widgets = tossPayments.widgets({
            customerKey: `${me.username}${me._id}`,
            brandpay: {
                redirectUrl: 'http://127.0.0.1:5173/api/tosspayments/brandpay-auth',
            },
        });

        widgets.setAmount({
            currency: item.quote,
            value: item.price * itemCount,
        });

        paymentMethodWidget = await widgets.renderPaymentMethods({
            selector: "#payment-container",
        });

        agreementWidget = await widgets.renderAgreement({
            selector: "#payment-agreement",
        });

        paymentMethodWidget.on('paymentMethodSelect', async (paymentMethod) => {
            console.log(paymentMethod.code)
        });

let tossPayments = null
let paymentMethodWidget = null;
let agreementWidget = null;
let widgets = null;

const clientKey = "test_gck_GePWvyJnrKmndDDa9nqa3gLzN97E";
        if (tossPayments == null) {
            tossPayments = await loadTossPayments(clientKey);
        }

        widgets = tossPayments.widgets({
            customerKey: `${me.username}${me._id}`,
            brandpay: {
                redirectUrl: 'http://127.0.0.1:5173/api/tosspayments/brandpay-auth',
            },
        });

        widgets.setAmount({
            currency: item.quote,
            value: item.price * itemCount,
        });

        paymentMethodWidget = await widgets.renderPaymentMethods({
            selector: "#payment-container",
        });

        agreementWidget = await widgets.renderAgreement({
            selector: "#payment-agreement",
        });

        paymentMethodWidget.on('paymentMethodSelect', async (paymentMethod) => {
            console.log(paymentMethod.code)
        });

이실장•2w ago

test664cf3ded785948eb682007d 로 카드등록해보셨어요?

ppd0523•2w ago

시도해보겠습니다 카드등록 진행됩니다 결제 호출까지도 됩니다. 감사합니다

토스페이먼츠 BOT•2w ago

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

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