Firebase로 결제 처리

몇 가지 Firebase 기능과 Stripe를 사용하면 서버 인프라를 직접 구축하지 않고도 웹 앱에서 결제를 처리할 수 있습니다. 이 가이드에서는 오픈소스 cloud-functions-stripe-sample.web.app 예시 앱의 자체 버전을 맞춤설정하고 배포하는 과정을 자세히 안내합니다.

시작하기 전에 Firebase Console에서 프로젝트를 만들고 Stripe 계정을 설정합니다.

구현 개요

  1. Stripe 계정을 설정합니다.
  2. Firebase Console에서 프로젝트를 만듭니다.
  3. 프로젝트에 결제를 사용 설정하고 Firebase CLI를 구성합니다. firebase use --add로 프로젝트를 사용할 수 있습니다.
  4. 샘플 Firestripe 앱의 소스 코드를 다운로드합니다. 프로젝트에 해당하는 정보로 적절히 구성하고 앱에 맞게 코드를 맞춤설정합니다.
  5. 앱을 배포한 후 Firebase Console에서 사용자 및 거래 목록을 살펴봅니다.

샘플 앱 설정 및 배포

  1. 소스 코드를 가져옵니다.
  2. 인증 제공업체 설정에서 Google 및 이메일 로그인을 사용 설정합니다.
  3. Cloud Firestore를 사용 설정합니다.
  4. Firebase CLI 설치 아직 로그인하지 않았다면 firebase login(으)로 로그인하세요.
  5. firebase use --add를 사용하여 프로젝트를 사용하도록 이 샘플을 구성합니다.
  6. cd functions; npm install; cd -를 실행하여 로컬에서 종속 항목을 설치합니다.

  7. Stripe API 보안 비밀 키 추가 Cloud Functions 환경 구성에 추가합니다.

    firebase functions:config:set stripe.secret=<YOUR STRIPE SECRET KEY>

  8. /public/javascript/app.js에서 Stripe 게시 가능 키를 설정합니다.

    const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

  9. firebase deploy를 사용하여 프로젝트를 배포합니다. 이 명령어는 다음을 수행합니다.

    1. 웹사이트를 사용할 수 있도록 public 디렉터리의 모든 파일을 Hosting로 전송합니다.
    2. functions 디렉터리의 코드를 Cloud Functions for Firebase로 전송합니다.
    3. 다음에 구성된 대로 Cloud Firestore 데이터베이스의 보안 규칙을 설정합니다. firestore.rules입니다. 제공된 규칙에 따라 사용자는 자신의 결제 및 결제 수단만 읽고 쓸 수 있습니다.

샘플 앱 테스트

your-firebase-project-id.web.app에서 결제 앱의 URL을 방문하여 다음 기능이 작동하는지 확인합니다.

  • Google 또는 이메일을 통해 로그인 가능
  • 새 Stripe 테스트 카드를 추가한 후 카드 선택 요소 확인 가능
  • 카드 중 하나를 선택하여 요금 청구 가능
  • 로그아웃 가능

비교 결과는 cloud-functions-stripe-sample.web.app을 참조하세요.

사용자에게 원활한 경험을 제공하기 위해 결제 페이지의 모양을 추가로 맞춤설정하거나 기존 앱에 연결할 수 있습니다.

처리된 결제 보기

결제 페이지를 설정하고 배포했으면 Firebase Console에서 사용자 목록과 함께 결제 수단 및 결제를 확인할 수 있습니다.

  1. Cloud Firestore 페이지로 이동합니다.
  2. 사용자 목록을 확인합니다. 사용자가 신용카드를 추가하거나 거래를 한 경우 각 사용자 아래에 이 정보 목록도 표시됩니다.

실시간 결제 허용

서비스 개시 준비가 되었으면 테스트 키를 실시간 키로 교환해야 합니다. 이러한 키에 대한 자세한 내용은 Stripe 문서를 참조하세요.

  1. Stripe 보안 비밀 구성을 업데이트합니다.

    firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>

  2. /public/javascript/app.js에서 실시간 게시 가능 키를 설정합니다.

  3. 변경사항을 적용하려면 Cloud Functions 및 Hosting를 모두 다시 배포합니다. firebase deploy입니다.