해외 결제 연동 관련하여 문의 드립니다.
저희는 페이팔과 해외카드를 동시에 사용하고자하며, 결제 위젯을 사용하고 있습니다.
https://docs.tosspayments.com/guides/learn/foreign-payment
위 문서의 "PayPal+ 해외카드 연동하기" 부분을 참고하여 작업 중에 있습니다.
useInternationalCardOnly: true // 다국어 결제창 열기
해당 부분을 추가하였으나 영어로 표기가 되지 않고 있습니다. 결제창에 대한 언어 설정이 브라우저 기준인지 , 위에 설정 기준인지도 확인 부탁드립니다.
그리고 order_id 는 Merchant_12614_1693455751904 로 하여 테스트 진행하였습니다.
해외결제 연동하기 | 토스페이먼츠 개발자센터
토스페이먼츠로 해외결제를 연동하세요. 해외결제는 해외에서 발급된 카드 또는 해외 간편결제 서비스를 사용한 결제입니다. 국내에 거주하는 외국인 또는 해외에 거주하는 구매자에게 상품을 판매할 때 사용하세요.
30 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
Merchant_12614_1693455751904 이 주문 번호로 요청하셨는데, 영문 해외 결제창이 안뜨신건가요?
이렇게 한글로 된 결제창이 뜨고 있습니다.
혹시 해당 결제창을 저희가 띄워볼수 있을까요?
보내신 파라미터 로그대로 저희 테스트 페이지에서 띄워보면 정상적으로 영문결제창이 표시 되고 있어서요.
아직 운영에 적용 되지 않은 부분이라 직접 접근은 어렵습니다.
브라우저 언어 설정과 상관없이 파라미터 useInternationalCardOnly 가 true면 영어로 된창이 뜨는 것이 맞는거죠?
네 맞습니다.
그런데 위젯으로 연동하신건가요?
네 위젯으로 연동하였습니다
varientkey 는 DEFAULT-2 를 쓰신건가요?
basic 사용 했습니다
basic 은 일반 결제가 설정되어 있지 않은것 같은데요.
basic 결제수단 목록에 추가해서 사용 중입니다.
커스텀 버튼을 만들어서 하시면 안됩니다.
https://docs.tosspayments.com/guides/learn/foreign-payment#paypal--%ED%95%B4%EC%99%B8-%EC%B9%B4%EB%93%9C-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0
위에 메뉴얼에 커스텀 버튼으로 안내 되는 거 아닌가요?
해외결제 연동하기 | 토스페이먼츠 개발자센터
토스페이먼츠로 해외결제를 연동하세요. 해외결제는 해외에서 발급된 카드 또는 해외 간편결제 서비스를 사용한 결제입니다. 국내에 거주하는 외국인 또는 해외에 거주하는 구매자에게 상품을 판매할 때 사용하세요.
아 이방법을 쓰시는 거군요. 잠시만요.
위젯 호출하는 코드를 공유해 주실수 있나요?
위젯 생성부분을 드려야할까요 아니면 커스텀 리퀘스트 처리 부분에 대한 걸 드려야할까요?
커스텀 리퀘스트 처리 부분 을 보내주세요.
지금렌더링은 이렇게 잘 되시는 거죠?
reqInfo = {
orderId: orderRes.value.shop_payment_tran_id,
customerName: profileRes.value.first_name + ' '
+ profileRes.value.last_name,
orderName: $("#itemName").text(),
successUrl: "http://localhost:8080/success",
failUrl: "http://localhost:8080/fail",
customerEmail: 'customer123@gmail.com',
amount: 1000,
useInternationalCardOnly: true
}
console.log($("#itemPrice").data('price'))
paymentWidget.requestPayment(reqInfo).catch(function (error) {
console.log(error)
if (error.code === 'INVALID_ORDER_NAME') {
// 유효하지 않은 'orderName' 처리하기
} else if (error.code === 'INVALID_ORDER_ID') {
// 유효하지 않은 'orderId' 처리하기
}else if (error.code === 'NEED_AGREEMENT_WITH_REQUIRED_TERMS') {
$("#spanTermsAgreeNotice").text("You need to agree with required terms to pay.");
}
});
코드는 위와 같습니다.
렌더링은 정상적으로 되는데 그후 결제창만 한글창으로 뜨고 있습니다
paymentWidget.requestPayment 이 아니고 가이드에 있는대로 별도의 Tosspayment 객체를 쓰셔야 합니다.
[CARD] 버튼으로 연동하신 부분은 js가 다른데, 아래 문서 같이 참고하시면 됩니다.
https://docs.tosspayments.com/guides/payment/integration
토스페이먼츠 결제창 연동하기 | 토스페이먼츠 개발자센터
카드 결제창을 연동해보세요.
아 죄송합니다 .커스텀 리퀘스트 관련한 부분은
paymentMethods.on("customRequest", paymentMethodKey => {
console.log(reqInfo)
if (paymentMethodKey === "CARD") {
var tossPayments = TossPayments(
Config.instance.PG.toss.clientKey.card)
tossPayments.requestPayment(reqInfo)
} else {
console.log(paymentMethodKey)
}
})
이런식으로 처리하고 있습니다. 위에서 만든 reqInfo 를 전달하고 있습니다
위에 보내주신 코드에 이 부분을 수정해주시면 됩니다.
paymentWidget.requestPayment(reqInfo).catch(function (error) {
여기서 paymentWidget.requestPayment가 아니라
tossPayments.requestPayment("카드", {
이렇게 되어야 합니다.
paypal은 결제위젯 SDK로 호출되고 해외카드는 커스텀 버튼으로 별도로 결제모듈 호출된다고 이해하시면 됩니다.
"카드" 라고 앞에 값을 넣으니 영어로 출력이 되네요
실제코드는 아래 링크가 맞으며 해당 부분에 js 로드와 tossPayments.request를
https://docs.tosspayments.com/guides/learn/foreign-payment#paypal--%ED%95%B4%EC%99%B8-%EC%B9%B4%EB%93%9C-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0
해외결제 연동하기 | 토스페이먼츠 개발자센터
토스페이먼츠로 해외결제를 연동하세요. 해외결제는 해외에서 발급된 카드 또는 해외 간편결제 서비스를 사용한 결제입니다. 국내에 거주하는 외국인 또는 해외에 거주하는 구매자에게 상품을 판매할 때 사용하세요.
해결되었을까요?
네, 근데 궁금한 것이 있습니다.
tossPayments.requestPayment(reqInfo) 와 tossPayments.requestPayment("카드", reqInfo)
이게 한영 결제창 차이 말고 다른 차이가 더 있을까요? 앞에 것으로 해도 정상 결제 되었다고 나와서요
카드 라고 넣지 않으시면 기본 결제창으로 redirect가 되는데 그게 한글 카드 창입니다.
아 그래서 결제는 정상적으로 처리 된 거군요. 확인 및 지원 감사합니다!
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.