현재 저희가 쓰고있는게 반응형인지 궁금합니다.
<script language="javascript" src="https://xpayvvip.uplus.co.kr/xpay/js/xpay_crossplatform.js" type="text/javascript"></script> 이걸쓰고 있는데 이거 반응형 웹이 맞는지요?
77 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
@RequestMapping(value = {"/confirm/widget", "/confirm/payment"})
public ResponseEntity<JSONObject> confirmPayment(HttpServletRequest request, @RequestBody String jsonBody) throws Exception {
String secretKey = request.getRequestURI().contains("/confirm/payment") ? API_SECRET_KEY : WIDGET_SECRET_KEY;
JSONObject response = sendRequest(parseRequestData(jsonBody), secretKey, "https://api.tosspayments.com/v1/payments/confirm");
int statusCode = response.containsKey("error") ? 400 : 200;
return ResponseEntity.status(statusCode).body(response);
} 깃 허브에 있는 이거의 용도가 뭐에요
1. ”반응형“ 이라는 말씀이 어떤말씀인지 이해하지 못했습니다. XPay는 LGD_WINDOW_TYPE 으로 값을 넘겨서 모바일/PC 구분합니다.
2. 해당 코드는 결제위젯이라고, 이용하고 계신 XPay와 별개의 제품에서 결제승인할때 이용하는 코드입니다.
아 이번에 웹접근성 심사를 받고있는데 현재 저희 소스가 <script language="javascript" src="https://xpayvvip.uplus.co.kr/xpay/js/xpay_crossplatform.js" type="text/javascript"></script> 이렇게 호출하더군요
근데 혹시 웹접근성 심사에서 XPay가 심사에 걸리면 이게 수정이 가능한건가요?
지금 테스트 해보고 있는데
// ------ '결제하기' 버튼 누르면 결제창 띄우기 ------
// @docs https://docs.tosspayments.com/sdk/v2/js#widgetsrequestpayment
button.addEventListener("click", async function () {
// 결제를 요청하기 전에 orderId, amount를 서버에 저장하세요.
// 결제 과정에서 악의적으로 결제 금액이 바뀌는 것을 확인하는 용도입니다.
await widgets.requestPayment({
orderId: generateRandomString(),
orderName: "토스 티셔츠 외 2건",
successUrl: window.location.origin + "/confirm/payment.do",
failUrl: window.location.origin + "/fail.html",
customerEmail: "customer123@gmail.com",
customerName: "김토스",
customerMobilePhone: "01012341234",
});
});
}
이부분에 /confirm/payment.do 이렇게 하는거 아닌가요?
payment.do는 깃 허브에
@RequestMapping(value = {"/confirm/widget.do", "/confirm/payment.do"})
public ResponseEntity<JSONObject> confirmPayment(HttpServletRequest request, @RequestBody String jsonBody) throws Exception {
String secretKey = request.getRequestURI().contains("/confirm/payment") ? API_SECRET_KEY : WIDGET_SECRET_KEY;
JSONObject response = sendRequest(parseRequestData(jsonBody), secretKey, "https://api.tosspayments.com/v1/payments/confirm");
int statusCode = response.containsKey("error") ? 400 : 200;
return ResponseEntity.status(statusCode).body(response);
}
이걸 그대로 한것입니다
토스페이먼츠 JavaScript SDK | 토스페이먼츠 개발자센터
토스페이먼츠 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
심사에 걸리면, 해당 공문을 토스페이먼츠로 송부하여 가이드 받으실 수 있습니다.
심사 후 해당 사항이 있으면 techsupport@tosspayments.com 으로 공문 내용 전달해주세요.
이미 XPay 이용 중이신데, 결제위젯으로 새로 만드시는건가요?
네 PC든 모바일이랑 같이 할려고 해서 위젯으로 새로 만드는 거에요~~
깃허브에 올린소스중에
@RequestMapping(value = {"/confirm/widget.do", "/confirm/payment.do"})
public ResponseEntity<JSONObject> confirmPayment(HttpServletRequest request, @RequestBody String jsonBody) throws Exception {
String secretKey = request.getRequestURI().contains("/confirm/payment") ? API_SECRET_KEY : WIDGET_SECRET_KEY;
JSONObject response = sendRequest(parseRequestData(jsonBody), secretKey, "https://api.tosspayments.com/v1/payments/confirm");
int statusCode = response.containsKey("error") ? 400 : 200;
return ResponseEntity.status(statusCode).body(response);
}
이부분에서 상점 db처리하면 되는거에요?
네 response값을 가지고 DB처리하시고, 그 응답값을 return하시면 됩니다.
개인적으로 Payment 객체 전체를 반환하는건 추천드리지 않아요
XPay 랑 결제위젯 하고 상점관리자는 똑같은 거죠?
그럼, 위젯과 XPay는 서로 호환이 안되는 점, 인지하고 계실까요?
XPay에 대한 결제건에 대해서 취소나 전표 확인 같은게 필요하면 기존 XPay 방식으로 호출하셔야 합니다.
반대로 위젯 결제건은 위젯쪽으로 모든걸 처리하셔야 해요.
위 점때문에, MID를 새로 채번하셔서 나누어 관리하시거나
DB처리 하실 때 결제건이 XPay인지 결제위젯인지 같이 저장하시는걸 강력히 추천드려요.
상점관리자는 (신상점관리자로) 동일합니다.
넵 알겠습니다.
질문이 있는데
async function main() {
let lgdAmount = parseInt(jQuery("#LGD_AMOUNT").val(), 10);
const button = document.getElementById("payment-button");
const coupon = document.getElementById("coupon-box");
const amount = {
currency: "KRW",
value: lgdAmount,
};
value: lgdAmount 이게 금액으로 알고있는데
밑으로 내려가다보면
// ------ 주문서의 결제 금액이 변경되었을 경우 결제 금액 업데이트 ------
// @docs https://docs.tosspayments.com/sdk/v2/js#widgetssetamount
coupon.addEventListener("change", async function () {
if (coupon.checked) {
await widgets.setAmount({
currency: "KRW",
value: amount.value - 5000,
});
return;
}
await widgets.setAmount({
currency: "KRW",
value: amount,
});
});
value: amount.value - 5000,
value: amount,
이건뭔가요?
토스페이먼츠 JavaScript SDK | 토스페이먼츠 개발자센터
토스페이먼츠 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
- 5000을 뺴는 이유가 궁금해서요
if (coupon.checked) 일때 입니다.
이건 js 함수 문구를 보시면 아실 수 있으실것 같아요.
5천원 할인한다는 쿠폰같은게 있으면 이렇게 써라, 라고 명시한 샘플 입니다.
아 감사합니다. 필요없으면 빼도 되는군요 한가지더 customerMobilePhone: "01012341234", 이거 혹시 핸드폰번호 필수값인가요?
https://docs.tosspayments.com/sdk/v2/js#widgetsrequestpayment
여기에 필수 파라미터 값 볼수 있으니 여기를 참고 해주세요.
토스페이먼츠 JavaScript SDK | 토스페이먼츠 개발자센터
토스페이먼츠 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
앗 감사합니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
{
"country": "KR",
"metadata": null,
"orderId": "MC43ODk3Njc2OTEyOTkz",
"cashReceipts": null,
"isPartialCancelable": true,
"lastTransactionKey": "2F2E28A7281D8474CF325BA865F502F6",
"discount": null,
"taxExemptionAmount": 0,
"suppliedAmount": 18182,
"secret": "ps_Z1aOwX7K8m1lXExXvPQQ8yQxzvNP",
"type": "NORMAL",
"cultureExpense": false,
"taxFreeAmount": 0,
"requestedAt": "2024-11-07T15:10:18+09:00",
"currency": "KRW",
"paymentKey": "tgen_20241107151018kyi02",
"virtualAccount": null,
"checkout": {
"url": "https://api.tosspayments.com/v1/payments/tgen_20241107151018kyi02/checkout"
},
"orderName": "2024년도리뉴얼시행",
"method": "간편결제",
"useEscrow": false,
"vat": 1818,
"mId": "tgen_docs",
"approvedAt": "2024-11-07T15:10:39+09:00",
"balanceAmount": 20000,
"version": "2022-11-16",
"easyPay": {
"amount": 20000,
"provider": "카카오페이",
"discountAmount": 0
},
"totalAmount": 20000,
"cancels": null,
"transfer": null,
"mobilePhone": null,
"failure": null,
"receipt": {
"url": "https://dashboard.tosspayments.com/receipt/redirection?transactionId=tgen_20241107151018kyi02&ref=PX"
},
"giftCertificate": null,
"cashReceipt": null,
"card": null,
"status": "DONE"
}
이런 응답값을 받았는데 여기서 주문번호 저희가 생성해서 보낸것이 어떤거에요?
xpay를 쓸때 xpay.Response("LGD_MID",0) 이거랑 비슷한 값이 있을거 같아서요
xpay.Response("LGD_TID",0) 이것도 비슷한 값이 있을까요?
주문번호 - orderId 입니다. LGD_OID 에요.
LGD_MID 는 토스페이먼츠와 계약한 상점ID 에요. mId 입니다.
LGD_TID 는 paymentKey 이걸 보세요
아 감사합니다. 리턴값에 결제자 이름은 원래 안나오는거죠?
네 안나옵니다
// ------ '결제하기' 버튼 누르면 결제창 띄우기 ------
// @docs https://docs.tosspayments.com/sdk/v2/js#widgetsrequestpayment
button.addEventListener("click", async function () {
// 결제를 요청하기 전에 orderId, amount를 서버에 저장하세요.
// 결제 과정에서 악의적으로 결제 금액이 바뀌는 것을 확인하는 용도입니다.
await widgets.requestPayment({
orderId: generateRandomString(),
orderName: "토스 티셔츠 외 2건",
successUrl: window.location.origin + "/success.html",
failUrl: window.location.origin + "/fail.html",
customerEmail: "customer123@gmail.com",
customerName: "김토스",
customerMobilePhone: "01012341234",
});
});
}
이부분에서 혹시 successUrl 넘길때 커스텀 파라미터를 넘길수있을까요?
토스페이먼츠 JavaScript SDK | 토스페이먼츠 개발자센터
토스페이먼츠 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
successUrl 넘길때 뒤에 쿼리파람 붙이거나
metadata 사용 하세요
문서에 설명되어 있습니다.
https://docs.tosspayments.com/sdk/v2/js#widgetsrequestpayment
토스페이먼츠 JavaScript SDK | 토스페이먼츠 개발자센터
토스페이먼츠 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
새로운 질문은, 가능하시면 새롭게 올려주시겠어요?
// 커스텀 파라미터 추가 (metadata 객체 사용)
metadata: {
customParam1: "value1", // 커스텀 파라미터 1
customParam2: "value2", // 커스텀 파라미터 2
additionalInfo: "example" // 추가적인 정보
// 원하는 key-value 쌍 추가 (최대 5개)
}
이런식으로 하면 되나요?
네 그렇게 하시면 됩니다.
const clientKey = "test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm";
이건 회원가입해서 키를 생성해야 하는거에요?
네 가입후 개발자 센터 들어가셔서 확인하시면 됩니다.
https://docs.tosspayments.com/reference/using-api/api-keys 이걸보고 있는데 무슨소리인지 잘몰라서요
API 키 | 토스페이먼츠 개발자센터
토스페이먼츠 클라이언트 키 및 시크릿 키를 발급받고 사용하는 방법을 알아봅니다. 클라이언트 키는 SDK를 초기화할 때 사용하고 시크릿 키는 API를 호출할 때 사용합니다.
혹시 상점에 따라서 clientKey 가 바뀌는건가요?
네 맞습니다
아....
그러면 전 개발업체인데 결제쪽 개발이 끝나고 진짜 운영으로 붙일때에는 clientKey 는 개발자가 생성하는게 아니겠네요?
네 위에 보시는 링크를 천천히 읽어보세요
문의주시는 내용이 문서에 모두 설명이 되어 있어요
API key 는 테스트키/라이브키 로 테스트환경이냐 실환경이냐가 구분이 되고,
테스트키 라이브키 각각 클라이언트키/시크릿키 2개로 페어로 되어 있는데 각각의 역할이 무엇인지
위젯키가 위에 설명된 API키와 뭐가 다른지
모두 문서에 설명이 되어 있어서 한번 쭉 읽어보시면 이해하는데 도움이 되실꺼에요
네 읽어보고 있는데... 약간 이해가 안가는게 위젯결제를 개발하고 운영에 배포를 할때 클라이언트키/시크릿키 2개는 상점관리자에서 가져오는게 아니라 회원가입해서
가져오는건지 그것만 알면 될거 같아서요
사업자번호로 상점ID 가 여러개가 될 수도 있어요. 상점ID가 A, B, C 3개 이면
3개 모두
테스트 클라이언트키
테스트 시크릿키
라이브 클라이언트키
라이브 시크릿키
이렇게 생성됩니다.
개발자센터 들어가셔서 확인해보시면 됩니다.
안녕하세요. 질문드릴께 있는데요
"status":"DONE" 이 결제 성공인거죠?
xpay는 if ( xpay.TX() ) {
// (5) DB에 인증요청 결과 처리
if( "0000".equals( xpay.m_szResCode ) ) {
// 통신상의 문제가 없을시
// 최종결제요청 결과 성공 DB처리(LGD_RESPCODE 값에 따라 결제가 성공인지, 실패인지 DB처리)
if("0000".equals(xpay.Response("LGD_RESPCODE",0))) {
이렇게 되어있는데 status 가 DONE일경우 하면 되겠네요?
네 맞습니다.
과장님 한가지 더 질문 드립니다.
예전 xpay는 결제는 되었어도 DB쪽 네트워크 오류나 기타 오류가 발생시
xpay.Rollback 을 사용하여 결제 롤백이 되었는데 위젯도 이런게 있나요?
위젯은 별도 롤백기능은 없고 기타 오류 발생하면 취소 API 를 직접 호출해 주셔야 합니다.
취소 API? 그거 깃허브에 있는 샘플 소스에 있는건가요?
네 있을겁니다.
@RequestMapping(value = "/fail", method = RequestMethod.GET)
public String failPayment(HttpServletRequest request, Model model) {
model.addAttribute("code", request.getParameter("code"));
model.addAttribute("message", request.getParameter("message"));
return "/fail";
}
이거 일까요?
아뇨
GitHub
GitHub - tosspayments/payment-samples: 토스페이먼츠 결제 API 및 결제창 샘플 코드입니다...
토스페이먼츠 결제 API 및 결제창 샘플 코드입니다. Contribute to tosspayments/payment-samples development by creating an account on GitHub.
API 샘플은 여기서 보시면 됩니다.
아 그러면 위젯은 xpay처럼 xpay.Rollback 자동 취소가 없고 그냥 취소 api를 호출하는거네요
네 맞습니다.
아 .. 질문이 있는데요 이게 정확히 success에서 DB처리해야 하는건가요? 아니면 깃허브에있는 widget 여기에 DB 처리를 해야하나요? DB쿼리를 일부러 오류를 냈는데
confirm()
.then(function (data) {
// TODO: 결제 승인에 성공했을 경우 UI 처리 로직을 구현하세요.
window.location.href = "/examine/E1Confirm.do?MENU_ID=B-02-00";
})
.catch((err) => {
// TODO: 결제 승인에 실패했을 경우 UI 처리 로직을 구현하세요.
window.location.href =
/confirm/fail.do?message=${err.message}&code=${err.code};
});
오류가 나도 window.location.href = "/examine/E1Confirm.do?MENU_ID=B-02-00"; 이걸로 바로가서 질문드립니다.
confirm() 함수 안에 설정하신 URL에서 오류 응답을 내려주고 계신가요?
그냥 200 응답을 내려주고 계신건 아닌지요.
샘플 소스코드 기준으로는 /confirm/widget에서 오류 응답을 내려줘야, throw를 합니다.
이걸 가맹점 서버에서 confirm 하는 로직으로 바꾸시고, throw { message.... } 이 부분을 가맹점에 맞도록 수정해주셔야 해요. (message, code 값을 JSON으로 내리지 않는 경우)
카드 결제 취소할때 필수 파라미터를 어떻게 처리하나요 cancel.jsp
String paymentKey = "";
String cancelReason = "고객 변심";
//부분 취소에서만 사용
String cancelAmount = "300";
//refundReceiveAccount - 가상계좌 거래에 대해 입금후에 취소하는 경우만 필요
String bank = "신한";
String accountNumber = "12345678901234";
String holderName = "홍길동";
여기서 필수 파라미터가 어디인가요?
에러가 필수 파라미터가 누락이라고 나오는데....
코어 API | 토스페이먼츠 개발자센터
토스페이먼츠 API 엔드포인트(Endpoint)와 객체 정보, 파라미터, 요청 및 응답 예제를 살펴보세요.
가상계좌 관련 질문 입니다.
@RequestMapping(value = {"/confirm/widget", "/confirm/payment"})
public ResponseEntity<JSONObject> confirmPayment(HttpServletRequest request, @RequestBody String jsonBody) throws Exception {
String secretKey = request.getRequestURI().contains("/confirm/payment") ? API_SECRET_KEY : WIDGET_SECRET_KEY;
JSONObject response = sendRequest(parseRequestData(jsonBody), secretKey, "https://api.tosspayments.com/v1/payments/confirm");
int statusCode = response.containsKey("error") ? 400 : 200;
return ResponseEntity.status(statusCode).body(response);
}
깃 허브에 있는 이걸로 카드 및 가상계좌 다 쓸수있나요?
네 맞습니다. 다만 가상계좌는 별도로 입금노티를 받아서 처리하는 로직을 구현하셔야 합니다.
아 이게 카드 결제하고 틀린게 정상 채번이 된건 DONE가 아니라
WAITING_FOR_DEPOSIT 이건가요?
그리고 가상계좌 카드결제 이거 method 구분이 맞나요? 예전 xpay는 코드로 있어서요
웨젯은 한글로 카드, 가상계좌 이게 맞나요?
아 이게 카드 결제하고 틀린게 정상 채번이 된건 DONE가 아니라
WAITING_FOR_DEPOSIT 이건가요?
--> 네 맞습니다
그리고 가상계좌 카드결제 이거 method 구분이 맞나요? 예전 xpay는 코드로 있어서요
웨젯은 한글로 카드, 가상계좌 이게 맞나요?
--> 네 맞습니다.
https://github.com/tosspayments/payment-samples
여기에 있는 취소 API 가상계좌채번 취소도 같이 사용해도되는거죠?
GitHub
GitHub - tosspayments/payment-samples: 토스페이먼츠 결제 API 샘플 코드입니다.
토스페이먼츠 결제 API 샘플 코드입니다. Contribute to tosspayments/payment-samples development by creating an account on GitHub.
네 맞습니다
입금전 취소요청 > 가상계좌 반납처리
입금후 취소요청 > 가상계좌 환불처리
입금전 취소요청 > 가상계좌 반납처리가 깃 허브에 cancel.jsp 입니까?
그러면 입금후 취소요청 > 가상계좌 환불처리 는 어디를 봐야 하나요?
동일하게 cancel.jsp 를 보시면 되고 환불계좌 관련 파라미터만 추가하시면 됩니다.
아 이해되네요
JSONObject refundReceiveAccount = new JSONObject();
refundReceiveAccount.put("bank", bank);
refundReceiveAccount.put("accountNumber", accountNumber);
refundReceiveAccount.put("holderName", holderName);
obj.put("refundReceiveAccount", refundReceiveAccount);
이부분만 있으면 입금후 취소요청이 되는군요
네 맞습니다.
아 근데 약간 이상한게 입금전 취소요청 > 가상계좌 반납처리
일부러 오류내서 취소는 정상적으로 처리되었는데 문자는 입금하라고 오는거 같은데
원래 이런건가요?
입금하라고 문자는 발급시에 갔을겁니다.
그 이후에 취소요청해서 반납 처리 하신거 아닌가요?
아 발급과 동시에 일부러 db처리 할때 에러내서 취소가 제대로 되는지 테스트 한건데
문자와 와있어서요...
에러일시 취소 api를 호출하고 있습니다
네 이미 발급이 되었기 때문에 문자는 갑니다.
보통 다른데에서 프로그램 자체 적인 문제 예를 들어 db쿼리가 오류난다거나 exception이 떨어졌을때
취소 api 를 하는것이 일반적인 거죠?
네 맞습니다.
그런데 보통 가상계좌의 경우는 실제 결제가 되는게 아니라 발급만 되는 것이라서 가맹점쪽 이슈가 발생하는 경우는 거의 없습니다.
넵 알겠습니다. 감사합니다
안녕하세요 질문이있는데요
예전 xpay는 가장 계좌 LGD_CASNOTEURL 을 지정해주면 체번후 가상계좌에 입금시키면 DB처리 되게끔 했는데 위젯은 체번까지는 알겠는데 입금시키면
입금되었는지 안되었는지 알수있는 방법이?
있을까요?
웹훅 이벤트 | 토스페이먼츠 개발자센터
토스페이먼츠에서 제공하는 웹훅 이벤트 목록입니다.
개발자센터에서 웹훅받을 URL을 등록하시면 이벤트가 발생했을때 웹훅이 발송됩니다
LGD_CASNOTEURL와 웹훅이랑 같은 역할이라고 보셔도 돼요.
다만 LGD_CASNOTEURL로 넘기는게 아니라 개발자센터 사이트에 미리 등록하는 겁니다.
혹시 xpay처럼
/*
* [상점 결제결과처리(DB) 페이지]
*
* 1) 위변조 방지를 위한 hashdata값 검증은 반드시 적용하셔야 합니다.
*
*/
String LGD_RESPCODE = ""; // 응답코드: 0000(성공) 그외 실패
String LGD_RESPMSG = ""; // 응답메세지
String LGD_MID = ""; // 상점아이디
String LGD_OID = ""; // 주문번호
.....
이런 소스좀 볼수없나요? 깃허브에는 없는거 같아서요
가상계좌 응답
새로운 질문은
새 쓰레드에 올려주세요!
새 쓰레드에 올려주실때
어떤 개발언어 쓰고 있는지도 알려주시고요.
가상계좌 응답 처리 어떻게 하는지 샘플 깃헙에 간단하게 있으니까 드릴게요
새 쓰레드 글 남겨주세요