몇 가지 Firebase 기능과 Stripe를 사용하면 서버 인프라를 직접 구축하지 않고도 웹 앱에서 결제를 처리할 수 있습니다. 이 가이드에서는 오픈소스 cloud-functions-stripe-sample.web.app 예시 앱의 자체 버전을 맞춤설정하고 배포하는 과정을 자세히 안내합니다.
시작하기 전에 Firebase Console에서 프로젝트를 만들고 Stripe 계정을 설정합니다.
구현 개요
- Stripe 계정을 설정합니다.
- Firebase Console에서 프로젝트를 만듭니다.
- 프로젝트에 결제를 사용 설정하고
firebase use --add를 사용하여 프로젝트를 사용하도록 Firebase CLI를 구성합니다. - 샘플 Firestripe 앱의 소스 코드를 다운로드합니다. 프로젝트에 해당하는 정보로 적절히 구성하고 앱에 맞게 코드를 맞춤설정합니다.
- 앱을 배포한 후 Firebase Console에서 사용자 및 거래 목록을 살펴봅니다.
샘플 앱 설정 및 배포
- 소스 코드를 가져옵니다.
- 인증 제공업체 설정에서 Google 및 이메일 로그인을 사용 설정합니다.
- Cloud Firestore를 사용 설정합니다.
- 아직 설치하지 않았다면 Firebase CLI를 설치하고
firebase login으로 로그인합니다. firebase use --add를 사용하여 프로젝트를 사용하도록 이 샘플을 구성합니다.cd functions; npm install; cd -를 실행하여 로컬에서 종속 항목을 설치합니다.Cloud Functions 환경 구성에 Stripe API 비밀번호 키를 추가합니다.
firebase functions:config:set stripe.secret=<YOUR STRIPE SECRET KEY>/public/javascript/app.js에서 Stripe 게시 가능 키를 설정합니다.const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;firebase deploy를 사용하여 프로젝트를 배포합니다. 이 명령어는 다음을 수행합니다.- 웹사이트를 사용할 수 있도록
public디렉터리의 모든 파일을 호스팅으로 전송합니다. functions디렉터리의 코드를 Firebase용 Cloud Functions로 전송합니다.firestore.rules에 구성된 대로 Cloud Firestore 데이터베이스의 보안 규칙을 설정합니다. 제공된 규칙에 따라 사용자는 자신의 결제 및 결제 수단만 읽고 쓸 수 있습니다.
- 웹사이트를 사용할 수 있도록
샘플 앱 테스트
your-firebase-project-id.web.app에서 결제 앱의 URL을 방문하여 다음 기능이 작동하는지 확인합니다.
- Google 또는 이메일을 통해 로그인 가능
- 새 Stripe 테스트 카드를 추가한 후 카드 선택 요소 확인 가능
- 카드 중 하나를 선택하여 요금 청구 가능
- 로그아웃 가능
비교 결과는 cloud-functions-stripe-sample.web.app을 참조하세요.
사용자에게 원활한 경험을 제공하기 위해 결제 페이지의 모양을 추가로 맞춤설정하거나 기존 앱에 연결할 수 있습니다.
처리된 결제 보기
결제 페이지를 설정하고 배포했으면 Firebase Console에서 사용자 목록과 함께 결제 수단 및 결제를 확인할 수 있습니다.
- Cloud Firestore로 이동합니다.
- 사용자 목록을 확인합니다. 사용자가 신용카드를 추가하거나 거래를 한 경우 각 사용자 아래에 이 정보 목록도 표시됩니다.
실시간 결제 허용
서비스 개시 준비가 되었으면 테스트 키를 실시간 키로 교환해야 합니다. 이러한 키에 대한 자세한 내용은 Stripe 문서를 참조하세요.
Stripe 보안 비밀 구성을 업데이트합니다.
firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>/public/javascript/app.js에서 실시간 게시 가능 키를 설정합니다.변경사항이 적용되도록 Cloud Functions와 호스팅을 다시 배포합니다.
firebase deploy