FlutterFlow의 내장 결제 기능을 활용하는 방법을 배우세요. Stripe 설정, 결제 구성, 체크아웃 버튼 추가, 트랜잭션 테스트에 대한 단계별 가이드입니다.
Book a call with an Expert
Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.
단계 1: FlutterFlow 계정에 로그인하세요
시작하기 전에 FlutterFlow 계정이 있는지 확인하세요. FlutterFlow에 방문하여 페이지 오른쪽 상단에 있는 "로그인"을 클릭하세요. 로그인 자격 증명을 입력하고 대시보드에 접속하세요.
단계 2: 프로젝트에 접근하세요
FlutterFlow 대시보드에서 지불 기능을 추가하고자 하는 기존 프로젝트를 선택하거나 새 프로젝트를 생성할 수 있습니다. 새 프로젝트를 만들려면 "New Project"를 클릭하고 적절한 이름을 입력하세요. 프로젝트를 열고 나면 프로젝트 빌더를 볼 수 있어야 합니다.
단계 3: Payments로 이동하세요
FlutterFlow 프로젝트 빌더에서 화면의 왼쪽 사이드에 있는 사이드바를 찾습니다. 아래로 스크롤하여 목록 하단에 있는 "Settings" 탭을 클릭합니다. 설정에서 "Payments"를 클릭합니다.
단계 4: Stripe 계정 연동
FlutterFlow는 Stripe라는 제3자 플랫폼을 통해 결제 처리를 가능하게 합니다. Stripe 계정을 연동하려면 Payments 페이지 내에서 "Connect Stripe"를 선택합니다. 이로써 Stripe의 인증 페이지로 이동하게 되며, 여기에서 Stripe 계정 자격증명을 입력하고 연결을 승인해야 합니다.
단계 5: 결제 설정 구성
Stripe 계정이 연결되면 FlutterFlow의 Payments 페이지로 돌아갑니다. 여기에서 결제와 관련된 다양한 설정을 구성할 수 있습니다. 이런 설정에는 테스트 모드 전환, 화폐 설정, 기본 세율 구성이 포함됩니다.
단계 6: 제품/서비스 설정
자신이 판매하고자 하는 제품 또는 서비스를 설정하세요. Stripe에서 "Products" 탭으로 이동하고 "Add product"를 클릭하십시오. 이름, 설명, 가격 등 필요한 세부 사항을 제공하세요.
단계 7: 앱에 결제 버튼 추가
FlutterFlow의 프로젝트로 돌아가 결제 기능을 추가하려는 레이아웃으로 이동하세요. 레이아웃을 열고 사이드바 상단의 '+' 아이콘을 클릭하여 위젯 라이브러리를 엽니다. 위젯 라이브러리에서 "Stripe Checkout Button"을 검색하고 선택합니다. 그리고나서 이 버튼을 6단계에서 Stripe에서 설정한 제품 또는 서비스에 맵핑해야 합니다.
단계 8: 결제 기능 테스트
결제 기능을 테스트하려면 FlutterFlow의 Payments 설정에서 'Test mode'로 전환하고 사용자로서 주문을 접수하세요. Stripe 대시보드의 'Payments' 탭에서 거래를 볼 수 있어야 합니다.
단계 9: 앱 배포
결제 기능을 테스트하였고, 모든 것이 정상적으로 작동하면 FlutterFlow의 Payments 설정에서 'Live mode'로 다시 전환하세요. 이제 앱을 배포할 수 있습니다!
축하합니다, 이제 FlutterFlow 앱에 내장 결제 기능을 성공적으로 통합하였습니다. Stripe 대시보드의 실시간 데이터를 사용하여 발생하는 거래를 모니터링하고 관리하세요.
Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.
Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.
Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.