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

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

みなさま、仮説検証していますか？
ユーザー中心な、プロダクト開発していますか？
最近流行りのNoCodeツール **Bubble** を使い倒せば、仮説検証用のプロダクトが数時間で作れますYO。

ということで、本日は
**Facebook認証ユーザーで、Stripe決済する**
というシナリオのプロダクトを10分で開発してみようと思います。

## 1. Stripe決済

### 1-1. 購入ページ 作成
Bubbleの新規アプリケーションを作成

| ![ss-01-app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/f70c397f-c877-470c-13b7-f55db4cb7ec5.png)|
|:--|


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

| ![ss-02-index.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/9398c601-fdea-aaf0-0748-cf776206c81d.png)|
|:--|


### 1-2. Stripe 設定
事前にStripeアカウントを作成
https://dashboard.stripe.com/register

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

| ![ss-21-plugin-stripe-setting0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/5f671d93-9f8f-1d89-b110-5251b0a06d12.png)|
|:--|

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

| ![ss-22-plugin-stripe-setting0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/7b0fca74-ae81-b739-bea9-1f0532df2f93.png)|
|:--|

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

| ![ss-22-plugin-stripe-setting1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/9738c537-e813-dc9e-708e-99506a0d2cae.png)|
|:--|

### 1-3. Stripe 購入ワークフロー設定
購入するボタン add action->Payment->Change the current user

| ![ss-30-stripe-wf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/b24b5b25-92bc-0838-b993-1d687ba39886.png)|
|:--|
| ![ss-31-stripe-wf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/d12d0f4a-3dd1-70cf-7c6a-c6b8c7f2c15d.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/27aea1a7-6f69-ac5e-affd-55b61053d88d.png)|
|:--|

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

|![ss-41-test-buy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/098dcc28-0c8c-5d5a-ae06-05744765724e.png)|
|:--|
|![ss-42-test-buy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/b3bd1d13-858c-56e2-abfa-a768ddf6aa3f.png)|
|![ss-43-test-buy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/042bc106-deef-1e3c-2c4f-229d4e1e42b6.png)|

**無事成功！！**



## 2.Facebook認証

### 2-1. 認証ページ 作成
購入ページに倣って、認証用ページ作成

|![ss-50-fb-auth.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/0144261f-41c9-03c6-8c5d-a0f0161c8eb5.png)|
|:--|

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

|![ss-50-fb-plugin1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/c71717af-5e87-6e9e-2e3c-5040d58c2da0.png)|
|:--|
|![ss-50-fb-plugin2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/78428125-d4c7-0707-93da-db5fafd23654.png)|

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

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

|![ss-61-fb1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/10659f07-7674-c8fc-5213-10dcb61818de.png)|
|:--|

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

|![ss-61-fb2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/60d8e39f-a967-10e1-3d90-c9213ce8508a.png)|
|:--|

### 2-3. 認証ワークフロー 設定
facebook認証ボタン add action->Account->Singup/login with a socal network
-> PAuth provider=Facebook

|![ss-62-fb-wf1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/a93cf72e-5da9-8923-03c7-17b11b8844f4.png)|
|:--|
|![ss-62-fb-wf2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/e6f45343-73f5-08a9-a7f8-405185f031b0.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/9e864884-b95e-0e4f-3e94-f82249316251.png)|
|:--|
|![ss-62-fb-wf4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/415134c7-8a07-24a4-3ec7-b0f5db0828c0.png)|


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

|![ss-70-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/62615ab5-1065-31fe-d4e8-decbd3e97a15.png)|
|:--|

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

|![ss-70-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/ca8bcf75-e0b3-83ed-f2fb-ec690123448a.png)|
|:--|

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

|![ss-41-test-buy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/098dcc28-0c8c-5d5a-ae06-05744765724e.png)|
|:--|
|![ss-70-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/586fb8ee-78e3-2735-5ac1-a70dd62e437c.png)|
|![ss-70-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546685/223041d3-5bbe-1067-b444-bd265c710542.png)|

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


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