티스토리 뷰
토스페이먼츠 결제 api 연동하기 1
토스페이먼츠 전자결제
app.tosspayments.com
먼저 토스페이먼츠 홈페이지에 들어가셔서 회원가입 후 결제 서비스 신청하기와 개발테스트가 나오는데 저는 개발 테스트를 위해 개발테스트를 하였다.
개발 테스트를 누르면 API키가 나오는데 API키 (클라이언트 키와 시크릿 키) 그리고 API버전이 나온다
API키를 통하여 결제 자동결제 정산 결제취소 등 을 제공한다.
자세한내용은 https://docs.tosspayments.com/reference
코어 API | 토스페이먼츠 결제 연동 문서
토스페이먼츠 API 엔드포인트(Endpoint)와 객체 정보, 파라미터, 요청 및 응답 예제를 살펴보세요. 토스페이먼츠 API를 이용하면 웹 표준만으로 다양한 결제 수단의 결제 연동・승인・취소・조회・
docs.tosspayments.com
토스 결제를 연동해보자
1. 스크립트로 추가하기
결제창을 연동할 HTML 페이지에 일반 결제 JavaScript 파일을 추가합니다.
먼저 토스 결제 연동 문서에서 Javascript SDK의 스크립트를 복사를하여 타이틀에 복사해둔다
<head>
<title>결제하기</title>
<script src="https://js.tosspayments.com/v1"></script>
</head>위의 Javascript SDK 로 . 클라이언트 키를 TossPayments 함수에 넣고 실행하면 초기화 된 객체가 생성됩니다.
2. 클라이언트 키 연결하기
var clientKey = '테스트_클라이언트키 '
var tossPayments = TossPayments(clientKey)// * 계좌이체 결제창 열기
tossPayments.requestPayment("계좌이체", { ... });
// * 카드 자동 결제 등록창 열기
tossPayments.requestBillingAuth("카드", { ... });초기화 단계를 마쳤다면 tossPayments 객체로 메서드를 실행할 수 있다. 특정 이벤트가 실행시 결제창이 띄워진다면 성공한것이다.
전체 코드
<html>
<head>
<script src="https://js.tosspayments.com/v1"></script>
</head>
<body>
<section>
<!-- ... -->
<span>총 주문금액</span>
<span>15,000 원</span>
<button id="payment-button">15,000원 결제하기</button>
</section>
<script>
var clientKey = '클라이언트키'
var tossPayments = TossPayments(clientKey)
var button = document.getElementById('payment-button') // 결제하기 버튼
button.addEventListener('click', function () {
tossPayments.requestPayment('카드', {
amount: 15000,
orderId: 'zUo_E9x6JfRS46bqXbvLh',
orderName: '토스 티셔츠 외 2건',
customerName: '박토스',
successUrl: 'http://localhost:8080/success',
failUrl: 'http://localhost:8080/fail',
})
})
</script>
</body>
</html>간단한 연결은 끝난것이다.
이제 화면에서 결제창이 띄워지는지 확인 해보자.
버튼을 클릭
결제창이 띄워지면 상품명과 결제 금액 그리고 동의 창이 띄워진다.
동의를한후 결제수단을 고른후 결제를 한다.
저는 토스로 결제 테스트를 해보았다.
결제가 성공하게 된다면 성공 url로 가서 주문자에게 결제 정보를 보여지게 될것이다.
결제의 성공시 토스에서 데이터를 응답한다.
하지만 결제에 실패시 실패 url로 리다이렉트 할것이다.
성공시의 토스에서 제공하는 응답되는 데이터
"mId": "tosspayments",
"version": "2022-06-08",
"paymentKey": "nsFZqOj_0DxyKo_dXT_Cj",
"status": "DONE",
"transactionKey": "ruEZj2kX5n4JILmNC8rJw",
"lastTransactionKey": "w-es4oDLNPSAgpLCL-eZx",
"orderId": "zUo_E9x6JfRS46bqXbvLh",
"orderName": "토스 티셔츠 외 2건",
"requestedAt": "2022-06-08T15:40:09+09:00",
"approvedAt": "2022-06-08T15:40:49+09:00",
"useEscrow": false,
"cultureExpense": false,
"card": {
"company": "농협",
"number": "123456******7890",
"installmentPlanMonths": 0,
"isInterestFree": false,
"interestPayer": null,
"approveNo": "00000000",
"useCardPoint": false,
"cardType": "신용",
"ownerType": "개인",
"acquireStatus": "READY",
"receiptUrl": "https://dashboard.tosspayments.com/sales-slip?transactionId=KAgfjGxIqVVXDxOiSW1wUnRWBS1dszn3DKcuhpm7mQlKP0iOdgPCKmwEdYglIHX&ref=PX",
"amount": 15000
},
"virtualAccount": null,
"transfer": null,
"mobilePhone": null,
"giftCertificate": null,
"cashReceipt": null,
"discount": null,
"cancels": null,
"secret": null,
"type": "NORMAL",
"easyPay": null,
"country": "KR",
"failure": null,
"isPartialCancelable": true,
"receipt": {
"url": "https://dashboard.tosspayments.com/sales-slip?transactionId=KAgfjGxIqVVXDxOiSW1wUnRWBS1dszn3DKcuhpm7mQlKP0iOdgPCKmwEdYglIHX&ref=PX"
},
"currency": "KRW",
"totalAmount": 15000,
"balanceAmount": 15000,
"suppliedAmount": 13636,
"vat": 1364,
"taxFreeAmount": 0,
"method": "카드"
}'프로젝트 > 토스결제 api 적용' 카테고리의 다른 글
| 토스페이먼츠 결제 연동2 결제하기 (0) | 2022.07.08 |
|---|