[토스페이먼츠 / Javascript] 자동 결제 연동하기

자동 결제란

Youtube, Netflix, Google Drive 등 다양한 곳에서 구독 형태의 제품이 많이 나오고 있습니다. 구독이란, 최초 1회 해당 서비스 사용을 신청하면 주기적으로 결제하며 일정한 서비스를 제공받을 수 있습니다. 또한, 구독 유형을 다양하게 제공하여 자신에게 적절한 양의 서비스를 선택하여 제공받을 수 있습니다. 이 때 우리가 살펴볼 것은 것은 최초 1회 서비스 사용을 신청입니다! 즉, 카드를 한번 등록해두면 사용자가 결제일마다 결제할 필요 없이 자동으로 결제가 된다는 것 입니다.

💬 TMI
구독 형태의 비지니스 모델은 다음 결제일에 자동으로 결제되기 때문에, 수입이 비교적 안정적이고 예측이 가능하다는 장점이 있습니다. 그래서 많은 서비스들이 요즘 구독 형태로 비지니스 모델을 변경해나가는 것 같아요 👀

자동 결제를 지원해주는 많은 PG사가 있지만, 오늘은 토스페이먼츠의 자동 결제 연동을 해보려고 합니다!

들어가기에 앞서, 먼저 간략하게 어떤 과정을 거치게 될 지 한번 살펴보고 시작해볼까요?

SDK 추가하기
자동 결제 정보 등록하기
SDK를 사용하여 자동 결제 등록창을 연다.
→ 결제 등록창에 결제정보를 입력한다.
빌링키(Billing Key) 발급 받기
결제 정보 등록 성공 후 리다이렉트된 successURL의 쿼리 authKey와 customerKey를 확인한다.
→ authKey와 customerKey를 사용해 빌링키를 발급받는다.
→ 빌링키를 DB에 저장한다.
결제승인 요청하기
결제일이 되었을 때, 빌링키와 상품정보(이름, 가격 등)를 담아 결제 승인 요청 API를 호출한다.
자동 결제 완료

이해가 안가더라도, 괜찮습니다! 천천히 함께 살펴보아요😊

SDK 추가하기

토스페이먼츠에서 제공하는 기능을 사용하기 위해 우리 프로젝트에 SDK를 추가해야합니다.

스크립트로 추가하거나, npm으로 추가할 수 있습니다! 자세한 코드 예시는 링크를 참고해주세요.

SDK를 추가할 때 클라이언트 키(clientKey)를 필요로 합니다.

🎯 실제로 결제되는 라이브 키

https://app.tosspayments.com/ 접속
로그인
개발 테스트 클릭
라이브
클라이언트 키 복사

🎯 결제가 진행되지 않는 테스트 키

test_ck_XjExPeJWYVQP7Ro7ZeQ349R5gvNL

라이브 키는 토스페이먼츠 심사가 완료되어야 사용할 수 있습니다. 심사에 통화하기 테스트 클라이언트 키를 사용하여 개발해야 합니다.

자동 결제 정보 등록하기

🎯 결제 등록창이란?

토스페이먼츠에는 카드정보를 입력할 수 있는 결제 등록창을 제공합니다. 이 결제 등록창을 이용할 경우, 카드 정보를 우리 사이트에 직접 입력하는 것이 아니기 때문에 민감한 정보를 관리하지 않아도 된다는 아주 큰 이점이 있습니다!

✋🏻 커스텀한 결제 등록창을 이용하고 싶어요!

카드를 선택하거나, 카드번호, 비밀번호를 입력하는 등 결제 정보를 커스텀한 화면에서 입력하고 싶다면 이 글(작성중입니다 ㅎㅎ..)을 확인해주세요!

단, 커스텀 결제 등록창을 사용할 경우, 민감한 카드정보가 우리 사이트에 직접 입력되기 때문에 ⚠️보안문제에 주의⚠️하세요!

🎯 SDK를 사용하여 자동 결제 등록창 열기: requestBillingAuth( 결제 수단 , 결제 정보 ) API 문서

tossPayments.requestBillingAuth('카드', {
  customerKey: 'aENcQAtPdYbTjGhtQnNVj',
  successUrl: 'https://www.payments.com/success',
  failUrl: 'https://www.payments.com/fail',
})

□ 결제 수단

