자동결제(빌링) 결제창 연동하기

✅ 자동결제는 다른 이름으로 빌링, 또는 정기결제로 불리는 결제 방식입니다. 카드 등록창에서 구매자의 카드를 처음 한 번 등록하고 나면, 이후 별도의 인증 없이 간편하게 결제를 요청할 수 있습니다.

✅ 토스페이먼츠 결제창 SDK로 자동결제(빌링)를 연동할 수 있습니다.

✅ 자동결제는 정기 구독형 서비스에만 사용할 수 있어요. 비정기 결제 서비스에는 정책적으로 사용이 제한되니 유의하세요.

자동결제는 API 개별 연동 키로 연동하세요.

토스페이먼츠에 회원가입하기 전이라면, 다음 문서 테스트 키로 연동할 수 있어요. 토스페이먼츠에 회원가입했다면, 로그인 후 내 테스트 키로 결제를 연동하고 개발자센터에서 테스트 결제내역을 확인하세요.

자동결제는 추가 계약 후 테스트 및 라이브 환경에서 사용할 수 있습니다. 추가 계약을 하고 싶다면 토스페이먼츠 고객센터(1544-7772, support@tosspayments.com)로 문의해주세요.

큰 흐름은 다음과 같습니다.

• 카드 등록창 호출 (Client): SDK로 카드 등록창을 띄우고 구매자의 카드 정보를 인증, 등록하세요.
• 빌링키 발급 API 요청 (Server): API로 빌링키를 발급하고 데이터베이스에 저장하세요.
• 빌링 결제 승인 요청 (Server): API로 발급한 빌링키로 원하는 주기, 시점에 자동결제를 실행하세요. 스케줄링 기능은 직접 구현해야 합니다.

이제 각 단계를 자세히 알아볼게요.

자동결제를 실행하려면 먼저 구매자의 카드를 등록해서 빌링키를 발급해야 합니다. 아래 예제 코드를 실행하면 다음과 같은 카드 등록창을 띄울 수 있습니다.

SDK를 추가한 뒤 클라이언트 키를 사용해 객체를 초기화합니다. 초기화된 객체로 requestBillingAuth('카드')를 실행하면 카드 등록창이 뜹니다.

카드 등록창에 카드 정보를 입력하고 휴대폰 본인인증을 성공적으로 마치면 successUrl로 이동합니다. successUrl에는 쿼리 파라미터가 포함되어 있습니다. 이 파라미터를 이용해 빌링키를 발급 받습니다.

자동결제에 사용할 카드 정보를 등록할 카드 등록창을 띄울 수 있는 메서드입니다. 카드 등록창을 띄우려면 파라미터에 카드, 결제 정보를 추가해야 합니다.

1️⃣ 첫 번째 파라미터는 항상 카드로 고정되어 있습니다.

2️⃣ 결제 정보는 두 번째 파라미터로 추가하세요. 구매자를 특정하는 customerKey는 필수 파라미터입니다. successUrl과 failUrl은 카드 등록에 성공하거나 실패했을 때 이동하는 페이지입니다.customerKey와 이동할 페이지는 직접 만들어야 합니다. 파라미터에 대한 자세한 설명은 JavaScript SDK 레퍼런스를 참고하세요.

카드 등록 요청 결과를 확인할 차례입니다. 카드 등록 요청이 성공하면 requestBillingAuth()의 파라미터로 설정했던 (successUrl)을 통해 빌링키 요청 성공 페이지로 이동합니다. 성공 리다이렉트 URL을 나타내는 success 뒤에 customerKey, authKey 두 가지 쿼리 파라미터가 들어있습니다.

• customerKey: 상점에서 만든 구매자의 고유 ID입니다.
• authKey: 빌링키를 발급할 때 사용하는 일회성 인증 키입니다. 최대 길이는 300자입니다.

받은 쿼리 파라미터를 이용해 빌링키 발급 API를 호출할 수 있습니다.

requestBillingAuth()의 파라미터로 설정했던 customerKey 값과 리다이렉트 URL에 있는 customerKey 값이 같은지 확인해보세요. 값이 같다면 빌링키를 발급할 준비가 되었습니다.

