FlutterFlow와 Stripe를 어떻게 통합하나요?

사전 요구 사항
시작하기 전에 다음이 필요합니다.

• Stripe 계정 (여기에서 생성 가능)
• FlutterFlow에서의 프로젝트. 아직 생성하지 않았다면, FlutterFlow 사이트를 방문해 생성해주세요.
• FlutterFlow를 탐색하는 방법에 대한 이해. FlutterFlow가 처음이라면, 먼저 FlutterFlow 문서를 방문하여 알아보는 것이 좋습니다.

1단계: FlutterFlow 통합 섹션으로 이동

FlutterFlow 프로젝트를 엽니다. 왼쪽 사이드 바 메뉴에서 통합 섹션을 찾을 수 있습니다. **"통합 추가"**를 클릭합니다.

2단계: Stripe 통합 선택

다양한 옵션 중에서 Stripe를 통합으로 선택합니다. 'Stripe' 카드의 오른쪽 하단에 있는 "+" 버튼을 클릭합니다.

3단계: Stripe 자격 증명 입력

다음으로, Stripe 게시 가능 키와 비밀 키를 입력해야 합니다. 이 키를 얻으려면 Stripe 대시보드로 이동합니다. 왼쪽 사이드 바에서 개발자를 선택한 후 API 키를 선택합니다.

올바른 환경에 있는지 확인하십시오. 결제를 테스트해야 할 경우, 테스트 환경 키를 프로젝트에 사용할 수 있습니다. 그러나 실제 배포를 위해서는 실시간 환경 키를 사용해야 합니다.

Stripe 대시보드에서 게시 가능 키(테스트 환경이면 pk_test_로 시작하고, 실시간 환경이면 pk_live_로 시작)와 비밀 키(테스트 환경이면 sk_test_로 시작하고, 실시간 환경이면 sk_live_로 시작)를 복사하고 각각을 FlutterFlow의 해당 필드에 붙여 넣습니다. 필요한 키를 모두 입력하면 **"통합 추가"**를 클릭합니다.

4단계: 결제 UI 생성

FlutterFlow 프로젝트에서는 카드 번호, 만료 날짜, CVV 및 Stripe가 결제 처리를 위해 필요로 하는 정보를 포함하는 UI를 디자인해야 합니다. 왼쪽 사이드 바의 **"위젯"**으로 이동한 다음 **"Stripe 카드"**를 UI로 드래그 앤 드롭하여 사용자 앱 UI에 따라 이 위젯을 사용자 정의할 수 있습니다.

5단계: 결제 처리 함수 생성

이제 결제를 처리하는 함수를 생성합니다. 이를 위해 왼쪽 사이드 바 메뉴에서 **"함수"**를 선택합니다. 그런 다음 **"함수 추가"**를 클릭하고 **"사용자 정의 함수"**를 선택합니다. 함수 에디터로 이동하면 결제 처리 로직을 작성합니다. 이 로직은 Flutterflow의 내장 Stripe 함수를 사용합니다.

Stripe.instance.createPaymentIntent(
  PaymentIntentParams()
    ..setupFutureUsage = PaymentIntentsFutureUsage.OffSession
    ..currency = 'usd'
    ..items = [PaymentIntentItem(amount: 500),]
);

주의: 이는 기본적인 예시이며, 함수가 더 복잡할 수 있지만, 중요한 부분은 결제 처리를 위해 통합된 Stripe 함수를 호출하는 것입니다.

6단계: 버튼에 결제 함수 연결

이 결제 처리 함수를 버튼에 연결합니다. 위젯 섹션에서 "FlatButton" 또는 **"RaisedButton"**을 UI로 드래그 앤 드롭한 다음 결제 함수에 연결할 수 있습니다.

이 단계를 실행하면 FlutterFlow + Stripe 통합이 가능해집니다. 통합하는 데 행운을 빕니다!