콘텐츠로 이동

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 테스트 가이드에서 확인할 수 있습니다.

  1. Stripe 대시보드에 로그인하세요.

  2. 테스트하려면 왼쪽 위 계정 메뉴에서 샌드박스를 여세요. 실제 결제를 시작하려면 대신 라이브 모드로 전환하세요.

  3. Developers 아래의 API keys를 여세요. Publishable key를 복사한 다음, Secret key를 표시해 복사하세요.

결제 기능을 요청하면 MonstarX가 보통 대화에 같은 입력란이 있는 Stripe 연결 카드를 보여 줍니다. 직접 연결할 수도 있습니다.

  1. 프로젝트를 열고 상단 바에서 백엔드를 클릭한 다음 클라우드를 클릭하세요.

  2. 커넥터에서 Stripe 옆의 연결을 클릭하세요.

  3. 환경을 선택하세요. 샌드박스(테스트 키) 또는 프로덕션(라이브 키)입니다.

  4. 비밀 키와 공개 키를 붙여 넣으세요. 웹훅 서명 시크릿은 지금은 비워 두세요.

  5. Stripe 연결을 클릭하세요. 행에 연결됨 · 샌드박스(또는 연결됨 · 프로덕션)가 표시되고, 미리보기가 키를 적용해 다시 시작됩니다.

MonstarX는 키가 선택한 환경과 맞는지 확인하지 않습니다. sk_test_ 키는 샌드박스, sk_live_ 키는 프로덕션과 짝을 맞췄는지 직접 확인하세요.

웹훅 서명 시크릿이 꼭 필요한가요?

섹션 제목: “웹훅 서명 시크릿이 꼭 필요한가요?”

웹훅은 Stripe가 앱에 “이 결제가 완료되었습니다”라고 알려 주는 기능입니다. 고객이 앱으로 돌아오기 전에 페이지를 닫아도 알림이 갑니다. 결제 후 기능을 열어 주거나 구독을 운영하는 앱이라면 웹훅을 설정하는 것이 좋습니다. Stripe는 비공개 미리보기에 접근할 수 없으니, 앱을 게시한 뒤에 추가하세요.

  1. MonstarX에 “내 Stripe 웹훅 주소는 무엇이고, 어떤 이벤트를 받아야 하나요?”라고 물어보세요. 주소는 보통 https://your-app.monstarx.app/api/stripe-webhook입니다.

  2. Stripe에서 Webhooks를 열고 Create an event destination을 클릭하세요. 알려 준 이벤트를 고르고 Webhook endpoint를 선택한 다음 주소를 붙여 넣으세요.

  3. signing secret(whsec_로 시작)을 표시해 복사하세요.

  4. MonstarX에서 Stripe 행의 키 업데이트를 클릭하고, 웹훅 서명 시크릿에 붙여 넣은 뒤 키 저장을 클릭하세요. 게시된 앱에도 적용되도록 다시 게시하세요.

샌드박스와 라이브 모드는 웹훅과 서명 시크릿이 각각 따로 있습니다.

입력 예시결과
“회원들이 Stripe로 수업 5회 이용권을 $90에 살 수 있게 해 주세요.”구매 버튼, 해당 금액의 Stripe 결제 페이지, 감사 페이지가 생깁니다. 결제가 끝나면 이용권이 추가됩니다.
“Stripe로 월 $12짜리 Pro 요금제를 추가하고, 내 요금제를 확인하는 페이지도 만들어 주세요.”구독 결제 페이지와 회원의 요금제를 보여 주는 페이지가 생깁니다.
“모든 결제 내역을 보여 주는 관리자 페이지를 추가해 주세요.”누가, 무엇을, 언제 결제했는지 보여 주는 결제 목록 페이지가 생깁니다.
“내 Stripe 상품을 쇼핑몰로 가져와 주세요.”계정을 읽으려면 키가 필요하므로 카드에 MonstarX가 작업을 계속하려면 Stripe 연결이 필요합니다.라는 문구가 표시됩니다. 연결하면 MonstarX가 알아서 작업을 이어 갑니다.

아직 키가 없나요? 카드에서 나중에를 클릭하세요. MonstarX는 결제 기능을 그대로 다 만들고, 키를 추가하기 전까지는 버튼에 Stripe가 아직 연결되지 않았다고 표시합니다.

  1. Stripe 계정을 활성화하고 라이브 모드로 전환한 뒤 라이브 키를 복사하세요.

  2. 백엔드클라우드에서 Stripe 행의 키 업데이트를 클릭하세요.

  3. 환경을 프로덕션(라이브 키)으로 바꾸고 라이브 키 두 개(웹훅을 쓴다면 라이브 웹훅 서명 시크릿도)를 붙여 넣은 뒤 키 저장을 클릭하세요.

  4. 앱을 다시 게시하세요. 이제부터는 실제 결제가 이루어집니다.

  • 키는 암호화되어 이 앱에만 저장됩니다. 키 이름은 백엔드시크릿에 표시되지만, 값은 다시 보여 주지 않습니다.
  • 비밀 키와 웹훅 서명 시크릿은 앱 서버에서만 사용합니다. 공개 키는 원래 브라우저에 노출되도록 만들어진 키라서 안전합니다.
  • 카드 번호는 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 대시보드에 있습니다.