카드 등록 요청이 실패하면 다음과 같이 failUrl로 이동합니다. 에러 목록을 확인하세요.

이제 빌링키를 발급할 차례예요. 구매자가 등록한 카드 정보는 저장할 수 없기 때문에 암호화해서 결제를 실행할 때 대신 사용합니다.

먼저 API 인증을 위해 아래와 같이 인증 헤더 값을 만듭니다.

시크릿 키 뒤에 :을 추가하고 base64로 인코딩합니다. :을 빠트리지 않도록 주의하세요.

아래 명령어를 터미널에서 실행하면 인코딩된 값을 얻을 수 있습니다.

인코딩된 값을 Basic 인증 헤더에 넣고 요청 본문도 추가하세요. 앞 단계에서 리다이렉트 URL로 받은 authKey, customerKey 값을 카드 자동결제 빌링키 발급 요청 API의 요청 본문으로 보냅니다.

API 호출 결과로 HTTP 200 OK를 받으면 빌링키 발급 성공입니다. 응답 본문에 포함된 billingKey를 이용해 자동결제가 이루어집니다. 빌링키를 저장하고, 결제를 내고 싶을 때 결제 승인에 사용해주세요.

구매자를 특정하는 customerKey와 빌링키를 매핑해서 서버에 저장하세요. 한 번 발급된 빌링키는 다시 조회할 수 없습니다. 저장한 키값으로 자동결제를 요청해주세요.

빌링키의 유효기간은 빌링키와 연결된 카드 유효기간과 같습니다. 발급된 빌링키를 삭제하는 기능은 제공하지 않습니다. 발급된 빌링키가 더 이상 필요하지 않으면 데이터베이스에서 삭제하고 더 이상 사용하지 않으면 됩니다. 혹시 누군가가 빌링키 정보를 알고 있더라도 빌링키와 매핑된 customerKey를 모른다면 결제가 불가능합니다. 빌링키를 사용한 결제는 빌링키를 발급할 때 같이 전달된 customerKey와 매핑이 되어있기 때문에, 결제 요청을 할 때 빌링키와 customerKey가 같이 전달되어야 결제가 진행됩니다.

발급한 billingKey를 카드 자동결제 승인 API의 Path 파라미터로 추가합니다. 요청 본문에는 주문 정보와 함께 customerKey를 포함합니다.

토스페이먼츠에서는 자체적으로 스케줄링 기능을 제공하지 않습니다. 따라서 직접 스케줄링 기능을 구현해서 원하는 주기, 시점에 결제를 실행해야 합니다.

만약 Node.js 애플리케이션에 스케줄링 로직을 추가하려면, node-cron과 같은 패키지를 사용할 수 있습니다. 이 패키지를 사용하면 스케쥴을 정의하고 그에 따라 특정 작업을 자동으로 실행할 수 있습니다. 각 언어나 프레임워크에서 제공하는 스케줄링 기능을 사용하세요.

먼저 node-cron 패키지를 설치해야 합니다. 프로젝트의 루트 디렉토리에서 다음 명령어를 실행하세요.

이제 node-cron을 사용하여 매월 1일에 자동결제를 진행하는 스케쥴러를 설정할 수 있습니다. 아래 코드는 기존 routes/index.js 파일에 스케쥴러를 추가하는 방법을 보여줍니다:

위 코드는 매월 1일에 billingKey`를 사용하여 자동결제를 진행하는 스케쥴러입니다. 이러한 방식으로 스케줄링 로직을 추가하면, 매월 1일마다 자동으로 지정된 결제가 진행됩니다. 실제 서비스에서는 에러 처리, 로깅, 데이터베이스와의 통신 등이 추가로 필요할 수 있습니다.

API 호출 결과로 HTTP 200 OK를 받으면 결제 승인 성공입니다. 상태 코드와 함께 Payment 객체가 응답으로 돌아옵니다. 자동결제는 card 필드가 포함되어 있어야 합니다.

구독결제 간단히 구현하기) 콘텐츠도 참고해보세요.