【上級者向け】BubbleからStripe CheckoutをAPIで実行する

準備

APIを使用するため、Bubbleは有料プランが必須です（料金の詳細はこちらをご覧ください：Bubbleの料金は？）

Bubble（https://bubble.io）

Stripeはアカウント登録から本記事で解説します。

方法

１．【Stripe】ユーザー登録

STEP.1

Stripe（https://stripe.com/jp）にアクセスし、画面右上「サインイン」をクリックします。

STEP.2

「ユーザ登録」をクリックします。

STEP.3

各項目を入力し「アカウントを作成」をクリックします。

STEP.4

アカウントが作成されます。登録アドレスに送信された確認リンクをクリックします。

STEP.5

本番環境を利用するにはビジネス情報を追加します。本記事ではテスト環境のみを使用します。

STEP.6

画面右上、歯車のマークをクリックします。

STEP.7

「アカウント詳細」をクリック、任意のアカウント名を入力し「保存」をクリックします。

２．【Stripe】商品の追加

STEP.1

商品タブの画面右上「＋商品を追加」をクリックします。

STEP.2

テスト商品の情報を入力します。価格は「一括」に設定してください。

STEP.3

「商品の保存」をクリックします。

３．【Bubble】APIの設定

下記手順は、Stripe APIの公式ドキュメント（https://stripe.com/docs/api）を参考に作成しています。

STEP.1

"API Connector"プラグインをインストールします。

STEP.2

"Add another API"をクリックし、APIを新規作成します。

STEP.3

各項目を以下の通り設定します。

API Name: 任意の名称を入力
Authentication: “Private key in header”を選択
Key name: Authorization
Development key value: “Bearer”＋” “（半角スペース）＋”テスト環境のシークレットキー “を入力

（テスト環境のシークレットキーはこちらで確認できます。）

STEP.4

"expand"をクリックして詳細を表示します。

STEP.5

各項目を以下の通り設定します。

Name: 任意の名称を入力
Use as: “Action”を選択
Data type: “json”を選択
Method: “POST”を選択
URL: “https://api.stripe.com/v1/checkout/sessions”を指定
Headers – Key: “content-type”を指定
Headers – Value: “application/x-www-form-urlencoded”を指定
Parameters – Key1: “cancel_url”を指定
Parameters – Value1: 購入がキャンセルされた時のリダイレクト先URLを指定
Parameters – Key2: “success_url”を指定
Parameters – Value2: 購入が成功した時のリダイレクト先URLを指定
Parameters – Key3: “mode”を指定
Parameters – Value3: “payment”を指定
Parameters – Key4: “line_items[0][price]”を指定
Parameters – Value4: 先ほど追加した商品の料金IDを指定
Parameters – Key5: “line_items[0][quantity]”を指定
Parameters – Value5: “1”を指定

（各商品の料金IDはこちらで確認できます）

STEP.6

"Initialize call"をクリックします。

４．【Bubble】ワークフローの設定

STEP.1

Bubbleエディタにアクセスし、"Stripe Checkout"ボタンを配置します。

STEP.2

ボタンをクリックした時のワークフローを作成します。

STEP.3

Pluginsアクションから先ほど作成したAPIを指定します。

（購入成功ページには簡単なテキストメッセージを配置しました）

STEP.4

Navigation > Open an external websiteアクションを追加します。

STEP.5

Stripe Checkoutの"url"を指定します。

これですべての設定が完了しました。

実際に動かしてみる

Bubbleのプレビュー画面を開き、”Stripe Checkout”ボタンをクリックします。

Checkout画面に自動で遷移します。

テストカード（https://stripe.com/docs/testing）の情報を入力し、「支払う」をクリックします。

決済が完了し、指定したページにリダイレクトされます。

Stripeのダッシュボードからも、支払い成功が確認できました。

以上がBubbleからStripe CheckoutをAPIで直接実行する方法です。

BubbleではStripeのプラグインが用意されていますが、設定が複雑でかつ挙動が不安定です。APIで直接叩く方法は慣れてしまえばシンプルで安定した方法となります。

本記事の設定をそのままBubbleに入力すればStripe Checkoutが実装できます（2021年12月22日現在）ので、ぜひ試してみて下さい。