결제 화면 랜더링 안보임 현상
안녕하세요, 버블 플러그인 통해서 화면을 렌더링을 하였는데, 아무것도 안 보여지는 현상이 발생하고 있습니다 🙂
혹시 해당 부분이 어떤 원인인지 알 수 있을까요-?
45 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
혹시 매뉴얼로 해당 페이지에 저희 js 를 임포트 하셨나요?
지금 에러는 v1,v2 를 동시에 써서 발생하는데요 저희 플러그인은 v1 으로 되어 있어서 v2 SDK 를 직접 import 하시도록 되어 있으면 에러발생합니다.
아 맞습니다.
직접 임포트 했습니다..!
그러면 같이 쓰면 안되고 다른 페이지로 분리해야 하나요~?
페이팔을 구현하느냐고 같이 넣었었거든요,,,!
페이팔도 v1 으로 서비스됩니다
v1, v2 를 함께 사용하지 않으셔도 돼요
https://docs.tosspayments.com/guides/payment-widget/integration-paypal
PayPal 연동하기 | 토스페이먼츠 개발자센터
토스페이먼츠 결제위젯 SDK로 PayPal 해외 간편결제를 연동하는 가이드입니다. 결제위젯으로 간편하게 주문서 페이지의 결제 UI를 연동할 수 있기 때문에 해외 간편결제 연동에 추천하는 방법입니다.
v1은 더 이상 업데이트 안된다고 되어 있는데, 추후에 문제의 여지는 없나요~?
네 v1 사용하시는 고객들이 아직 많아서 특별히 문제 없으실겁니다.
v1으로 코드 변경을 하여 시도해봤는데 국내결제창이 아직도 이렇게 랜더링이 되지 않는데 혹시 추가적인 원인이 무엇이 있을까요~?
콘솔창에 에러가 있는지 봐주세요.
음.. 따로 문제는 없어 보이는데요~
사용하신 clientkey 랑 customerkey 좀 알려주세요. variantkey 하구요.
client key : test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm
customerkey : 1734414654190x373847213571422340
variantkey : DEFAULT
공개된 키를 쓰고 계시는군요
일단 로그상으로 크게 이슈가 없어 보이는데, 혹시 저희가 재현해 볼수 있는 URL 을 공유해주실수 있을까요?
아래 메세지 나간 내역이 있는데 한번확인해보시겠어요
렌더링 할 위치가 제대로 지저오디었는지 확인해주세요
플러그인을 쓰면 selector 는 자동으로 들어가긴 할텐데 이상하네요.
사이트 주소 : https://hol-dit.com/version-test
admin@noah-nomad.com
!Skr0828@
재현 방법
(1) 지점 선택 -> Book this spot 버튼 선택 -> checkout 페이지에서 'card' 버튼 클릭
Holdit - Luggage Storage Finder
Holdit - Easily Find Luggage Storage Locations in Korea
Holdit helps you quickly and conveniently find luggage storage locations in Korea. Discover nearby spots, compare prices, and book with ease. Perfect for travelers and commuters needing secure storage options.
전달드려봅니다!
혹시 결제위젯을 2개 렌더링하시나요?
구조를 보니까 팝업을 2개 만드시고 각각 위젯을 렌더링하시는것 같은데요.
플러그인으로 사용하실때는 이렇게 쓰시면 위젯이 첫번째 에만 렌더링됩니다.
제가 현재 페이팔과 국내결제 2가지를 사용해야 해서요~
그래서 페이팔을 누르면 페이팔 결제 스크립트를 발행하고 있고, 'card'를 누르면 플러그인을 활용한 국내결제를 랜더링 하고 있습니다.
그럼 동일 팝업에서 variant key 만 변경해서 렌더링하게 하셔야 합니다.
그리고 페이팔은 저희가 제공하는 위젯에서 처리를 못하기 때문에,
패이팔쪽은 결제위젯 말고 그냥 페이팔 버튼 만드신후에 결제창 띄우는 방식으로 사용하셔야 할것 같구요.
혹시 그러면 페이팔 클라이언트 아이디는 어디서 확인이 가능한건가요~?
위 전달주신 말씀은 팝업창으로 페이팔 위젯을 띄우지 말고, 바로 페이팔 결제 모드로 들어가라는 말씀이시죠~?
네 맞습니다.
그런데 페이팔 결제모드로 들어가려면 페이팔 클라이언트 아이디를 알아야 하지 않나요~?
혹시 해당 아이디는 어디서 확인이 가능할까요~?
PayPal 연동하기 | 토스페이먼츠 개발자센터
토스페이먼츠 결제창 SDK로 PayPal 해외 간편결제를 연동하는 방법입니다. 결제 페이지를 구축해서 페이팔 버튼을 직접 만들어야 합니다.
여기 참고하시면 됩니다.
페이팔 클라이언트 키가 토스페이먼츠 클라이언트키랑 같다고 생각하면 되나요~?
네 맞습니다.
아래와 같은 코드를 실행중인데, 캡쳐이미지와 같이 콘솔창에서 문구가 떠서 혹시 어떤 부분이 문제가 있을까요~?
-- 실행 코드 --
https://grave-traffic-be2.notion.site/17b55e0910a480e58be5e01947a26387?pvs=4
노아노마드 on Notion
페이팔 모드 진입 코드 | Notion
// PayPal SDK 로드
const paypalSdkScript = document.createElement('script');
paypalSdkScript.src =
Network 탭에서 해당 400나는 요청정보를 찾아서 캡쳐해 주실 수 있으신가요?
요건가요~?
paypalSdkScript.src = "https://www.paypal.com/sdk/js?client-id=live_gck_AQ92ymxN349JXAmMwoXvVajRKXvd¤cy=USD";
왜 이렇게 script 를 사용하시는 거죠?
Paypal을 직접 연동하시면 안됩니다.
토스페이먼츠 SDK를 통해서 페이팔 창을 직접 띄워야 합니다.
PayPal 연동하기 | 토스페이먼츠 개발자센터
토스페이먼츠 결제창 SDK로 PayPal 해외 간편결제를 연동하는 방법입니다. 결제 페이지를 구축해서 페이팔 버튼을 직접 만들어야 합니다.
이 문서를 전달드린 이유가, 토스페이먼츠 통해서 호출해야 하기 때문으로
해당 문서 대로 작업 하시기 바랍니다.
네, 해당 문서 참조하여 다시 코드 실행하였는데요~
https://grave-traffic-be2.notion.site/17b55e0910a480e58be5e01947a26387?pvs=4
그런데 이번에는 캡쳐이미지와 같이 문제가 발생하고 있습니다!
혹시 왜 위와 같은 문제가 발생하는지 알 수 있을까요~?
live_gck_AQ92ymxN349JXAmMwoXvVajRKXvd 말고 제가 알려드린 링크에 키를 써주세요.
test_ck_4Gv6LjeKD8apABeXYbwrwYxAdXy1
L 위 키를 사용하시라는 말씀이실까요~?
// TossPayments SDK 초기화
const clientKey = "test_ck_4Gv6LjeKD8apABeXYbwrwYxAdXy1"; // 실제 클라이언트 키로 교체
const tossPayments = TossPayments(clientKey);
// 결제 금액 설정
const amount = Number(1000); // 결제 금액 (숫자로 변환)
// 고유한 주문 ID 생성
const orderId =
order-${new Date().getTime()};
// 결제 UI 렌더링
tossPayments.requestPayment('PayPal', {
amount: amount,
orderId: orderId,
orderName: "Default Order Name",
successUrl: window.location.origin + "/success",
failUrl: window.location.origin + "/fail",
customerEmail: "test@example.com", // 동적 값으로 교체
customerName: "John Doe", // 동적 값으로 교체
products: [
{
name: "Small Bag",
quantity: 1,
unitAmount: 1000,
currency: "USD",
description: "small_bag",
}
],
paymentMethodOptions: {
paypal: {
setTransactionContext: {
sender_account_id: "test@example.com",
sender_first_name: "John",
sender_last_name: "Doe",
sender_email: "test@example.com",
sender_phone: "123-456-7890",
sender_country_code: "US",
sender_create_date: "2024-01-09T19:14:55.277Z",
}
}
}
});위와 같이 스크립트를 발행하는데, 페이팔 화면이 아닌 캡쳐이미지와 같은 화면이 나옵니다..!
제가 보내드린 링크 참고하세요. Ayaan 님이 보내신거 말구요.
키는 이거 쓰셔야 하고
test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq
호출은 이런방식으로 하셔야 합니다.
해결되었습니다.
오랜시간 도움 감사합니다!!
같은 링크였습니다..~
아 그렇군요..
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.