学べることBubbleではStripeというツールを利用することで簡単にクレジットカードでの決済機能を実装することができます。ここではショッピングで使われるような単発購入決済の機能、月額でサービスを提供するためのサブスク決済の機能に関して実装方法を解説します。サブスク決済に関しては長くなるため別記事で紹介します。１）Stripeアカウントの作成Stripeのアカウントがない場合は、下記にアクセスしてアカウントを作成してください。Stripeの新規登録ページhttps://dashboard.stripe.com/registerアカウントの作成方法は下記の動画が参考になるかと思います。運転免許証や口座番号まで動画で出してしまっているのは個人情報の観点から大丈夫か心配ですが分かりやすくはあります。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FIFmRktwsZt4%3Fsi%3DT6IzfNyVCJNtUUAp%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3E２）プラグインの設定プラグインのインストール様々なStripeのプラグインがありますが、Bubble公式が出しているプラグインが最もベーシックで必要な機能を備えていますのでこちらインストールします。Checkout versionの設定インストールが完了したら、Stripe Checkout versionがv2になっているのでv3に変更してください。v2が古いバージョンなので推奨とされているv3に設定しておいた方が無難なためです。開発用の公開可能キー、シークレットキー設定本番用と開発用に公開可能キー、シークレットキーが設定できるようになっています。テストや実装をする際には、開発用のキーを設定することで実際の決済がされることなくStripeの機能を検証できます。では、Stripeのダッシュボード（https://dashboard.stripe.com/dashboard）を表示してください。右上の「テスト環境」となっているスイッチをONにしてください。赤枠で囲まれている「公開可能キー」と「シークレットキー」をコピーしてStripeプラグインの以下の部分に設定してください。Secret Key - development シークレットキーPublishable Key - development 公開可能キー３）単発決済の実装方法前提：ログイン後のユーザーが対象おそらく問題ないと思いますが、前提としてログイン後のユーザーに決済情報が紐づくようになるため、ログイン後のユーザーに対して決済処理を行ってください。そうしないとエラーになります。たまに開発中にログインしてなくて決済できないエラーが出ることもあるのでご注意ください。画面の作成最小限の構成にするので商品名、価格、数量と購入ボタンのみの構成にします。商品というテーブルを作りデータを1件だけ入れます。ワークフローの作成購入するボタンに対してワークフロー（決済処理）を実装します。「Charge the current user」を選択し、以下のようにそれぞれ設定します。ポイントとしては、合計金額（Amount）の部分には商品の価格と数量をかけたものを設定できるようにしております。Static imageには決済時に表示する画像を選択してください。今回はありませんが商品画像などが適切かと思います。上記以外の箇所についてはデフォルトのまま変更はしていません。４）本番公開時の注意点本番公開時には、Stripeのダッシュボード（https://dashboard.stripe.com/dashboard）を表示して、本番用の公開可能キー、シークレットキーを取得して、プラグインの設定画面から以下となるように入力してください。Live Secret Key シークレットキーLive Publishable Key 公開可能キーおわりに：決済完了と今回の成果物のイメージ今回実装した処理について動画でどのようになるのか確認してみましょう。問題なく実装できていれば下記のような挙動になります。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2F_YN2kj0pkFo%3Fsi%3DUmeD7-_jCJYYWtRT%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3Eちなみにテスト環境で決済を行う際には、こちらのカード情報が使えるので参考にして入力してみてください。私はカード番号「4242424242424242」のVISAで大体決済テストをしています。無事決済までが完了していれば「取引」の画面に「成功」の文字が表示されます。決済まで完了していなくても購入ボタンが押されたものは取引の中に「未完了」として残ります。