토스페이먼츠에서 제공하는 자동 결제 수단은 '카드'가 유일하기 때문에, '카드'로 고정합니다.

'카드' : 한글 결제창
'CARD' : 영문 결제창

□ 결제 정보

(필수) customerKey

사용자를 구분할 수 있는 문자열을 입력하세요. 영문 대소문자, 숫자, 특수문자( - , _ , = , . , @ )로 최소 2자 이상 최대 300자 이하여야 합니다.

(필수) successUrl

등록을 성공했을 때 리다이렉트 될 URL을 입력하세요. 반드시 오리진을 포함해야해요! 내 사이트의 도메인이 https://www.payments.com 이라면 successURL은 https://www.payments.com/success 와 같은 형태가 되어야합니다.

등록이 완료된 이후, 실제 결제 승인 처리에 필요한 값들이 아래와 같이 쿼리 파라미터로 함께 전달됩니다.

https://www.payments.com/success?customerKey={CUSTOMER_KEY}&authKey={AUTH_KEY}

customerKey : 가맹점에서 사용하는 사용자별 고유 ID 입니다. 결제창을 열 때 입력한 customerKey와 동일한 값인지 확인이 필요합니다.
authKey : 등록된 카드 정보의 인증키 입니다. 빌링키를 발급받을 때 사용합니다.

(필수) failURL

등록을 실패했을 때 리다이렉트 될 URL을 입력하세요. 반드시 오리진을 포함해야해요!

에러코드 및 에러 메시지가 쿼리 파라미터로 함께 전달됩니다.

https://www.payments.com/fail?code={ERROR_CODE}&message={ERROR_MESSAGE}&orderId={ORDER_ID}

code : 오류 타입을 보여주는 에러 코드
- PAY_PROCESS_CANCELED : 사용자가 결제를 취소했습니다.
- PAY_PROCESS_ABORTED : 결제 진행 중 승인에 실패하여 결제가 중단되었습니다.
- REJECT_CARD_COMPANY : 결제 승인이 거절되었습니다.
message : 에러 메시지

빌링키(Billing Key) 발급 받기

🎯 빌링키란?

우리는 앞선 자동 결제 정보 등록하기 단계를 통해 결제할 카드와 결제할 내용을 성공적으로 등록했습니다! 🎉

이제 결제일이 다가왔을 때 빌링키와 함께 결제 승인을 요청하면 등록된 정보로 결제가 진행됩니다.

빌링키를 사용하는 이유는, 민감한 카드 정보를 우리 사이트에 남기지 않고, 유출될 수 있는 포인트를 최대한 줄이기 위해서 입니다.

만약 카드번호와 비밀번호 등 민감한 정보를 DB에 저장해두고, 결제일마다 유저의 카드정보를 불러와 API호출을 한다면 보안에 상당히 많은 신경을 기울여야 합니다. 만약 DB가 유출된다면? 결제 API 통신을 가로챈다면? 암호화를 하더라도 민감한 정보가 유출된다면 그 피해보상은 온전히 우리의 몫이 되겠죠 😢

따라서 최초 1회만 카드 정보를 등록하여 빌링키를 발급받고, 그 이후 결제가 필요할 때는 카드정보가 아닌 빌링키를 사용해서 결제를 요청하는 방식을 사용하게 되었습니다.

🎯 빌링키 발급 API 호출하기 API 문서

□ Request는 이렇게 보내면 돼요!

요청 URI
POST 'https://api.tosspayments.com/v1/billing/authorizations/issue'

요청 BODY
{
  authKey: AUTH_KEY,
  customerKey: CUSTOMER_KEY
}

결제 등록 성공 시 리다이렉트 된 successUrl 쿼리에 담긴 authKey와 customerKey를 body에 넣어 POST 요청을 보냅니다.

□ Response는 이렇습니다!

응답 DATA
{
  mId: "tosspayments",
  customerKey: "aENcQAtPdYbTjGhtQnNVj",
  authenticatedAt: "2020-09-25T14:38:41+09:00",
  method: "카드",
  billingKey: "Z_t5vOvQxrj4499PeiJcjen28-V2RyqgYTwN44Rdzk0=",
  card: {
    company: "현대",
    number: "433012******1234",
    cardType: "신용",
    ownerType: "개인"
  }
}

