①下図プラグインをインストール
②Designタブ→Visual Elements→QR generatorを選択＆設置
③Contentsにて表示させたいテキストを設定
（Date typeなどから選択することも可能）
※日本語は文字化けする
Bubble：Inputのバリデーションチェックについて
前提
Inputは、Content Formatにて何を設定するかにより、様々なバリデーションチェックが働く。条件を満たさないデータを登録しようとしても、Inputの枠が赤く表示されてデータを登録することができない。
ただし、チェックがなされるには、下記２点を満たしている必要がある。
①登録するFieldに紐づけられている
②This input shuld not be emptyにチェックしている
②を満たしていない状態で実装すると、条件を満たさないデータが入力された場合、当該Fieldが空の状態で登録されるので注意が必要。
ただし、Sign the user upの場合は、EmailとPasswordがデフォルトで必須になっており、Inputと紐づけしない状態で実装しようとすると、「アドレス／パスワードを入力してください。」というメッセージが表示される。また、Inputと紐づけした上でThis input shuld not be emptyが未チェックの状態でも同メッセージが表示される。
Content Format毎のバリデーション
●Text: 文字、または数字の列（最大値の設定が可能）
●Email: メールアドレス（@が含まれるかどうか）
●Password: 文字列（パスワードポリシーに合致しているかどうか）
●Integer: 整数（最大値と最小値の設定が可能）
●Decimal: 小数（最大値と最小値の設定が可能）
●Address: 住所（googlemapによって、住所が有効かどうか自動判定されます）
●US Phone: 次のようなアメリカ式の番号表示かどうか (xxx) yyy-zzzz.
●Percentage: パーセント（最大値と最小値の設定が可能）
●Currency: 通貨（最大値と最小値の設定が可能）
●Date: 日付。mm/dd/yyyy
●Date_2: 日付。dd.mm.yyyy.
（日付の入力には、Date/TimePickerが便利）
●Text (numbers only): 文字列（数字のみ／最大値の設定が可能）
Bubble：ハンバーガーメニュー
Toggleで簡単に
１．デザインを作成
①Iconを設置
②GroupFocus（メニュー）を設置
③GroupFocusのReference elementに①のIconを指定
※メニュー表示時もIconが見えている必要があるので、
GroupFocusだと、設置が楽。
２．ワークフローを設定
これで、完了。
Iconクリックでメニューが表示・非表示を繰り返す。
Animateでディテールにこだわる
１．デザインを作成
①ハンバーガーIconを設置
②FloatingGroup等（メニュー）を設置
③閉じるIconを設置
２．ワークフローを設定
ハンバーガーIconクリック時
①ハンバーガーIconクリックをきっかけに設定
②Animateを選択
③Elementにて、１．②で設置したメニューを選択
④Animationにて、表示させる動きを選択
閉じるIconクリック時
①閉じるIconクリックをきっかけに設定
②Animateを選択
③Elementにて、１．②で設置したメニューを選択
④Animationにて、非表示させる動きを選択
Bubble：Bubbleのアプリを誰かにプレゼントする
この機能は受託開発するときなどに利用可能。開発は自分のアカウントで行い、作業が終了したら顧客のアカウントに Transfer して納品する。
また、工程を何人かで分業するときなどにも利用できる。
贈る前にアプリをコピー
アプリを Transfer してしまうとそのアプリを触れなくなってしまう。その為、必ずアプリをコピーして、コピーしたものを相手に渡すこと。
①Apps画面にてプレゼントしたいアプリを選択
※アイコンやアプリ名をクリックするとエディタが開いてしまうので、
その他のエリアをクリックする
②Dupicate appをクリック
③複製の名前を設定してCopyをクリック
※Copy the application database contentにチェックを入れると、
データベースの中身、プラグインのAPI Key やトークンなどの設定も
コピーされる。原則、重要な情報は削除しておくこと。
アプリを転送
①前章の手順で複製アプリのエディタが開く
②設定画面からTransferをクリック
※Inbite a user(email)＝送付先は、 Bubbleに登録している
メールアドレスである必要がある。
間違いが無いよう十分注意する。
③CONFIRMをクリック
Bubble：数字にカンマを入れて表示する
Inputの場合
①Content formatにて、integerを選択
②Show thousands separaterにチェック
Data typeの値を表示する場合
①表示したいデータを設定後、:formatted asを選択
②Thousand separatorにて「,」を選択
プレビューするとカンマが入る
Bubble：決済（Stripe Connect／テスト環境）
- Stripe Connectとは
- Connectの設定
- 売り手にStripeアカウント作成を促し、プラットフォームと連携
- 取引収益の一部を手数料としてルーティング
- プラットフォームから売り手にお金を転送する
Stripe Connectとは
Connectは、決済においてプラットフォームと顧客、および売り手の間で支払いをルーティングできるサービスである。ルーティングとは、ネットワーク上でデータを送信する際に、宛先IPアドレスをもとに最適な経路を選択してデータを送信すること。
自分が売り手である場合は、Stripe の導入で対応可能だが、取引に置いて複数の登場人物がいる場合（例えば、楽天やAmazon といったマーケットプレイス）では、プラットフォーム（＝楽天、Amazonなど）、顧客（=商品購入者）、売り手（=ショップ）の間で、支払いをルーティング（請求して支払いを受け転送）する必要がある。そこで登場するのが、Stripe Connect 。
Connect は、ライドシェアリングサービスやトラベルサイト、ストアビルダーのプラットフォーム、他にも複数のフィットネスクラブなどの月額料金をまとめて請求する会員制プラットフォームといった様々なビジネスで利用することができる。
下の記事も参考に。
尚、本記事にて Stripe Connect の使い方を記述する前提として、自身のStripeアカウントは既に作成済みであること、またBubble でのStripe プラグインも導入済みとする。 Stripe についてや、Stripe アカウントの作成、Bubble プラグインの導入方法については、下の記事を参考に。
Connectの設定
Stripe 側の設定
①Stripe のダッシュボードの「Connect」から「始める」をクリック。
②質問に答える。
⑦https://bubble.io/poststripeauthと入力
Buggle 側の設定
①コピーしたクライアントIDを張り付ける
②Chekout Versionをv2にする
※v3で実装すると、Stripe側で売り手のビジネス名が未登録
であることを理由にエラーが発生する。
その為、売り手のビジネス名を登録する方法があれば、
Stripe推奨のv3で実装することが望ましいと思われる。
売り手にStripeアカウント作成を促し、プラットフォームと連携
１．デザインを作成
２．Data Type:UserにFieldを追加
３．テスト用データを作成
４．ワークフローを設定
①Stripeに売り手を登録するフローを設定
②（動作確認用の為、本手順は実用には必要無し）
リダイレクトで返却された売り手のStripe接続アカウントのIDを
①で作成したthingに追加
５．テスト
① Data タブの「Run as →」からプレビューを起動
②登録ボタンをクリック
⇒Stripeの画面に遷移する
③「開発モード」と表示されることを確認
④自分の Stripeアカウントでログインしている状態の場合は、
「ユーザの切り替え」ボタンをクリック
⑤「このフォームをスキップ」をクリック
⇒Bubble画面に遷移する
（実際はスキップせずに諸設定を行う）
⑥Data Type:Userに売り手のStripe IDが
登録されていることを確認
⑦Stripe側で売り手のアカウントが連携されていることを確認
取引収益の一部を手数料としてルーティング
１．Data Typeの設定
２．デザインを作成
①請求画面
②支払い画面
３．ワークフローを設定
①請求画面
②支払い画面
４．テスト
【請求画面】
①Stripeアカウント作成済みの売り手のアカウントで「Run as →」
②乗客と金額を設定して「請求登録」をクリック
【支払い画面】
③ ②で設定した乗客のアカウントで「Run as →」
④金額が表示されていることを確認し「支払い」をクリック
⑤Stripe側で取引を確認
※当該データをクリックすると詳細画面に遷移する
プラットフォームから売り手にお金を転送する
Bubble のアプリを使って、自分のStripe 残高から売り手にTransfer（転送）する方法。Transfer には手数料が掛からない為、イレギュラーな返金やキャンペーンなどで利用できる。
１．テスト用クレジットカードで残高登録
Connect では、アカウントの残高（ドキュメント上での Balance）の状態が大切である。残高がない場合は、テストでも支払いを転送したりすることはできない為、まずは準備として残高登録が必要。
①デザインを作成
②「残高登録」ボタンにワークフローを設定
③Data タブの「Run as →」からプレビュー
④「残高登録」をクリック
⑤カード情報を入力し決済
※よく使われるカード番号（4242）では、
残高に直接追加されないため、「利用可能」
となるまで時間がかかってしまう。そのため、
直接残高に追加されるようカード番号
「4000 0000 0000 0077」を使用する。
詳しくはこちらを参考にdocs.stripe.com
⑥Stripe側で残高が追加されたことを確認
⑦Stripe側で顧客が追加されたことを確認
２．デザインを作成
３．ワークフローを作成
※参考にした記事には、
既存の請求と紐づけたい場合は、Source Charge IDに
当該請求の支払いID（本記事ではField名:harge IDとして
Data typeに保存済み）を設定する。
とあるが、「そのようなチャージはありません」として
エラーになる。
４．テスト
① １．にて、Stripeに残高を登録済みのアカウントで「Run as →」
②Stripeに売り手として登録済みのアカウントを選択
③金額を入力して「転送」をクリック
④Stripe側で送金を確認（プラットフォームのアカウント）
（当該データをクリックで詳細画面へ遷移する）
④Stripe側で入金を確認（売り手のアカウント）
（当該データをクリックで詳細画面へ遷移する）
本記事作成にあたって参考にした記事はこちら
