iOS 결제 모듈에 대해 문의합니다.
어제부터 오후 15시 부터 iOS결제 모듈 사용시 결제 UI를 불러오지 못하는 문제가 발생되고 있습니다.
사용된 코드는 PaymentWidget를 이용 하였으며 renderPaymentMethods가 작동되지 않는것 같아 보였습니다.
해당 부분에 대해 답변 요청합니다.
35 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
저희쪽에서 재현해 볼수 있는 방법이 있을까요?
그리고 사용중인 MID 를 알려주시기 바랍니다. 마지막으로 콘솔쪽에 별다른 에러는 없으실까요?
재현 방법에 대해선 잘 모르겠습니다.
지금 다시 테스트해보니 테스트키로는 잘되는데 라이브키로 하면 동일한 증상이 나옵니다.
MID는 cjsmarsh2q 입니다.
사용된 코드 일부 공유드립니다.
"""
<!DOCTYPE html>
<html>
<head>
<title>결제하기</title>
<meta charSet="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://js.tosspayments.com/\(TossPaymentsEnvironment.stage)/payment-widget"></script>
<style>
#productInfo { margin:10px; }
#payment-widget { margin:10px; }
#payment-button{ width:100%; padding:15px; background-color:#3065AC; color:white; border-radius:3px; font-size:16px; border:none; margin-top:10px}
.title {margin: 0 0 4px; font-size: 20px; font-weight: 600;color: #4e5968;}
</style>
</head>
<body style="margin:0;padding:0;overflow:hidden;">
<!-- 상품 정보 영역-->
<div id="productInfo">
<div class="title">상품 정보</div>
<p>(self.paymentInfo.orderName)</p>
<p>결제 금액: (numberFormatter(number: Int(self.paymentInfo.amount)))원</p>
<hr>
</div>
<!-- 결제 방법 영역-->
<div id="payment-method"></div>
<div id="agreement"></div>
<!-- 결제하기 버튼 -->
<div id="payment-widget" />
<button id="payment-button">결제하기</button>
</div>
</body>
</html>
"""
var requestPaymentJavascript: String {
let javascriptString = """
const widget = PaymentWidget("(self.clientKey)", "(self.customerKey)");
const { updateAmount } = widget.renderPaymentMethods('#payment-method', (self.paymentInfo.amount));
const paymentAgreement = widget.renderAgreement('#agreement');
document.getElementById("payment-button").addEventListener("click", function () {
widget.requestPayment((self.paymentInfo.requestJSONString ?? ""));
})
"""
return javascriptString
}
<script src="https://js.tosspayments.com//(TossPaymentsEnvironment.stage)/payment-widget"></script>
이건 무슨 내용인가요?
'/' 이게 하나 더 들어가 있는것 같기도 하고
TossPaymentsEnvironment.stage 는 v1 으로 적용 되는 것이 맞을까요?
혹 이건 어디에서 확인하셨는지 알 수 있을까요?
네 맞습니다 v1을 뜻합니다.
'/' 이건 하나 더 넣어야 변수 지정을 할 수 있다는 의미로 이해하면 될까요?
아닙니다. 표기상 오류입니다.
코드를 옮기다 보니 //로 표시된것 같습니다.
<script src="https://js.tosspayments.com/v1/payment-widget"></script>
원소스에는 위와같이 제대로 표기되고있습니다.
그럼 스크립트는 v1 스크립트를 쓰시는 것 같은데
js 단에서 메소드 지정하는 방법은 v2 방법을 사용하시고 있는것이다, 라고 이해하면 되나요?
iOS SDK는 v2지원이 없는걸로 알고있습니다. 따라서 사용되고 있는 것은 v1입니다.
let javascriptString = """
var tossPayments = TossPayments('(self.clientKey)');
tossPayments.requestPayment('(self.paymentMethod.rawValue)', (self.paymentInfo.requestJSONString ?? ""));
"""
위 소스 이용시 제대로 표기가 됩니다.
const { updateAmount } = widget.renderPaymentMethods('#payment-method', (self.paymentInfo.amount));
여기 금액 value amount 로 넣으시는 건데
금액 변경 될때마다 const 변동 되나요?
네 맞습니다.
제가 궁금한 부부은 테스트키로 하면 잘되는데 왜 실결제는 안되냐 입니다...
재현 방법을 모르신다고 하니 하나씩 확인 하는 겁니다
더불어 해당 키로 이미 실결제가 진행되고 있었습니다.
네 알겠습니다.
우선, 금액 변동이 있을 경우에는 updateAmount 이 메서드 이용 해보실 수 있을까요?
특정 금액으로 렌더링 완료된 위젯에서 금액 변동이 있을때는 updateAmount 를 이용하도록 가이드 드리고 있습니다.
renderPaymentMethods 이 작동되지 않는다는 의미는 렌더링이 정상적이지 않다는 의미로 들려서 말씀 드리는 것이고,
테스트환경, 라이브환경에 따른것은 아닌것으로 보여서 그렇습니다.
우선 금액 변동시에 다시 렌더링 하도록 하는 것을 updateAmount 메서드로 해볼 수 있도록 부탁 드립니다.
네 확인해보겠습니다.