PERN - 구독 결제 설정 02 clerk billing

PERN - 구독 결제 설정 02 clerk billing

​

웹서비스를 구현하다보면, 구독 서비스, 결제 서비스 등의 구현이 필요한 경우가 있습니다.

이런경우 결제, 구독 관련 외부 서비스들이 많은데요.

clerk 에서 제공하는 지불 서비스를 이용하여 프로젝트, 웹서비스에 기능 추가를 할 수 있습니다.

​

clerk의 지불서비스 설정을 위한 방법을 기록으로 남겨봅니다.

​

---

가장 먼저 웹 프로젝트에 clerk 연동을 합니다.

로그인 기능을 이미 이용하고 있고, 이전 포스팅 글중에 있으므로 생략합니다.

​

https://clerk.com/

 

Clerk | Authentication and User Management

The easiest way to add authentication and user management to your application. Purpose-built for React, Next.js, Remix, and “The Modern Web”.

clerk.com

이어서 사진, 글 순서로 적어 보았습니다.

연동된 클럭 프로젝트의 configue 항목 페이지에 접속합니다,

왼쪽의 메뉴바에 Billing 항목아래의 Setting을 선택합니다.

 

Create a Plan 버튼을 선택합니다.

 

잠시후 아래 Ppans for Users 항목이 생성됩니다.

Free 문구를 선택합니다.

사용자 계획 관리 페이지화면을 볼수 있습니다.

이곳에서 이름, 키의 값을 수정할수 있습니다.

스크롤을 아래로 내린 화면에서 + Add feature 문구를 선택합니다.

이름과 키, 내용을 입력합니다.

이름에 입력하면 자동으로 키에 입력이 되었네요.

그리고 맨 하단의 Create feature 버튼을 선택합니다.

생성이 되었습니다.

 

그리고 대시보드 화면 하단의 save 버튼을 선택합니다.

구독 계획 대시보드에서 새로운 플랜을 추가해봅시다.

프리미엄 이름지정,

하단으로 스크롤내려서 features 확인 및 Add feature 버튼 선택

앞서 생성한 항목 선택

항목들도 추가 가능.

가격 설정후 저장을 합니다.

 

설정 정보 확인을 합니다.

이어서 빌링 활성을 합니다.

Enable Billing 버튼을 선택하여 활성합니다.

​

무료와 프리미엄 구독 정보를 확인할수 있어요.

​

---

*프로젝트와 연동하기.

​

 

연동을 위한 페이지 생성합니다.

 

clerk의 구독서비스 api와 소스를 이용하기 위해, 위의 pricingTable 임포트 및 소스 추가 합니다.

 

홈화면에도 추가하면 적용 완료됩니다.

​

화면에 적용된 것을 확인할수 있습니다.

이어서 계정란에서도 확인할수 있지요.

이렇게 연동이 되어서 좋습니다.

구독을 해보겠습니다.

개발자 모드 확인이되고 결제창이 확인됩니다.

Pay with Test Card를 선택해서 테스트를 진행합니다

​

​

테스트모드로 자동으로 결제, 지불 처리가 됩니다/

​

​

계정 상태를 보니 프리미엄 활성상태가 되었지요.

​

끝!