Flutterラボの

プレミアム会員になる

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

2020.12.07

はじめに

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

ハッチアウトスクール ハッチアウトスクールの公式サイトです hatchout.net

画像2

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

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

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

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

事前準備

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

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

Stripeの設定を行う

Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ Nuxtラボ:https://flutterlabo.tech/nuxt