몇 가지 다양한 Firebase 기능과 Stripe을 사용하면 자체 서버 인프라를 구축하지 않고도 웹 앱에서 결제를 처리할 수 있습니다. 이 가이드는 오픈 소스 cloud-functions-stripe-sample.web.app 예제 앱의 자체 버전을 사용자 정의하고 배포하는 과정을 안내합니다.
시작하기 전에 Firebase 콘솔 에서 프로젝트를 생성하고 Stripe 계정을 설정하세요.
구현 개요
- Stripe 계정을 설정하세요.
- Firebase 콘솔 에서 프로젝트를 만듭니다.
- 프로젝트에 대한 결제를 활성화하고
firebase use --add로 프로젝트를 사용하도록 Firebase CLI를 구성합니다. - 샘플 Firestripe 앱의 소스 코드를 받으세요. 프로젝트에 적합한 정보로 구성하고 앱에 맞게 코드를 맞춤설정하세요.
- 앱을 배포한 후 Firebase 콘솔에서 사용자 및 트랜잭션 목록을 찾아보세요.
샘플 앱 설정 및 배포
- 소스 코드를 얻으십시오.
- 인증 공급자 설정 에서 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 콘솔을 확인하고 결제 방법 및 결제와 함께 사용자 목록을 확인할 수 있습니다.
- Cloud Firestore 로 이동합니다.
- 사용자 목록을 확인하고, 신용 카드를 추가했거나 거래를 한 경우 각 사용자 아래의 사용자 목록을 확인하세요.
실시간 결제 수락
라이브로 전환할 준비가 되면 테스트 키를 라이브 키로 교환해야 합니다. 이러한 키에 대해 자세히 알아보려면 Stripe 문서를 참조하세요.
Stripe 비밀 구성을 업데이트합니다.
firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>/public/javascript/app.js에서 실시간 게시 가능 키를 설정하세요.변경사항을 적용하려면 Cloud Functions와
firebase deploy을 모두 재배포하세요.