Firebase로 결제 처리

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

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

구현 개요

  1. Firebase 호스팅을 사용하여 앱을 실행하는 데 필요한 Firebase 기능과 함께 앱을 설정하고 배포합니다. Firebase CLI를 사용하면 Cloud Functions 및 Firebase 실시간 데이터베이스가 사용 설정된 shell 앱을 명령줄에서 직접 배포할 수 있습니다.
  2. 샘플 Firestripe 앱의 소스 코드를 다운로드합니다. 프로젝트에 해당하는 정보로 적절히 구성하고 앱에 맞게 코드를 맞춤설정합니다.
  3. 앱을 배포한 후 Firebase 콘솔에서 사용자 및 거래 목록을 살펴봅니다.

앱 설정 및 배포

Firebase 프로젝트와 관련하여 필요한 Firebase 기능을 모두 포함하는 shell 앱부터 시작합니다. 그런 다음 shell 앱을 배포하고 올바르게 구성되었는지 테스트합니다.

Firebase CLI에서 수행할 작업

  1. Firebase CLI 설정 섹션의 단계에 따라 Firebase CLI를 설치합니다.
  2. Firebase CLI가 설치되었으면 firebase init를 실행하여 shell 앱을 만듭니다.
  3. 데이터베이스, 함수, 호스팅을 선택합니다. 그런 다음 프로젝트 목록에서 Firebase 프로젝트를 선택합니다.

작동 테스트

  1. firebase deploy를 실행하여 shell 앱을 배포합니다.
  2. 앱이 실행되는지 확인합니다.

샘플 앱 다운로드 및 구성

샘플 앱으로 수행할 작업

  1. Firestripe의 소스 코드를 다운로드합니다.
  2. functions 디렉토리에서 npm install -g를 실행하여 Node.js 라이브러리를 로컬에 설치합니다.
  3. public/index.html 파일에서 Firebase 및 Stripe 키를 설정합니다.

      firebase.initializeApp({
        apiKey: "your-web-api-key",
        authDomain: "your-firebase-project-id.firebaseapp.com",
        databaseURL: "https://your-firebase-project-id.firebaseio.com",
        storageBucket: "your-firebase-project-id.appspot.com",
        messagingSenderId: "your-cloud-messaging-sender-id"
      });
      Stripe.setPublishableKey('your-stripe-publishable-key');
    

Firebase CLI에서 수행할 작업

  1. 프로젝트 디렉토리에서 다음 명령어를 실행하여 Stripe 서버 키를 구성합니다. firebase functions:config:set stripe.token="your-test-secret-key"
  2. firebase deploy를 실행하여 새로운 변경사항을 푸시합니다.

작동 테스트

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

  • 사용자 이름이 페이지에 표시됩니다.
  • 신용카드를 입력하고 추가할 수 있습니다.
  • 청구를 만들 수 있습니다.
  • 로그아웃할 수 있습니다.

비교를 위해 Firestripe 예제를 사용해 보세요.

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

처리된 결제 보기

결제 페이지를 설정하고 배포한 후 Firebase 콘솔을 확인하여 사용자 및 거래 목록을 볼 수 있습니다.

Firebase 콘솔에서 수행할 작업

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

다음에 대한 의견 보내기...

도움이 필요하시나요? 지원 페이지를 방문하세요.