😺

FlutterアプリでStripeを利用したGooglePay決済を実装する

2022/08/31に公開約5,100字

FlutterアプリでStripeを利用したGooglePay決済を実装したため、手順をまとめておきます。

flutter_stripeを追加

まずはFlutterアプリにflutter_stripeを追加します。
こちらはStripeの公式ドキュメントでも紹介されているライブラリになります。
この記事の作成時の最新バージョンである 4.0.0 を使用しています。
また、GooglePay決済画面を表示する際に使用するpayも追加します。

pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  flutter_stripe: ^4.0.0 # ここを追加
  pay: ^1.0.10 # ここを追加

Android固有の設定

flutter_stripeの4.0.0は、Android 5.0 (API level 21)以上が対応しています。
そのため、minSdkVersion が21より低い場合は動作しません。
androidディレクトリ以下のアプリのbuild.gradleファイルで、minSdkVersion を21以上に設定しましょう。

build.gradle
android {
    ....
    defaultConfig {
        ....
        minSdkVersion 21 # ここを設定
        ....
    }
....
}

次に、Androidの MainActivity が継承している FlutterActivity を、FlutterFragmentActivity に変更します。

MainActivity.kt
import io.flutter.embedding.android.FlutterFragmentActivity

class MainActivity: FlutterFragmentActivity() {
}

最後に、Androidのstyleファイルを修正します。
styleファイルは android/app/main/res/values/style.xml となります。
ダークモード用のstyleファイル ( android/app/main/res/values-night/style.xml ) がある場合は、そちらも修正が必要です。

style.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
    <style name="NormalTheme" parent="Theme.MaterialComponents">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

GooglePayボタンの表示

main.dart を編集して、GooglePay決済ボタンを表示します。

main 関数で runApp(const MyApp()) を行う前に、Stripeパッケージの初期化を行います。
Stripe.publishableKey にはStripeの公開キーを設定してください。

あとは Widget内で GooglePayButton() を呼び出すことで、GooglePayボタンを表示可能です。

main.dart
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_stripe/flutter_stripe.dart';

void main() async { // async関数にする
  WidgetsFlutterBinding.ensureInitialized();

  Stripe.publishableKey = "pk_test_xxxx"; // Stripeの公開キーを設定
  await Stripe.instance.applySettings(); // Stripeの設定を反映

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Favor Stripe Example App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Favor Stripe Example App"),
        ),
        body: SizedBox(
          width: double.infinity,
          child: Column(
            children: [
              if (defaultTargetPlatform == TargetPlatform.android)
              SizedBox(
                height: 75,
                child: GooglePayButton( // GooglePayボタンを表示
                  onTap: () {
                    startGooglePay(); // ボタンタップで呼ばれる関数
                  },
                ),
              ),
            ],
          ),
        )
      ),
    );
  }

  Future<void> startGooglePay() async {
  }
}

ここまでで、GooglePayボタンが表示されます。

サーバー側でStripeのPaymentIntentを作成

実際に支払いを行うには、StripeのPaymentIntentを作成します。

PaymentIntent の作成はサーバー側で行います。
サーバー側で、StripeAPIの Create a PaymentIntent を呼びだして PaymentIntent を作成します。
クライアントから amount (金額) と currency (通貨) を送信して、 サーバー側で PaymentIntent を作成し、作成後に取得できる client_secret をクライアント側に返すようなAPIを用意しましょう。

amountcurrency は必須パラメータで、最低これだけで動作しますが、その他にも支払いを行った顧客情報を渡すなど色々できます。
詳しくはドキュメントを確認してください。

client_secret を取得したら、クライアント側に支払い完了後の処理を追加します。
client_secret は支払いの度に作成する必要があります。

決済処理の実装

GooglePayボタンを押した際に呼ばれる、startGooglePay() 関数の内容を追記します。
client_secret は、上記の方法でサーバー側で作成して取得した値を使用するものとします。

main.dart
  Future<void> startGooglePay() async {
    final googlePaySupported = await Stripe.instance.isGooglePaySupported(const IsGooglePaySupportedParams());
    if (googlePaySupported) {

      // サーバー側で作成したclient_secretを指定
      String clientSecret = "pi_xxxx_secret_xxxx";

      // GooglePay設定
      await Stripe.instance.initGooglePay(
          const GooglePayInitParams(
              testEnv: true,  // テスト支払い実行
              merchantName: "表示する商品名",
              countryCode: 'jp'
          )
      );

      // GooglePay画面を表示して決済実行まで待機
      await Stripe.instance.presentGooglePay(
        PresentGooglePayParams(clientSecret: clientSecret),
      );
    }
  }
}

ここまで実装して、GooglePayボタンを押すと、下記のように決済のダイアログが表示されます。

支払いを実行後、Stripeの管理画面を確認すると決済が成功していることがわかります。

以上で基本的な決済の流れは完了です。
エラー処理などは適切に追加しましょう。

Discussion

ログインするとコメントできます