#はじめに
釣りみたいなタイトルですが、お付き合いください😋
みなさま、仮説検証していますか?
ユーザー中心な、プロダクト開発していますか?
最近流行りの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すごい!🎉
(単一商品、デザイン性無し、エラー処理皆無ですがw)