【Flutter】Flutter for WEB でサブスクリプションをStripe決済できるようにする

はじめに

ハッチアウトスクールの公式WEBをFlutter for WEBで開発しているのですが、運営しているFlutterプログラミングスクールの月額をWEB内でStripe決済できるようにしたので、その方法を紹介します。

ハッチアウトスクール

今回難しいと思われる点は2つです。

Flutterでのモバイルアプリ開発でStripe決済を導入する場合はWebViewを使用しますが、Flutter for WEBではWebViewが使えない、というよりもともとがWebViewなのでどのように記述するのか。

Stripeの決済メソッドはJavaScriptで用意されているので、DartでJavaScriptを呼び出す必要がある。

この2点を解決して、StripeをFlutter for WEBに導入します。

事前準備

Stripeアカウント作成済であること。
Flutter for WEBの環境構築が完了していること。

※環境構築についての記事も公開しているので、未完了の方はそちらを参考に進めてください。

Stripeの設定を行う