FlutterアプリでStripeを利用したGooglePay決済を実装する
FlutterアプリでStripeを利用したGooglePay決済を実装したため、手順をまとめておきます。
flutter_stripeを追加
まずはFlutterアプリにflutter_stripeを追加します。
こちらはStripeの公式ドキュメントでも紹介されているライブラリになります。
この記事の作成時の最新バージョンである 4.0.0 を使用しています。
また、GooglePay決済画面を表示する際に使用するpayも追加します。
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以上に設定しましょう。
android {
....
defaultConfig {
....
minSdkVersion 21 # ここを設定
....
}
....
}
次に、Androidの MainActivity が継承している FlutterActivity を、FlutterFragmentActivity に変更します。
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 ) がある場合は、そちらも修正が必要です。
<?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ボタンを表示可能です。
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を用意しましょう。
amount と currency は必須パラメータで、最低これだけで動作しますが、その他にも支払いを行った顧客情報を渡すなど色々できます。
詳しくはドキュメントを確認してください。
client_secret を取得したら、クライアント側に支払い完了後の処理を追加します。
client_secret は支払いの度に作成する必要があります。
決済処理の実装
GooglePayボタンを押した際に呼ばれる、startGooglePay() 関数の内容を追記します。
client_secret は、上記の方法でサーバー側で作成して取得した値を使用するものとします。
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