몇 가지 다른 Firebase 기능과 Stripe를 사용하면 자체 서버 인프라를 구축하지 않고도 웹 앱에서 결제를 처리할 수 있습니다. 이 가이드는 오픈 소스 cloud-functions-stripe-sample.web.app 예제 앱의 고유 버전을 사용자 지정하고 배포하는 과정을 안내합니다.
시작하기 전에 Firebase 콘솔 에서 프로젝트를 만들고 Stripe 계정을 설정하세요.
구현 개요
- 스트라이프 계정을 설정합니다.
- Firebase 콘솔 에서 프로젝트를 만듭니다.
- 프로젝트에 대한 결제를 활성화하고 Firebase CLI를
firebase use --add와 함께 프로젝트를 사용하도록 구성합니다. - 샘플 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와 Hosting을 모두 재배포하세요.
firebase deploy.