Zenn
🐡

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

2022/08/31に公開
Flutter
Stripe
Apple Pay
tech

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

flutter_stripeを追加

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

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

iOS固有の設定

flutter_stripeの4.0.0は、iOS12以上が対応しています。
Podfileを編集して、platformが12以上になるようにしましょう。

Podfile
# Uncomment this line to define a global platform for your project
platform :ios, '13.0'

次にXcodeからMarchantIdを設定します。
MarchantIdはAppleDeveloperのサイトで作成します。
こちらなどを参考に事前に用意してください。

Xcodeの Signings & Capabilities から、ApplePayで使用するMarchantIdを設定します。

ApplePayボタンの表示

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

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

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

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の公開キーを設定
  Stripe.merchantIdentifier = 'merchant.hogehoge'; // MarchantIdを設定
  await Stripe.instance.applySettings(); // Stripeの設定を反映

  runApp(const MyApp());
}

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

  @override
  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.iOS)
              Padding(
                padding: const EdgeInsets.all(8),
                child: ApplePayButton( // ApplePayボタンを表示
                  onPressed: startApplePay, // ボタンタップで呼ばれる関数
                ),
              ),
            ],
          ),
        )
      ),
    );
  }

  Future<void> startApplePay() async {
  }
}

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

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

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

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

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

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

決済処理の実装

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

main.dart
Future<void> startApplePay() async {
  // サーバー側で作成したclient_secretを指定
  String clientSecret = "pi_xxxx_secret_xxxx";

  // ApplePay設定
  await Stripe.instance.presentApplePay(
    const ApplePayPresentParams(
      cartItems: [
        ApplePayCartSummaryItem.immediate(
          label: '表示する商品名',
          amount: '500',
        ),
      ],
      country: 'jp',
      currency: 'JPY',
    ),
  );

  // 支払いを実行（支払い完了でApplePayダイアログが閉じる）
  await Stripe.instance.confirmApplePayPayment(clientSecret);
}

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

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

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

Discussion