搜尋套件、儲存庫與 APP 分類

stripe_checkout 封面
套件詳情v1.0.2

stripe_checkout

為網頁和行動裝置建立 Stripe 結帳付款頁面

AndroidiOSWeb
近 30 天下載
168
喜歡數
37
Pub 分數
90

安裝套件

flutter pub add stripe_checkout

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

stripe_checkout 套件讓開發者能在 Android、iOS 與 Web 平台上建立無縫的 Stripe Checkout 支付頁面。它直接整合至 Stripe 安全的支付基礎設施,讓使用者無需離開應用程式或瀏覽器即可完成交易。專為 Flutter 打造,此套件簡化了一次性付款、訂閱與自訂結帳流程的實作。該套件處理權杖化與安全資料傳輸,降低 PCI 合規的負擔。適合需要快速、可靠且具品牌特色的結帳體驗之應用。

適用情境

  • 一次性付款
  • 訂閱計費
  • 電子商務整合
  • 行動與網頁結帳
  • 自訂付款流程

主要特色

  • 安全的 Stripe 結帳整合
  • 跨平台支援(Android、iOS、Web)
  • 支付啟動的簡單 API
  • 內建的標記化
  • 品牌化結帳體驗

適合對象

  • 需要支付功能的Flutter應用
  • 電商平台
  • SaaS 訂閱服務
  • 具有結帳需求的 Web 與行動應用程式
  • 尋求符合 PCI 標準解決方案的開發者

使用建議

  • 需要 Stripe 帳戶
  • Web 需要正確的後端設定
  • 與完整的 Stripe SDK 相比,自訂選項較少
  • 依賴網路連接
  • 可能需要額外處理退貨與Webhook

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

Flutter Stripe

pub package build

The Stripe Flutter SDK allows you to build delightful payment experiences in your native Android and iOS apps using Flutter. We provide powerful and customizable UI screens and elements that can be used out-of-the-box to collect your users' payment details.

stripe-flutter_cover

Features

Simplified Security: We make it simple for you to collect sensitive data such as credit card numbers and remain PCI compliant. This means the sensitive data is sent directly to Stripe instead of passing through your server. For more information, see our Integration Security Guide.

Apple Pay: We provide a seamless integration with Apple Pay.

Google Pay: The plugin can easily act as payment provider for the Pay plugin that enables you to seamlessly integrate Google Pay or Apple Pay. All you need to do is add your stripe publishable key to the payment profile.

Payment methods: Accepting more payment methods helps your business expand its global reach and improve checkout conversion.

SCA-Ready: The SDK automatically performs native 3D Secure authentication if needed to comply with Strong Customer Authentication regulation in Europe.

Native UI: We provide native screens and elements to securely collect payment details on Android and iOS.

Pre-built payments UI: Learn how to integrate Payment Sheet, the new pre-built payments UI for mobile apps. This pre-built UI lets you accept cards, Apple Pay, and Google Pay out of the box, and includes support for saving & reusing cards.

Recommended usage

If you're selling digital products or services within your app, (e.g. subscriptions, in-game currencies, game levels, access to premium content, or unlocking a full version), you must use the app store's in-app purchase APIs. This does not apply to app developers in the USA as they are excluded by new court ruling in 2025. See Apple's and Google's guidelines for more information. For all other scenarios you can use this SDK to process payments via Stripe.

Installation

dart pub add flutter_stripe
Requirements
Android

This plugin requires several changes to be able to work on Android devices. Please make sure you follow all these steps:

  1. Use Android 5.0 (API level 21) and above.
  2. Use Kotlin version 1.8.0 and above: example
  3. Requires Android Gradle plugin 8 and higher
  4. Using a descendant of Theme.AppCompat for your activity: example, example night theme
  5. Using an up-to-date Android gradle build tools version: example and an up-to-date gradle version accordingly: example
  6. Using FlutterFragmentActivity instead of FlutterActivity in MainActivity.kt: example
  7. Add the following rules to your proguard-rules.pro file: example
-dontwarn com.stripe.android.pushProvisioning.**
-dontwarn com.google.android.gms.tapandpay.**
-dontwarn kotlinx.parcelize.Parceler$DefaultImpls
-dontwarn kotlinx.parcelize.Parceler
-dontwarn kotlinx.parcelize.Parcelize
# Keep Stripe classes
-keep class com.stripe.** { *; }
  1. Rebuild the app, as the above changes don't update with hot reload

These changes are needed because the Android Stripe SDK requires the use of the AppCompat theme for their UI components and the Support Fragment Manager for the Payment Sheets

If you are having troubles to make this package to work on Android, join this discussion to get some support.

iOS

Compatible with apps targeting iOS 13 or above.

To upgrade your iOS deployment target to 13.0, you can either do so in Xcode under your Build Settings, or by modifying IPHONEOS_DEPLOYMENT_TARGET in your project.pbxproj directly.

You will also need to update in your Podfile:

platform :ios, '13.0'

For card scanning add the following to your Info.plist:

<key>NSCameraUsageDescription</key>
<string>Scan your card to add it automatically</string>
<key>NSCameraUsageDescription</key>
<string>To scan cards</string>
Web

Now you can use Stripe with Flutter web! Notice right now it is highly experimental and only a subset of features is implemented. Namely:

  • Create paymentmethod
  • Confirm payment intent
  • Confirm setup intent
  • Create token
Supported widgets

To use Stripe on web, it is required to add flutter_stripe_web in your pubspec file

Running on WASM

