8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

LIFULLその2Advent Calendar 2020

Day 18

爆速で仮説検証を回すためにNoCode Bubbleを使い、10分でStripe決済プロダクトを作る

Last updated at Posted at 2020-12-20

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

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

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

1. Stripe決済

1-1. 購入ページ 作成

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

ss-01-app.png

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

ss-02-index.png

1-2. Stripe 設定

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

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

ss-21-plugin-stripe-setting0.png

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

ss-22-plugin-stripe-setting0.png

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

ss-22-plugin-stripe-setting1.png

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

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

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

1-4. 簡易動作確認

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

ss-40-test-buy.png

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

ss-41-test-buy.png
ss-42-test-buy.png
ss-43-test-buy.png

無事成功!!

2.Facebook認証

2-1. 認証ページ 作成

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

ss-50-fb-auth.png

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

ss-50-fb-plugin1.png
ss-50-fb-plugin2.png

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

2-2. Facebookアプリ 設定

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

ss-61-fb1.png

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

ss-61-fb2.png

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

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

ss-62-fb-wf1.png
ss-62-fb-wf2.png

次に遷移先を指定
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

ss-62-fb-wf3.png
ss-62-fb-wf4.png

2-4. 動作確認

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

ss-70-1.png

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

ss-70-2.png

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

ss-41-test-buy.png
ss-70-4.png
ss-70-3.png

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

まとめ

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

8
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?