関連のツールの紹介、使い方などをやさしく説明しています。Linksは、Stripeが提供している決済機能の実装方法の中でも特に実装が簡単な方法です。その方法を用いて、Bubbleで作るオンラインショップにStripe決済機能を実装するというのが今回の記事のテーマになります。Connectorを使った実装方法は難しくて挫折してしまった今回は初心者の方向けにページやエレメントの設定についても詳しくご紹介しています。Bubbleにあまり自信がない方もぜひ一緒に挑戦してみてくださいね!また、本記事の最後では、本ブログで公開しているStripeに関する記事をご紹介しています。Stripeについて詳しく知りたい方は合わせてご参考にしてみてください。動作確認まとめ【参考】Stripeに関するノーコードラボの記事Stripeとはグローバルに事業を展開しているアメリカ本社のオンライン決済サービスです。クレジットカードはさることながら、銀行や金融機関、電子マネーなど様々な決済手段に対応している点が最大の魅力です。Bubble純正のプラグインもあり、Bubbleに決済機能を実装させたい場合Stripeが第一選択肢となります。決済手数料は3.6%となっています(2022/10/24時点)。今回の記事では、以下を目標とします。Linksを使ってクレジット決済機能を実装するBubbleでStripe決済機能を実装する方法BubbleでStripe決済機能を実装する方法は大きく4通り存在します。Link)」を使って連携します。4つの実装方法の中では実装難易度が最も低い方法です。APIで決済ページを呼び出します。決済の他、請求書やサブスクリプションなどに関するActionも実装できます。APIで決済ページを呼び出します。Connectorでも実装可能)。したドキュメントがないため初心者いはレベルが高いプラグインとなっています。APIを呼び出し決済処理を実行する方法です。4つの中では最も実装難易度が高い方法ですがその分できることは増えます。IDから決済状況を取得することができます。Linksを使う方法で決済機能を実装していきます。Linksを使って決済機能を実装するそれでは、決済機能を実装していきましょう!事前準備まずは、BubbleとStripeで以下の事前準備を完了してください。Bubbleの事前準備アカウント登録し、Freeプランで新規アプリを作成します。以下のリンクからStripeのアカウント登録を行います。今回はテスト環境での機能実装方法の確認までを行うので、本番環境の利用申請は不要です。商品登録それでは、Stripeの設定から始めます。Stripeで商品登録を行います。Stripeにログインしてダッシュボードを開き、画面上部のタブの「商品」を押下します。商品ページを開いたら、「商品を追加」ボタンを押下して商品詳細の登録ページを開きます。今回はマグカップのネットショップを作成します。テスト用データとしてマグカップのデータを3つ作成します。商品データは以下を参考に登録してください。データを入力したら、画面右上の「商品を保存」ボタンを押下して商品データを登録します。これで商品登録は完了です。同様に残り2つのデータも作成します。Linkを発行します。Link(支払いリンク)を作成する画面が開きます。支払いページタブ、確認ページタブで以下を参考に設定してください。基本的にはデフォルトの設定のままでリンクを作成します。画面右側にユーザーに表示される画面が表示されるので合わせて確認します。youページを設定しますが、現時点ではまだページが存在しないので「確認ページを表示する」を選択したままにしておきます。内容を確認したら画面右上の「リンクを作成」ボタンを押下します。Linkが作成されました。リンク横の「コピー」を押下してリンクをコピーします。Linkを作成します。Linkは、「支払い」タブ>「支払いのリンク」タブまたは「商品」タブ>「商品」を押下>詳細ページから確認できますよ。ここでひとまずStripeでの設定は終了です。続きまして、Bubbleでアプリを作っていきます。商品データを準備しましょう。事前準備で作成したアプリのDataタブを開き、「Item」という名前で新規Typeを作成します。Fieldには、Description(商品概要)、Image(商品画像)、Name(商品名)、PaymentLink(支払いリンク)、Price(価格)を作成します。作成したItmeデータベースに商品データを登録します。EntryからStripeで登録したのと同じ商品データを登録します。Fieldに保存しましょう。次に、商品の一覧を表示するページを作成します。BubbleのEditor画面左上から新規でページを作成します。今回は「stripe_list」というページ名を設定しました。ページ自体の設定は以下を参考に設定してください。今回はページサイズは320pxで設定します。layoutはcolumnに設定します。次にページの上部にアイキャッチを設定します。Align-to-Parent」を押下してGroup化します。Imageエレメントにお好きなアイキャッチ画像を設定します。setを作成して画像を保存し、それを表示するかたちとしました。Textエレメントにはオンラインショップの見出しとして「Mugs」と入力します。Groupで作成します。Groupを配置したら、以下を参考にAppearanceとLayoutを設定してください。Groupで水平方向に最大3件表示できるレイアウトにするためです。Groupの先頭のセル内にImageエレメントを配置します。AppearanceとLayoutは以下を参考に設定してください。これで商品リストページは完成です。全体を見ると以下のようになっています。Previewで表示してみましょう。次に、リストの商品を押下して商品詳細を表示するポップアップを作成していきます。ページ上にPopupエレメントを配置し、AppearanceとLayoutを以下を参考に設定してください。sourceは、Workflowで渡されるデータを指定するので空欄のままにしておきます。Popupエレメントの設定ができたら、Popup上に商品情報を表示するのに必要なエレメントを配置していきます。ボタンとポップアップを閉じるアイコンを表示しますので、すべてをPopupエレメント上に配置します。container」でカラム表示グループ化します。Groupエレメントの詳細設定は以下を参考に行ってください。Icon」をインストールします。container」でグループ化します。することで、画像の下部に金額を被らせて表示することができます。完成形はこのような形になります。各エレメントは以下を参考に設定してください。これでポップアップも作成できましたね!商品一覧ページ3商品詳細ポップアップ表示Workflowの設定それでは、商品リストの商品を押下して詳細ポップアップを表示するWorkflowを設定します。workflow」から新規Workflowを作成します。Item(商品詳細ポップアップ)を設定します。Itemを設定します。次に、商品詳細ポップアップの「購入する」ボタン押下からStripe決済ページへの遷移のWorkflowを作成します。workflow」から新規Workflowを作成します。PaymentLinkを設定します。youページを作成します。page」から新規ページを作成します。商品一覧ページのクローンで作成しましょう。新規作成したページのDesignタブが開いたら、アイキャッチの部分以外のエレメントを削除します。このページでは、お礼メッセージとトップページへ戻るボタンを表示します。Textエレメントを2つ配置し、それぞれ以下を参考に設定します。次にButtonエレメントを配置して、以下を参考に設定します。設定完了後のページはこのようになります。完成しましたので、Previewで確認してみます。次に、「トップページへ」ボタンを押下して戻るWorkflowを設定します。workflow」から新規Workflowを作成します。page...を選択し、Destinationに商品一覧ページを設定します。youページに変更しましょう。Stripeのダッシュボードを開き、画面上部のタブ「支払い」を押下して開いた画面の左側ナビゲーションメニューの「支払いのリンク」を押下します。Linkの編集画面を開きます。Linkの編集画面で「確認ページ」設定タブを開き、「確認ページを表示しない」を選択します。youページのURLを入力します。入力したら、画面右上の「リンクを更新する」ボタンを押下して更新完了です。youページの設定をしたらStripeの設定は全て完了です。動作確認BubbleとStripeでの設定が完了しましたので、一連の動作が問題なく完了するか確認してみます。Previewで商品一覧ページを開き、お好きな商品を押下します。Popupが開き、選択した商品の情報が表示されますか?ポップアップの「購入する」ボタンを押下します。Sripeの決済ページが表示されますか?表示されたらテスト用の情報を入力します。4242」を使用してください。使用期限、CVCは適当な値で問題ありません。入力したら「支払う」ボタンを押下します。youページが表示されますか?決済が完了しているかStripeでも確認してみましょう。Stripeのダッシュボードを開き、画面上部から「支払い」タブを開き、画面左側のナビゲーションメニューから「すべての支払い」を選択します。Linksを使ってBubbleで決済機能を実装する方法をご紹介しました。Linksは何より実装が簡単なのがメリットですが、一方で商品ごとにリンクを作成しなければならないというデメリットがあります。個別指導などを行っています。)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。