어떤 카드로 등록했는지를 포함한 결제 정보를 응답 데이터로 보내줍니다. 응답 데이터의 자세한 정보를 원한다면 여기를 확인해주세요.

이 정보 중에서 빌링키(billingKey)가 가장 중요해요! 앞으로 우리는 결제일이 다가오면 빌링키를 사용해서 결제를 요청하게 됩니다. 그러니 결제 승인 요청을 위해 우리 DB에 빌링키를 잘 저장해둡시다 😉

결제 승인 요청하기

빌링키를 발급받고, DB에 잘 저장해두었다면 이제 준비는 끝났습니다!

이백엔드에서 결제일이 되었을 때, 저장된 빌링키와 함께 아래의 결제 승인 API를 호출만 하면 됩니다.

🎯 결제 승인 API API문서

□ Request는 이렇게 보내면 돼요!

// 요청 URI
POST `https://api.tosspayments.com/v1/billing/${billingKey}`

// 요청 BODY
{
    customerKey: 'gLvs0MellJ9wDnQLYoRTj',
    amount: 15000,
    orderId: 'zOmaoI4Y49MnAuFZ9hOg8',
    orderName: '토스 티셔츠 외 2건'
}

□ Response는 이렇습니다!

결제의 다양한 정보가 들어있는 Payment 객체를 반환합니다. 자세한 정보는 여기를 확인해주세요.

자동 결제, 성공했습니다! 🎉

다시 한번 과정을 되새겨볼까요?

SDK 추가하기
자동 결제 정보 등록하기
SDK를 사용하여 자동 결제 등록창을 연다.
→ 결제 등록창에 결제정보를 입력한다.
빌링키(Billing Key) 발급 받기
결제 정보 등록 성공 후 리다이렉트된 successURL의 쿼리 authKey와 customerKey를 확인한다.
→ authKey와 customerKey를 사용해 빌링키를 발급받는다.
→ 빌링키를 DB에 저장한다.
결제승인 요청하기
결제일이 되었을 때, 빌링키와 상품정보(이름, 가격 등)를 담아 결제 승인 요청 API를 호출한다.
자동 결제 완료

맺으며···

처음 토스페이먼츠 문서를 보았을 때, 정리가 상당히 잘 되어있는 편임에도 불구하고 낯선 개념들 때문에 전체적인 흐름을 이해하는데 시간이 꽤 걸렸습니다. 그리고 자동 결제 외의 다양한 결제를 제공하고 있기 때문에, 많은 정보가 한꺼번에 들어와 더 혼란스럽기도 했습니다.

그래서 저는 간단한 개념 설명과 토스페이먼츠 자동결제, 그 중에서도 토스페이먼츠 결제창을 이용하여 자동결제 하는 법에 대해 집중하는 것을 목표로 이 글을 작성해 보았습니다. 저 처럼 토스페이먼츠 연동이 아직 낯선 분들께 이 글이 조금이나마 도움이 되었으면 좋겠네요 😊

질문과 피드백은 언제나 환영합니다 ♡

'개발 > Javascript' 카테고리의 다른 글

[Javascript] 양수0, 음수0 차이 쉽게 이해하기 (0)	2024.06.23
[Javascript] 스크롤 이벤트로 비디오 재생 \| 클론코딩 \| 인터렉티브 웹 (0)	2023.11.06
[Javascript] Hash 란? (0)	2022.09.26
[Javascript] Date 기본 사용법 (0)	2022.08.16
[Javascript] UTC와 KST (0)	2022.08.16

Shelly Log

[토스페이먼츠 / Javascript] 자동 결제 연동하기 - SDK 결제창 이용

자동 결제란

SDK 추가하기

자동 결제 정보 등록하기

빌링키(Billing Key) 발급 받기

결제 승인 요청하기

자동 결제, 성공했습니다! 🎉

맺으며···

'개발 > Javascript' 카테고리의 다른 글

티스토리툴바

[토스페이먼츠 / Javascript] 자동 결제 연동하기 - SDK 결제창 이용

자동 결제란

SDK 추가하기

자동 결제 정보 등록하기

빌링키(Billing Key) 발급 받기

결제 승인 요청하기

자동 결제, 성공했습니다! 🎉

맺으며···

'개발 > Javascript' 카테고리의 다른 글

'개발/Javascript' Related Articles

티스토리툴바