FlutterFlow에서 사용자 정의 결제를 어떻게 만들 수 있나요?

시작하기 전에:

이 단계를 따르기 시작하기 전에 다음 요구 사항이 있는지 확인하세요:

• Flutterflow 프로젝트/응용 프로그램이 이미 설정되어 있습니다.
• Flutter SDK가 컴퓨터에 설치되어 있는지 확인하십시오.
• 코드 편집용으로 VS Code 또는 Android Studio와 같은 텍스트 편집기.
• Stripe 계정이 이미 설정되어 있습니다.

더 이상 두서 없이 시작하겠습니다:

결제 게이트웨이 설정:

1단계: Stripe 웹훅 설정

Stripe 대시보드에서 개발자 섹션으로 이동하고 웹훅을 클릭합니다. 새 엔드포인트를 추가하는 버튼을 클릭하고, URL 필드에 FlutterFlow에서 제공한 URL을 입력합니다. 보내야 하는 이벤트가 'checkout.session.completed'로 설정되어 있는지 확인하고 '엔드포인트 추가'를 클릭합니다.

2단계: 사인비밀 확인

웹훅을 생성한 후 Stripe는 Signing Secret를 제공합니다. 이것을 FlutterFlow에 입력해야 하므로 가지고 있는 것이 좋습니다.

3단계: FlutterFlow 설정

FlutterFlow의 프로젝트에서 설정 탭으로 이동합니다. Stripe Configuration 섹션에서 Publishable Key와 Secret Key(Stripe API 키에서 찾을 수 있음)를 입력하고 이전 단계에서 얻은 웹훅 사인비밀을 입력합니다.

사용자 지정 결제 생성:

4단계: Stripe 패키지 추가

Flutter 프로젝트의 pubspec.yaml로 이동하고 다음 패키지를 추가합니다:

dependencies:
  stripe_sdk: ^4.0.2

그런 다음 flutter pub get을 실행하여 패키지를 가져옵니다.

5단계: Stripe 초기화

Flutter 어플리케이션에서 Stripe를 사용하기 전에 초기화해야 합니다. 이를 위한 권장하는 장소는 main() 메소드입니다.

import 'package:stripe_sdk/stripe_sdk.dart';

void main() {
  Stripe.init('your-publishable-key');
  runApp(MyApp());
}

'your-publishable-key'를 실제로 공개키로 바꿉니다.

6단계: 결제 의도 생성

다음 단계는 결제 의도를 생성하는 것입니다. 이것은 결제를 확인하는 데 사용되는 클라이언트 비밀을 반환합니다. 결제 의도는 클라이언트 (Flutter 앱) 또는 서버에서 생성할 수 있습니다. 결제 의도를 생성하기로 결정한 위치에 따라 방법이 다릅니다:

클라이언트 (Flutter 앱)에서 결제 의도 생성 :

const stripe = Stripe(‘pk_test_…’); // 공개 키 사용
final paymentMethod = await stripe.paymentMethods.create(PaymentMethod()..card = Card(‘4242 4242 4242 4242’, month: 12, year: 2021));

final intent = await stripe.paymentIntents.confirm(
    PaymentIntent()
      ..paymentMethodId = paymentMethod.id
      ..amount = 500 // 센트 단위 금액
      ..currency = 'usd'
  );

또는

서버에서 결제 의도 생성 :

Stripe 백엔드와 통신하는 서버에 요청을 보내 결제 의도를 생성해야 합니다.

7단계: 결제 확인

결제 의도를 생성하고 클라이언트 비밀을 얻은 후 confirmStripePayment 메소드를 호출하여 결제를 확인할 수 있습니다.

bool paymentStatus = confirmStripePayment(intentClientSecret);

이 메소드를 try-catch 블럭에 감싸 결제 확인 중 발생할 수 있는 예외를 처리할 수 있습니다.

8단계: 피드백 제공

결제 확인 후 사용자에게 피드백을 제공합니다. 이는 UI 업데이트 또는 토스트 메시지 제공 등이 될 수 있습니다. 이는 단순히 다음과 같을 수 있습니다:

if (paymentStatus) {
  print("결제 성공");
} else {
  print("결제 실패");
}

축하합니다! FlutterFlow에서 사용자 정의 결제를 생성하고 확인했습니다. 기대한 대로 작동하는지 확인하기 위해 전체 흐름을 철저히 테스트하는 것을 잊지 마세요.