해외카드 + PayPal 연동하기 가이드 오류
1. 가이드의 예제를 참고하면
variantKey: "DEFAULT" 때문에 국내 결제 환경이 나옵니다.
해외카드 + paypal을 보기 위한 variantKey는 뭔가요?
2. document.querySelector("#payment").addEventListener("click", async () => {
그리고 #payment는 없습니다. 결제하기 버튼의 #payment-button이 아닌지요?
20 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
1. 상점관리자 -> 결제UI 설정에서 직접 UI를 만드시고, 그 varientKey를 넣으면 됩니다.
2. 네 맞습니다. payment-button으로 해주시면 됩니다. 샘플 코드는 말 그대로 예시이므로 귀사 연동하시는 페이지에 맞게 수정하면 됩니다.
저는 귀사의 개발자 센터 가이드에 있는 샘플 코드가 잘못되었다는 걸 알려드립니다. 업데이트가 필요해 보입니다.
그리고 샘플코드에서
if (selectedPaymentMethod.code === "CARD") {
// 해외 카드 결제창 호출
const clientKey = "test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq" // API 개별 연동 클라이언트 키(해외 카드 MID)
const payment = TossPayments(clientKey)
payment.requestPayment({
method: "CARD",
amount: {
currency: "KRW",
value: 50000,
},
orderId: "n-eO8KbB5WoYUbvCNeuu9",
orderName: "토스 티셔츠 외 2건",
customerEmail: "customer123@gmail.com",
customerName: "김토스",
customerMobilePhone: "01012341234",
card: {
useInternationalCardOnly: true,
},
});
return;
}
여기에서
Uncaught (in promise) TypeError: payment.requestPayment is not a function
에러가 발생합니다.
네~ 샘플 오타는 수정할게요
어디서 복사하셨어요?
어떤 샘플 복사해서 테스트 하고 있으신지 알려주세요
@woo 어디에서 어떤 샘플을 보셨는지, 링크 전달 주시겠어요?
빠르게 수정 하겠습니다
해외결제 연동하기 | 토스페이먼츠 개발자센터
해외결제는 해외에서 발급된 카드 또는 해외 간편결제 서비스를 사용한 결제입니다. 국내에 거주하는 외국인 또는 해외에 거주하는 구매자에게 상품을 판매할 때 사용하세요.
버그도 같이 수정해주세요
샘플은 샘플인뿐이에요!
지금 이용하는 가맹점에서 인입된 버그는 없어요
샘플은 샘플일 뿐,
샘플에 잘못 명시된 내용은 수정 할텐데
버그는 처음 들어요
페이팔 - 해외카드 계약이 완료 되셨나요?
가맹점 명이 어떻게 되시나요?
계약한 상점으로 UI 설정은 어떻게 하셨는지 봐드릴게요
기본적으로
페이팔 계약 완료, 해외카드 계약 완료
+ 해외카드 호출 커스텀 결제수단 추가 등이 완료 되어있어야 해요
위에 것이 다 준비 되셨는지를 봐드릴게요
위 샘플 코드에 대한 오류 건입니다. 샘플 코드를 그대로 실행시키면 가이드에 설명하는 해외 카드 + Paypal 연동 화면을 확인할 수 없다는 건가요?
결제 위젯 이용하시는 것 같은데,
현재 결제 위젯에서 Paypal을 이용하려면, Paypal 계약이 완료, 혹은 진행 중인 MID의 테스트 키와 귀사에서 설정한 Varient Key가 필요합니다.
이는 샘플의 문제가 아니라, 해외 간편 결제 및 결제 위젯 Pro(일반 해외 카드 결제와 같이 이용하기 위함) 계약이 선행되어야 하기 때문입니다.
아직 계약이 완료되지 않은 상태에서 제공된 키로는 Paypal이 표시되지 않고, 국내 결제 수단만 노출되는 것이 정상입니다. Paypal 계약이 없는데 노출되는 것은 불가능하기 때문입니다.
이는 샘플 코드를 토스페이먼츠에서 수정 제공하여서 해결할 수 있는 부분이 아니며, 버그나 오류가 아닙니다.
-------------------------------------------------
유부장님 말씀처럼, 샘플은 말 그대로 ‘참고용 예시’로, 귀사의 서비스에 맞게 연동해야 합니다. 샘플대로 바로 결제를 발생시키는 것이 아닙니다.
가맹점명 혹은 MID 정보를 제공해 주시면, Paypal 및 해외 카드 결제 계약 상태와 결제 위젯 Pro 계약 및 커스텀 결제 수단 등록 여부를 확인하여 유부장님께서 답변해 드릴 예정입니다.
이후, 어떤 키로 변경하고 요청해야 해외 카드와 Paypal이 연동된 화면을 볼 수 있는지 확인하실 수 있을 것 같습니다.
-------------------------------------------------
상단 마크업에는
#payment-button 이지만 JS에서는 #payment 인 부분은 확인했습니다.
c.c @유부장 확인 부탁드립니다.
URL: https://docs.tosspayments.com/guides/v2/learn/foreign-payment#%ED%95%B4%EC%99%B8-%EC%B9%B4%EB%93%9C--paypal-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0
계약 유무 다 확인했습니다.
Paypal 샘플코드는 문제없이 동작하고 해외카드 샘플코드에서 문제가 발생해서 위에 댓글에 말씀드렸습니다.
- Uncaught (in promise) TypeError: payment.requestPayment is not a function
---------------------------------------------------------------------------------------------------
샘플 코드에서 paypal 호출 시 widgets의 requestPayment를 사용하는데 해외 카드 샘플 코드에서는 tossPayments의 requestPayment를 사용하네요.
말씀하신 해외카드, Paypal MID 보내드립니다.
해외카드 MID : linkroy26m
Paypal MID : linkrox6nx
위젯은 linkrox6nx(Paypal MID), variantKey: "MK" 입니다.
샘플은 말 그대로 샘플이니, 상황에 맞게 바꿔서 진행 해주셔야 합니다.
자 하나씩 정리 해볼게요. 따라와주세요.
1) 우선 paypal MID 가 연결된 위젯 UI 가 설정 되어야 합니다. 테스트 variantKey MK 로 설정 하셨네요. 잘 하셨습니다.
2) 다음은 커스텀결제수단 추가 입니다."Card" 로 커스텀 결제수단 버튼 추가 + 해당 버튼에 연결된 키값 추가 설정 하셨네요. 잘 하셨습니다. 이 키 값을 잘 기억 하세요.
3) variantKey MK 로 위젯을 렌더링 합니다. 첨부된 이미지 처럼 렌더링 되어야 겠죠.
4) 'Card' 버튼을 선택해서 결제 진행을 할때, 아까 어드민에서 추가한 코드값, 이 코드값을 selectedPaymentMethod 에 명시 해줘야 합니다. 어떤 코드값으로 설정 했나요?
5) 해외카드를 호출하는 것과, 페이팔을 호출하는 것을 다르게 설정하는 겁니다. 샘플 보시면 이해하시겠지만, 위젯에서 페이팔 호출할때 초기화된 const tossPayments = TossPayments(clientKey); 이 부분하고
const payment = TossPayments(clientKey) 이 부분을 잘 살펴 보세요
해외카드를 Card 로서 따로 커스텀 버튼을 분리 시켜서,
커스텀 버튼으로 분리된 부분이 클릭 되었을때
해당 커스텀 결제수단에 맞는 키로 결제창을 호출하도록 구현이 되어 있다는 의미 입니다
이해 되시나요?
아뇨 이해 하고 있다고요
전화 통화 가능하세요?
스크립트 첨부 합니다.
귀사 가이드 샘플 코드에 변수 및 파라미터 명 잘못된 거 수정해서 쓰고 있고 각 상황에 맞는 mid api 연동 key를 통해 테스틀 했습니다.
paypal은 문제가 없고 card 부분에 payment.requestPayment에서 payment.requestPayment is not a function 스트립트 에러가 발생합니다.
아래를 이런식으로 수정해서 해보세요 그럼 이해 되실 겁니다
const clientKey2 = "test_ck_Gv6LjeKD8aXZdOKKv79YrwYxAdXy"
const tossPayments2 = TossPayments(clientKey2)
const customerKey = "2iJ8THRYjV1bK-vkXWrDb";
const payment = tossPayments2.payment({ customerKey });
if (selectedPaymentMethod.code === "test") {
// 해외 카드 결제창 호출
const clientKey2 = "test_ck_Gv6LjeKD8aXZdOKKv79YrwYxAdXy" // API 개별 연동 클라이언트 키(해외 카드 MID)
const tossPayments2 = TossPayments(clientKey2)
const customerKey = "2iJ8THRYjV1bK-vkXWrDb";
const payment = tossPayments2.payment({ customerKey });
payment.requestPayment({
method: "CARD",
amount: {
currency: "KRW",
value: 50000,
},
orderId: "jIss1EIleu6TTqx6kZFZh",
orderName: "토스 티셔츠 외 2건",
customerEmail: "customer123@gmail.com",
customerName: "김토스",
customerMobilePhone: "01012341234",
card: {
useInternationalCardOnly: true,
},
});
return;
}
이런 식 으로요
아래 부분에서 TossPayments 초기화를 새롭게 했고요
새롭게 초기화 한 부분에서 payment 로 지정 해줬고요 (customerKey 설정 등)
그 다음 payment 에서 requestPayment 호출 했습니다
어떤 부분에서 혼선이 있으신지는 이해 했습니다
customerKey 로 지정하는 부분이 누락되어 호출 했을때 함수 에러가 발생한다고 이해하겠습니다
일단 동작은 잘됩니다.
== 기존 가이드 샘플 코드
const clientKey = "test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq" // API 개별 연동 클라이언트 키(해외 카드 MID)
const payment = TossPayments(clientKey)
payment.requestPayment({
== 수정 해주신 샘플 코드
const clientKey = "test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq" // API 개별 연동 클라이언트 키(해외 카드 MID)
const tossPayments2 = TossPayments(clientKey)
const customerKey = "2iJ8THRYjV1bK-vkXWrDb";
const payment = tossPayments2.payment({ customerKey });
payment.requestPayment({
==================================================================
requestPayment를 호출하는 객체 자체가 다른데 이걸 제가 이해가 못했고 혼선이 있었다고 말씀하시나요?
가이드 샘플 코드 실행해 보시면 변수 명부터 호출까지 모든 과정이 잘못되어있습니다.
반드시 업데이트가 필요해 보입니다.
네~ 샘플 업데이트 할게요!
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.