To run the project with WebAssembly support:

  1. Build the web app with WASM:
flutter build web --wasm
  1. Serve the built app with the required CORS headers:
dhttpd --path build/web --headers "Cross-Origin-Opener-Policy:same-origin,Cross-Origin-Embedder-Policy:credentialless"

Note: The dhttpd package is required to serve the app with proper CORS headers. Install it with:

dart pub global activate dhttpd

Usage

Card payments

There are 3 ways of handling card payments

Method Ease of use description Implementation docs
Payment sheet Easy Our recommended way of handling payments. It offers localization, animations and error handling out of the box. docs
Cardfield Medium Single line cardfield. Offers more flexibility but has less built-in functionality. docs
Card form Medium Similar as the cardfield but the entry fields are spread across multi lines docs

Note: Stripe is sunsetting CardField and CardForm in favor of PaymentSheet. We recommend using PaymentSheet for all new integrations. See Stripe's documentation for more details.

Wallets

This library fully supports native Apple Pay and Google pay integration.

Mobile elements

We also support the Customer Sheet and the Address sheet mobile elements to collect and manage customer payment methods and addresses.

Financial connections

We also support Financial connections in our latest sdk. Check out the docs to learn more on how to set it up.

Deep linking & coexistence with other deep-link plugins

Redirect-based payment methods (Link, iDEAL, Bancontact, PayPal, etc.) send the user out to a browser and back to your app via a returnURL. On iOS, flutter_stripe registers an app- and scene-delegate and forwards incoming URLs to the Stripe SDK. For URLs that are not a pending Stripe redirect it returns false and does not consume them — it does not block app_links, uni_links, go_router, or any other URL handler.

If a deep-link plugin stops receiving links after adding flutter_stripe, it is almost always one of the following (none of which is flutter_stripe consuming the URL):

  • app_links version. On apps using UISceneDelegate (the Flutter default since 3.41), use app_links >= 7.0.0, which registers a scene delegate. Older versions only register an app delegate and never receive scene:openURLContexts:.
  • FlutterDeepLinkingEnabled. If it is true in Info.plist, Flutter's own router may handle the URL. Either set it to false, or forward only your Stripe URLs from your router/deep-link handler (see below) and let everything else flow to your routes.
  • Scheme/returnURL mismatch. Make sure CFBundleURLSchemes, Stripe.urlScheme, and your PaymentSheet returnURL all use the same scheme.

To complete a Stripe redirect while your app owns deep linking, forward matching URLs to Stripe.instance.handleURLCallback():

// e.g. from your app_links / go_router listener
if (uri.scheme == 'yourappscheme' && uri.host == 'safepay') {
  await Stripe.instance.handleURLCallback(uri.toString());
}

A full example (router-based, deep-link-package-based, and the FlutterDeepLinkingEnabled=false approach) is in example/lib/main.dart. See also Stripe.instance.handleURLCallback in the Dart API.

Stripe initialization

To initialize Stripe in your Flutter app, use the Stripe base class.

Stripe offers publishableKey, stripeAccountId, threeDSecureParams and merchantIdentifier. Only publishableKey is required.

Dart API

The library offers several methods to handle stripe related actions:

Future<PaymentMethod> createPaymentMethod(...);
Future<PaymentIntent> handleNextAction(...);
Future<PaymentIntent> confirmPayment(...);
Future<void> configure3dSecure(...);
Future<bool> isApplePaySupported();
Future<void> presentApplePay(...);
Future<void> confirmApplePayPayment(...);
Future<SetupIntent> confirmSetupIntent(...);
Future<PaymentIntent> retrievePaymentIntent(...);
Future<String> createTokenForCVCUpdate(...);

Future<void> initPaymentSheet(...);
Future<void> presentPaymentSheet(...);
Future<void> confirmPaymentSheetPayment()

The example app offers examples on how to use these methods.

Pay Plugin support

flutter_stripe fully supports the Pay plugin from the Google Pay team. By including a few lines you can integrate Stripe as a payment processor for Google / Apple Pay:

Future<void> onGooglePayResult(paymentResult) async {
    final response = await fetchPaymentIntentClientSecret();
    final clientSecret = response['clientSecret'];
    final token = paymentResult['paymentMethodData']['tokenizationData']['token'];
    final tokenJson = Map.castFrom(json.decode(token));

    final params = PaymentMethodParams.cardFromToken(
      token: tokenJson['id'],
    );
    // Confirm Google pay payment method
    await Stripe.instance.confirmPayment(
      clientSecret,
      params,
    );
}

Run the example app

  • Navigate to the example folder cd example
  • Install the dependencies
    • flutter pub get
  • Set up env vars for the flutter app and a local backend.
    • Get your test Stripe API keys
    • cp lib/.env.example.dart lib/.env.dart and set your Stripe publishable key.
    • cp server/.env.example server/.env and set the variable values in your newly created .env file.
  • Install the server dependencies in the server directory:
    • cd server
    • npm install or yarn --cwd "server"
  • Start the example
    • Terminal 1:
      • Move to the server directory: cd server
      • Run npm or yarn: npm start or yarn --cwd "server" start
    • Terminal 2:
      • Move to the lib directory: cd lib
      • Run flutter: flutter run
Additional steps for webhook forwarding

Contributing

You can help us make this project better, feel free to open an new issue or a pull request. Make sure to follow our contribution guidelines.

所屬分類

依賴

依賴清單 4 項

原始碼儲存庫

使用此套件的專案

暫無相關資料。