MonstarX 앱에 Stripe 연결하기
핵심 요약Stripe를 연결하면 앱에서 실제 결제를 받을 수 있습니다. Stripe 키를 백엔드 → 클라우드(또는 MonstarX가 대화에 보여 주는 카드)에 붙여 넣으세요. 시험하는 동안에는 샌드박스(테스트 키)를, 실제 고객이 결제할 때는 프로덕션(라이브 키)을 선택합니다. 결제 화면은 MonstarX가 만들어 줍니다.
앱에서 카드 결제, 구독, 체크아웃을 처리합니다.
- 유형
- 내 앱에서 사용
- 카테고리
- 결제와 청구
- 연결 방법
- API 키
Stripe는 결제 서비스 회사입니다. 카드 입력 양식, 은행 처리, 영수증 발송을 모두 맡고, 받은 돈을 내 은행 계좌로 정산해 줍니다. Stripe를 연결하면 앱에서 수업 이용권, 상품, 월간 멤버십 같은 것을 팔 수 있습니다. 결제는 Stripe가 운영하는 안전한 결제 페이지에서 이루어집니다.
무엇을 만들 수 있나요?
섹션 제목: “무엇을 만들 수 있나요?”- ‘지금 구매’ 버튼: Stripe 결제 페이지를 열고, 결제가 끝나면 고객을 다시 앱으로 데려옵니다.
- 이용권과 묶음 상품: “수업 5회 $90”처럼 결제하면 앱 안의 기능이 열리는 상품입니다.
- 월간 또는 연간 구독: 회원제나 유료 요금제에 씁니다.
- 주문 내역: 고객마다 주문 내역을 보여 주고, 관리자 페이지에서 결제 목록을 확인합니다.
- 자동 후속 처리: Stripe가 결제를 확인하면 주문을 결제 완료로 표시하고 영수증 이메일을 보내는 식입니다.
시작하기 전에
섹션 제목: “시작하기 전에”- Stripe 계정이 필요합니다. 가입은 무료이고, Stripe는 결제가 성공할 때마다 수수료를 뗍니다(Stripe 요금 참고). MonstarX는 별도 수수료를 받지 않습니다.
- 테스트만 할 때는 다른 준비가 필요 없습니다. 모든 Stripe 계정은 샌드박스를 쓸 수 있습니다. 샌드박스는 실제 돈이 오가지 않는 연습용 계정 사본입니다.
- 실제 결제를 받으려면 먼저 Stripe 계정을 활성화해야 합니다. 사업자 정보와 정산받을 은행 계좌를 등록하는 과정입니다.
샌드박스와 프로덕션은 무엇인가요?
섹션 제목: “샌드박스와 프로덕션은 무엇인가요?”Stripe는 키를 두 세트로 제공합니다. MonstarX는 붙여 넣는 키가 어느 쪽인지 환경에서 선택하게 합니다.
| 환경 | 키 시작 부분 | 동작 |
|---|---|---|
| 샌드박스(테스트 키) | sk_test_…, pk_test_… | 테스트 카드 번호로 가상 결제를 합니다. 실제 카드에 청구되지 않고 돈도 오가지 않습니다. 앱을 만드는 동안 사용하세요. |
| 프로덕션(라이브 키) | sk_live_…, pk_live_… | 실제 카드로 실제 돈을 받아 은행 계좌로 정산합니다. 실제 고객이 결제할 때 사용하세요. |
한쪽에서 만든 것은 다른 쪽에 없습니다. 샌드박스에서 만든 상품, 가격, 고객, 결제는 샌드박스에만 남습니다.
테스트 카드로 결제하려면 어떻게 하나요?
섹션 제목: “테스트 카드로 결제하려면 어떻게 하나요?”샌드박스에서는 Stripe 결제 페이지가 Stripe가 공개한 테스트 카드를 받습니다. 만료일은 12/34처럼 미래 날짜면 되고, CVC는 아무 세 자리 숫자, 우편번호도 아무 값이나 넣으면 됩니다.
| 카드 번호 | 동작 |
|---|---|
4242 4242 4242 4242 | 결제가 성공합니다. |
4000 0000 0000 0002 | 카드가 거절됩니다. 결제에 실패했을 때 고객이 보는 화면을 확인할 수 있습니다. |
4000 0025 0000 3155 | 결제가 완료되기 전에 카드사가 추가 인증(3D Secure)을 요청합니다. |
샌드박스 결제 페이지에 실제 카드 번호를 입력하지 마세요. 다른 테스트 카드는 Stripe 테스트 가이드에서 확인할 수 있습니다.
키 발급받기
섹션 제목: “키 발급받기”-
Stripe 대시보드에 로그인하세요.
-
테스트하려면 왼쪽 위 계정 메뉴에서 샌드박스를 여세요. 실제 결제를 시작하려면 대신 라이브 모드로 전환하세요.
-
Developers 아래의 API keys를 여세요. Publishable key를 복사한 다음, Secret key를 표시해 복사하세요.
MonstarX에서 연결하기
섹션 제목: “MonstarX에서 연결하기”결제 기능을 요청하면 MonstarX가 보통 대화에 같은 입력란이 있는 Stripe 연결 카드를 보여 줍니다. 직접 연결할 수도 있습니다.
-
프로젝트를 열고 상단 바에서 백엔드를 클릭한 다음 클라우드를 클릭하세요.
-
커넥터에서 Stripe 옆의 연결을 클릭하세요.
-
환경을 선택하세요. 샌드박스(테스트 키) 또는 프로덕션(라이브 키)입니다.
-
비밀 키와 공개 키를 붙여 넣으세요. 웹훅 서명 시크릿은 지금은 비워 두세요.
-
Stripe 연결을 클릭하세요. 행에 연결됨 · 샌드박스(또는 연결됨 · 프로덕션)가 표시되고, 미리보기가 키를 적용해 다시 시작됩니다.
MonstarX는 키가 선택한 환경과 맞는지 확인하지 않습니다. sk_test_ 키는 샌드박스, sk_live_ 키는 프로덕션과 짝을 맞췄는지 직접 확인하세요.
웹훅 서명 시크릿이 꼭 필요한가요?
섹션 제목: “웹훅 서명 시크릿이 꼭 필요한가요?”웹훅은 Stripe가 앱에 “이 결제가 완료되었습니다”라고 알려 주는 기능입니다. 고객이 앱으로 돌아오기 전에 페이지를 닫아도 알림이 갑니다. 결제 후 기능을 열어 주거나 구독을 운영하는 앱이라면 웹훅을 설정하는 것이 좋습니다. Stripe는 비공개 미리보기에 접근할 수 없으니, 앱을 게시한 뒤에 추가하세요.
-
MonstarX에 “내 Stripe 웹훅 주소는 무엇이고, 어떤 이벤트를 받아야 하나요?”라고 물어보세요. 주소는 보통
https://your-app.monstarx.app/api/stripe-webhook입니다. -
Stripe에서 Webhooks를 열고 Create an event destination을 클릭하세요. 알려 준 이벤트를 고르고 Webhook endpoint를 선택한 다음 주소를 붙여 넣으세요.
-
signing secret(
whsec_로 시작)을 표시해 복사하세요. -
MonstarX에서 Stripe 행의 키 업데이트를 클릭하고, 웹훅 서명 시크릿에 붙여 넣은 뒤 키 저장을 클릭하세요. 게시된 앱에도 적용되도록 다시 게시하세요.
샌드박스와 라이브 모드는 웹훅과 서명 시크릿이 각각 따로 있습니다.
MonstarX에 사용 요청하기
섹션 제목: “MonstarX에 사용 요청하기”| 입력 예시 | 결과 |
|---|---|
| “회원들이 Stripe로 수업 5회 이용권을 $90에 살 수 있게 해 주세요.” | 구매 버튼, 해당 금액의 Stripe 결제 페이지, 감사 페이지가 생깁니다. 결제가 끝나면 이용권이 추가됩니다. |
| “Stripe로 월 $12짜리 Pro 요금제를 추가하고, 내 요금제를 확인하는 페이지도 만들어 주세요.” | 구독 결제 페이지와 회원의 요금제를 보여 주는 페이지가 생깁니다. |
| “모든 결제 내역을 보여 주는 관리자 페이지를 추가해 주세요.” | 누가, 무엇을, 언제 결제했는지 보여 주는 결제 목록 페이지가 생깁니다. |
| “내 Stripe 상품을 쇼핑몰로 가져와 주세요.” | 계정을 읽으려면 키가 필요하므로 카드에 MonstarX가 작업을 계속하려면 Stripe 연결이 필요합니다.라는 문구가 표시됩니다. 연결하면 MonstarX가 알아서 작업을 이어 갑니다. |
아직 키가 없나요? 카드에서 나중에를 클릭하세요. MonstarX는 결제 기능을 그대로 다 만들고, 키를 추가하기 전까지는 버튼에 Stripe가 아직 연결되지 않았다고 표시합니다.
실제 결제 시작하기
섹션 제목: “실제 결제 시작하기”-
Stripe 계정을 활성화하고 라이브 모드로 전환한 뒤 라이브 키를 복사하세요.
-
백엔드클라우드에서 Stripe 행의 키 업데이트를 클릭하세요.
-
환경을 프로덕션(라이브 키)으로 바꾸고 라이브 키 두 개(웹훅을 쓴다면 라이브 웹훅 서명 시크릿도)를 붙여 넣은 뒤 키 저장을 클릭하세요.
-
앱을 다시 게시하세요. 이제부터는 실제 결제가 이루어집니다.
보안과 개인정보 보호
섹션 제목: “보안과 개인정보 보호”- 키는 암호화되어 이 앱에만 저장됩니다. 키 이름은 백엔드시크릿에 표시되지만, 값은 다시 보여 주지 않습니다.
- 비밀 키와 웹훅 서명 시크릿은 앱 서버에서만 사용합니다. 공개 키는 원래 브라우저에 노출되도록 만들어진 키라서 안전합니다.
- 카드 번호는 Stripe의 결제 페이지에 입력됩니다. 앱이나 MonstarX에는 전달되지 않습니다.
- Stripe 연결, 키 업데이트, 연결 해제는 프로젝트 소유자만 할 수 있습니다. 연결 해제를 하면 이 앱에서 키가 삭제되고, 결제 화면에는 Stripe가 연결되지 않았다고 표시됩니다.
- 키가 유출되었다면 Stripe 대시보드에서 키를 교체하고 키 업데이트로 새 키를 붙여 넣으세요.
알아 두면 좋은 점
섹션 제목: “알아 두면 좋은 점”- 앱 하나는 한 번에 Stripe 환경 하나만 사용합니다. 게시된 앱을 다시 샌드박스 키로 바꾸면 다시 전환할 때까지 실제 결제가 멈춥니다.
- Stripe는 원하는 권한만 주는 제한 키(
rk_…)도 제공합니다. 체크아웃 세션 생성처럼 앱이 하는 모든 작업을 허용한다면 비밀 키 입력란에 넣어 쓸 수 있습니다. - QA 테스트는 결제 흐름을 Stripe 단계 직전까지 테스트하고, Stripe가 연결되지 않은 동안에는 키가 필요하다고 표시합니다.
자주 묻는 질문
섹션 제목: “자주 묻는 질문”MonstarX가 매출 일부를 가져가나요?
아니요. 결제 금액은 바로 내 Stripe 계정으로 들어갑니다. Stripe 자체 수수료만 붙습니다.
실제 카드 없이 결제를 시험해 볼 수 있나요?
네. 샌드박스(테스트 키)로 연결하고 테스트 카드 4242 4242 4242 4242에 미래 날짜와 아무 CVC를 넣어 결제하세요. 돈은 오가지 않습니다.
테스트 결제에서 실제 결제로 바꾸려면 어떻게 하나요?
Stripe 행의 키 업데이트를 클릭하고, 환경을 프로덕션(라이브 키)으로 바꾼 뒤 라이브 키를 붙여 넣으세요. 키 저장을 클릭하고 다시 게시하면 됩니다.
결제 화면에 Stripe가 연결되지 않았다고 나오는 이유는 무엇인가요?
키를 아직 넣지 않았거나 삭제된 상태입니다. 백엔드 → 클라우드를 열고 Stripe를 연결하세요. 미리보기가 키를 적용해 다시 시작됩니다.
MonstarX에서 결제 내역을 볼 수 있나요?
앱에서는 주문 페이지처럼 MonstarX가 만들어 준 화면을 볼 수 있습니다. 모든 결제, 환불, 정산의 전체 기록은 Stripe 대시보드에 있습니다.