현재 저희가 쓰고있는게 반응형인지 궁금합니다.
<script language="javascript" src="https://xpayvvip.uplus.co.kr/xpay/js/xpay_crossplatform.js" type="text/javascript"></script> 이걸쓰고 있는데 이거 반응형 웹이 맞는지요?
66 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);
} 깃 허브에 있는 이거의 용도가 뭐에요
아 이번에 웹접근성 심사를 받고있는데 현재 저희 소스가 <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를 추가하고 메서드를 사용하는 방법을 알아봅니다.
네 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처리하면 되는거에요?
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"; 이걸로 바로가서 질문드립니다.
카드 결제 취소할때 필수 파라미터를 어떻게 처리하나요 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을 등록하시면 이벤트가 발생했을때 웹훅이 발송됩니다
혹시 xpay처럼
/*
* [상점 결제결과처리(DB) 페이지]
*
* 1) 위변조 방지를 위한 hashdata값 검증은 반드시 적용하셔야 합니다.
*
*/
String LGD_RESPCODE = ""; // 응답코드: 0000(성공) 그외 실패
String LGD_RESPMSG = ""; // 응답메세지
String LGD_MID = ""; // 상점아이디
String LGD_OID = ""; // 주문번호
.....
이런 소스좀 볼수없나요? 깃허브에는 없는거 같아서요
가상계좌 응답
새로운 질문은
새 쓰레드에 올려주세요!
새 쓰레드에 올려주실때
어떤 개발언어 쓰고 있는지도 알려주시고요.
가상계좌 응답 처리 어떻게 하는지 샘플 깃헙에 간단하게 있으니까 드릴게요
새 쓰레드 글 남겨주세요