はじめに

釣りみたいなタイトルですが、お付き合いください😋

みなさま、仮説検証していますか？
ユーザー中心な、プロダクト開発していますか？
最近流行りのNoCodeツール Bubble を使い倒せば、仮説検証用のプロダクトが数時間で作れますYO。

ということで、本日は
Facebook認証ユーザーで、Stripe決済する
というシナリオのプロダクトを10分で開発してみようと思います。

1. Stripe決済

1-1. 購入ページ作成

Bubbleの新規アプリケーションを作成

320x480サイズ決め打ち、商品画像、購入ボタンを配置

1-2. Stripe 設定

事前にStripeアカウントを作成
https://dashboard.stripe.com/register

開発者用のダッシュボードから、公開キーとシークレットキーを取得

次に、Bubble側
Stripeプラグインを追加

公開キーとシークレットキーを設定
※ Live用とDevelopment用どちらも設定

1-3. Stripe 購入ワークフロー設定

購入するボタン add action->Payment->Change the current user

Payer email（購入者メールアドレス）= Current User's email
Ammount(費用)= 10000
Currency(通過)= JPY
Description(説明)= Z1 CPU Mac
Button caption(ボタンのキャプション)= 購入する

1-4. 簡易動作確認

購入書用テストデータを作成「Run as -> 」をクリック
※ 指定したユーザーデータを利用して、プレビューモードでデバッグが出来ます

無事、先程作ったページが表示！！
購入ボタンをタップし、Stripeのクレジットカード決済ダイアログが表示！
テスト購入用情報を入力して、購入するボタンをタップすると・・・・

無事成功！！

2.Facebook認証

2-1. 認証ページ作成

購入ページに倣って、認証用ページ作成

引き続き、facebook用プラグインの設定

※ App ID, App シークレットは後述のFacebookアプリ設定完了後に設定する

2-2. Facebookアプリ設定

https://developers.facebook.com/apps/
Facebook Developersで、新規アプリを登録
App ID と App シークレットを取得

ログイン用 OAuthリダイレクトURI設定(bubble facebookプラグイン設定参照)

2-3. 認証ワークフロー設定

facebook認証ボタン add action->Account->Singup/login with a socal network
-> PAuth provider=Facebook

次に遷移先を指定
Signup/login with Facebook-> add action -> Navigation ->Go to page
-> Destination= index
-> Data to send= Current User's Facebook'sEmail
-> Only when= Current User's Facebook'sEmail is not empty

2-4. 動作確認

ここまで完了したら、Bubble上に構築したプロダクトをLiveモードでデプロイしましょう！
※ FacebookのOAuth用コールバックURLが動作しなければいけないので、ここで一度Liveにデプロイする必要があります。
デプロイが完了したら、認証ページ(/auth)にアクセスし、facebook認証ボタンをタップ！

facebook認証ページが表示されました！
ログインボタンをタップすると・・・

購入ページにリダイレクトされました！
続いて、購入ボタンをタップしてみると・・・

無事にFacebookユーザーのメールアドレスで購入完了しました！！ 👏

まとめ

「Facebook認証ユーザーで、Stripe決済する」 プロダクトを短時間で作ることが出来ました、Bubbleすごい！🎉
（単一商品、デザイン性無し、エラー処理皆無ですがｗ）