FlutterFlow 프로젝트에 결제를 어떻게 추가하나요?

1단계: 스트라이프 계정 설정

FlutterFlow 프로젝트에 Stripe를 통합하기 전에, Stripe 계정이 필요합니다. Stripe 웹사이트로 이동하여 계정을 등록하세요. 계정을 설정하고 등록한 후, 개발자 메뉴를 클릭하고 API 키를 선택하면, 공개 키와 비밀 키 두 개의 키를 볼 수 있습니다. 이 키들을 안전한 곳에 저장하세요. 나중에 필요합니다.

2단계: FlutterFlow 프로젝트 열기

Stripe 계정을 성공적으로 생성한 후 다음 단계는 결제 기능을 추가하려는 FlutterFlow 프로젝트를 엽니다. FlutterFlow 대시보드로 이동하여 프로젝트를 엽니다.

3단계: 프로젝트 설정으로 이동

프로젝트를 열면 프로젝트 설정 으로 이동합니다. 왼쪽 사이드바에서 설정 아이콘(조절 가능한 렌치 모양)을 찾을 수 있습니다. 이를 클릭하여 설정을 엽니다.

4단계: FlutterFlow 프로젝트에 Stripe 통합

프로젝트 설정 창에서 스크롤을 내려 Stripe 설정을 찾습니다. 이곳에 첫 번째 단계에서 받은 Stripe API 키를 입력합니다. 비밀 키와 공개 키를 FlutterFlow Stripe 설정의 적절한 필드에 붙여넣기하세요. 모두 완료했다면 저장을 클릭하세요.

5단계: 제품 생성

결제를 위해 Stripe를 사용하려면 제품을 생성해야 합니다. FlutterFlow 대시보드에서 데이터 탭으로 이동합니다. 여기에서 "Products"라는 새로운 컬렉션을 생성합니다. 제품에 원하는 필드를 추가하세요. 최소한 이름, 설명, 가격 필드가 필요합니다.

6단계: 구매 기능 만들기

구매 기능을 추가하려는 화면으로 이동하세요. 카드 번호, 만료 월, 만료 연도, CVC에 대한 입력을 생성했는지 확인하세요.

구매를 완료하는 버튼을 만들고 버튼 액션에서 새 함수를 생성하세요. 이 함수에는 Stripe 제품 구매 블록을 추가합니다. 카드 필드를 선택하고 "구매할 것"에 대해 이름으로 원하는 제품을 찾는 조회를 입력하세요. 이는 "Products" 컬렉션에서 수행됩니다.

7단계: 구매 확인 표시

결제가 성공적으로 완료되었는지 표시하려면 함수에 두 개의 토스트 메시지를 추가하세요. Stripe 구매 블록이 끝난 후에, 성공 알림으로 "Purchase completed" 메시지를 띄우고, 실패 시 "Purchase failed" 메시지를 띄웁니다.

8단계: 결제 기능 테스트

구현을 테스트하기 위해 상단에 위치한 재생 버튼을 누르고 구매를 테스트하세요. 결제가 성공하면 "Purchase completed"라는 토스트 메시지를 받게 되며, 실패하면 "Purchase failed"라는 메시지를 받게 됩니다.

9단계: 앱 출시

결제가 올바르게 처리되는 것을 확인한 후 메인 대시보드로 돌아가 앱을 출시하여 사용자에게 제공하도록 합니다.

주의: 앱을 출시하기 전에 항상 Stripe 계정을 테스트 모드에서 라이브 모드로 전환하세요!

FlutterFlow는 결제의 서버 측면을 모두 처리하며 결제 UI를 직접 변경할 수 있습니다. 이는 기본 설정이며, FlutterFlow의 효율적이고 사용하기 쉬운 기능을 활용해 더 복잡한 기능을 추가할 수 있습니다.