56 Replies
안녕하세요
토스페이 연동을 했는데
const clientKey = "test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm";
const tossPayments = TossPayments(clientKey);
const customerKey = "wmzTJvqk_CHFvKm9qa2--";
const widgets = tossPayments.widgets({ customerKey });
이렇게 test 키가 있을 때는 정보가 잘 보여지지만
토스 담당자 님이 보내 주신 내용으로
해당키를 변경하면
결제하기라는 버튼만 표시 되고 있습니다.
빌링에 대한 클라리언트/시크릿키는 하기와 같이 같습니다.
live_ck_5OWRap보안으로중간생략ZK
live_sk_PBal2v보안으로중간생략QgOAN
보내 주신 내용은 위와 같은데
-----
소스를 보면
clientKey, customerKey
라고 나와 있는데 토스담당자님이 보내 주신
키는 클라이언트키, 커스터머 키가 아니라
클라리언트/시크릿키 입니다.
그래서 키가 맞지 않아서 그런 것 같은데
이 소스에 나와 있는 clientKey, customerKey
이것은 어디에서 볼 수 있는 내용인가요?
customerKey 는 고객식별에 사용되는 가맹점 자체 키값입니다
고객별 고유한 값을 매핑해서 사용시면 되구요
지금 하시려는게 토스페이결제만 띄우면 되는걸까요?
예 맞습니다.
test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm
이 키값은 당사 web docs 에서 제공되는 결제위젯 키값이라
상점아이디 전달주세요
상점아이디(MID) : cosmosjnvs
상점아이디(MID) : bill_cosmoq3af
이렇게 두개 입니다.
billcosmoq3af 이렇게 bill 붙은 것이
정기결제 관련 인 것 같습니다.
bill_cosmoq3af 이건 토스페이와는 상관없이 카드 정기결제용이구요
코스모스3 - 대량등록 프로그램
정민소프트 구매대행 오픈마켓, 스마트스토어, 쿠팡, 상품대량등록 프로그램
이렇게 구현을 했는데
코스모스팜 사용하시나요?
아 그건 아니고
저희 솔루션이 코스모스3 입니다.
const clientKey = "live_ck_5OWR보안보안zPVo1zEqZK";
const tossPayments = TossPayments(clientKey);
const customerKey = "live_sk_P보안보안35RQgOAN--";
const widgets = tossPayments.widgets({ customerKey });
이렇게 구현을 했을 때
코스모스3 - 대량등록 프로그램
정민소프트 구매대행 오픈마켓, 스마트스토어, 쿠팡, 상품대량등록 프로그램
이 경로에 아무거나 입력해서
해보면 결제하기 라는 파란색 버튼만 나오고
나머지 신용결제 등의 아이콘은 모두 사라져 버립니다.
이걸 눌렀을때 기대하시는 내용은 결제위젯인거죠?
카드, 계좌이체, 토스페이 등등 한번에 나오는
이것을 눌렀을 때 나오는 화면이 위젯이기를 기대합니다.
예 맞습니다.
그런데 지금은 이렇게 결제하기 버튼만 나와있습니다.
그러면 https://docs.tosspayments.com/guides/payment-widget/integration
이 연동가이드가 맞구요
사용하셔야 할 키는 상점의 결제위젯키를 사용하셔야해요
연동하기 | 토스페이먼츠 개발자센터
토스페이먼츠의 간편한 결제 연동 과정을 한눈에 볼 수 있습니다. 각 단계별 설명과 함께 달라지는 UI와 코드를 확인해보세요.
이런식으로 시작되는 값입니다
<script>
main();
async function main() {
const button = document.getElementById("payment-button");
const coupon = document.getElementById("coupon-box");
const clientKey = "live_ck_5OWR보안보안보안보안보안보안보안보안보안보안EqZK";
const tossPayments = TossPayments(clientKey);
const customerKey = "live_sk_PBa보안보안보안보안보안보안보안보안AN--";
const widgets = tossPayments.widgets({ customerKey });
await widgets.setAmount({
currency: "KRW",
value: 50000,
});
await Promise.all([
widgets.renderPaymentMethods({
selector: "#payment-method",
variantKey: "DEFAULT",
}),
widgets.renderAgreement({
selector: "#agreement",
variantKey: "AGREEMENT",
}),
]);
coupon.addEventListener("change", async function () {
if (coupon.checked) {
await widgets.setAmount({ currency: "KRW", value: 45000 });
} else {
await widgets.setAmount({ currency: "KRW", value: 50000 });
}
});
button.addEventListener("click", async function () {
await widgets.requestPayment({
orderId: "6OnKa1sLcIL7BKe6oKm2r",
orderName: "토스 티셔츠 외 2건",
successUrl: window.location.origin + "/TossPay/success.aspx",
failUrl: window.location.origin + "/TossPay/fail.aspx",
customerEmail: "customer123@gmail.com",
customerName: "김토스",
customerMobilePhone: "01012341234",
});
});
}
</script>
정상적으로 띄워지면 이런 화면이 보일거구요
이렇게 소스에서 보면
상점아이디를
따로 입력하는 곳이 없습니다.
이부분에서
orderId: "6OnKa1sLcIL7BKe6oKm2r",
orderName: "토스 티셔츠 외 2건",
successUrl: window.location.origin + "/TossPay/success.aspx",
failUrl: window.location.origin + "/TossPay/fail.aspx",
customerEmail: "customer123@gmail.com",
customerName: "김토스",
customerMobilePhone: "01012341234",
써야하는 키값이 live_gck 로 시작하는값을 쓰셔야해요 live_ck 가 아니구요
그 키값을 어디에서 받을 수가 있나요?
토스페이먼츠 개발자센터
토스페이먼츠 결제 연동 문서, API, 키, 테스트 내역, 웹훅 등록 등 개발에 필요한 정보와 기능을 확인해 보세요. 결제 연동에 필요한 모든 개발자 도구를 제공해 드립니다.
개발자센터 접속해보시면
이부분 확인이 가능하세요
이렇게 이용신청하기라고 메뉴가 뜨고 있는데
저희 토스계정과 이메일 계정이 서로 연결이 안되어 있는 것 같습니다.
왼쪽에 드롭다운에 상점선택해보세요
선택이 안되거나 안나온다면 접속하신 계정이 상점관리자에서 사용자초대가 안되어있는거구요
말씀주신 부분 선택하니 정보가 나왔습니다.
감사합니다.
이곳에도
시크릿키가 있는데
이 키가 커스터머키인지요??
커스터머키에
아뇨 customerKey 는 고객별 식벽가능한 값으로 고객마다 달라야해요
상점에 접속한 id 를 해쉬한 값이나 uudi 등을 사용합니다
시크릿키는 사용을 하지 않아도 되는지요?
그리고 그곳에 시크릿 키를 넣으면
그래도 결제하기 외의 버튼이 나와야 할 텐데
여전히
결제창진행이 완료되면 backend 로 승인요청을 해야하는데요 그때 시크릿키를 사용합니다
💡 정보 제출
민감 정보를 안전하게 제출해주세요
이메일주소 전달주세요
해시값을 넣었더니 나오고 있습니다.
다행이네요
다른 페이도 다 된다고 들었는데
신용카드와 토스페이만 있는데
네이버페이, 카카오페이 등은 위젯에 안나오는게 맞는지요??
네 위젯 UI 에 설정된대로 나옵니다
설정하기전에 계약이 되어있어야하구요
결제창진행이 완료되면 backend 로 승인요청을 해야하는데요 그때 시크릿키를 사용합니다
이렇게 말씀 주셨는데
위젯 UI 설정에서 네이버페이 활성화 가능하겠네요
이것은 success, fail 파일에서 사용하는 값인지요?
네 결제창진행을 완료하면 사전에 보내주신 successUrl 로 리다이렉트가 되구요
거기에서 backend 로 승인요청을 보낸 후 결제가 완료돼요
confirm 파일에
string widgetSecretKey = "test_gsk_docs_OaPz8보안보안z3y47BMw6";
이렇게 나오는 부분에 입력하면 된다는 말씀이시지요?
네 confirm 코드에서 사용합니다
감사합니다~
수고하셨습니다.
감사합니다.
즐거운 하루되세요~
넵, 좋은 서비스 만드시길 바랍니다