해외카드 + PayPal 연동하기 가이드 오류
1. 가이드의 예제를 참고하면
variantKey: "DEFAULT" 때문에 국내 결제 환경이 나옵니다.
해외카드 + paypal을 보기 위한 variantKey는 뭔가요?
2. document.querySelector("#payment").addEventListener("click", async () => {
그리고 #payment는 없습니다. 결제하기 버튼의 #payment-button이 아닌지요?
16 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
저는 귀사의 개발자 센터 가이드에 있는 샘플 코드가 잘못되었다는 걸 알려드립니다. 업데이트가 필요해 보입니다.
그리고 샘플코드에서
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 샘플코드는 문제없이 동작하고 해외카드 샘플코드에서 문제가 발생해서 위에 댓글에 말씀드렸습니다.
- 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를 호출하는 객체 자체가 다른데 이걸 제가 이해가 못했고 혼선이 있었다고 말씀하시나요?
가이드 샘플 코드 실행해 보시면 변수 명부터 호출까지 모든 과정이 잘못되어있습니다.
반드시 업데이트가 필요해 보입니다.
네~ 샘플 업데이트 할게요!
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.