- Stripe とは
- 1. Stripe にユーザー登録する
- 2. Bubble に Stripe で決済する準備を行う
- 3. Bubble で Stripe プラグインを使って決済を行う
- 終わりに
- 追記(2020/04/02)
Stripe とは
Stripe はクレジットカード決済を簡単に組み込むことができるシステムであり、日本でもサービス展開されています。
対応するクレジットカードは、Visa、Master、Amex です。
Stripe は JCB にも対応するようになったのですが、これには別途申請が必要となります。 https://support.stripe.com/questions/jp-jcbsupport.stripe.com
この申請が通ると Diners Club、Discover カードでの決済も可能となります。
決済手数料は 3.6% というシンプルな設定であり、他の競合と比較しても使いやすい決済サービスです。
Bubble ではこの Stripe と連携できるようにするためのプラグインが提供されています。
今回は、そのStripe に対応する Bubble のプラグインを利用して「決済」をする方法について記述します。
1. Stripe にユーザー登録する
まずは、Stripe にユーザー登録します。次のリンクにアクセスしてください。
ここで、メールアドレス、名前、パスワードを入力し、「Stripe アカウントを作成」ボタンを押すと Stripe のアカウントが作成されます。
今回はテスト用にしか使いませんので、このまま Stripe を利用することが可能です。 なお、本番利用する場合には、この後、「本番環境利用の申請」を行う必要があります。
2. Bubble に Stripe で決済する準備を行う
今回は新規に Stripe00 というアプリを作成し、そこに Stripe プラグインを追加します。
2.1 新規アプリの作成
Bubble にログインし、NEW APP ボタンを押します。
Stripe00 とアプリの名前を付けて CREATE A NEW APP ボタンをクリックします。
New Application Assistant が表示されますが、今回は Start with a blank page ボタンを押して、Close the assistant ボタンを押して Application Assistant を閉じます。
index の width を 320、Height を 480 で設定します。 今回はレスポンシブ対応しないで Make this element fixed-width にチェックを入れてください。
この index ページに直接商品データを表示させてしまいます。
ちょっと雑ではありますが、こんな感じでページを作ってみます。
2.2 Stripe プラグインの追加
続いて Stripe プラグインを追加します。 Plugins タブを押して Add plugins を押します。
Install New Plugins が表示されるので、stripe と入力します。
上から２番目の Bubble 作成の stripe プラグインをインストールします。
2.3 Stripe プラグインの設定
インストールが終わると、Stripe のプラグインの設定画面が表示されます。
ここで絶対に必要なのは、「Secret Key」と「Publishable Key」の２つです。それぞれ、Live と development 用に入力するエリアがありますので、同じものを入力してください。
Secret Key と Publishable Key は Stripe のダッシュボードの 開発者 - API キー にあります。
この画面の公開可能キーが Publishable Key であり、シークレットキーが Secret Key になります。
ここまでで Stripe プラグインの準備は完了です。
3. Bubble で Stripe プラグインを使って決済を行う
まず、テスト用にユーザーをひとり先に作っておきます。 今回は guest@nocodelab.jp というメールアドレスを持つユーザーをテスト用に作成しました。
3.1 通常の支払いと返金
まずは通常の支払いです。
「購入する」ボタンのワークフローを設定します。
Click here to add an action のところで Payment - Charge the current user を選択します。
設定画面では次のように設定します。
Amount: 2000
Currency: JPY
Description: 初めての Stripe 決済
Button caption: 購入する
これで設定は終わりです。
テスト
それではテストしてみましょう。
今回は Data - App data から Run as → guest@nocodelab.jp をクリックしてプレビューを起動させます。 このリンクをクリックすると Run as の右側のアカウントとしてログインした状態でプレビューを起動させることができます。
うまく動作すると次のように動きます。なお、クレジットカードの 4242 4242 4242 4242 というのはテスト用の番号です。
決済がうまく済むと Stripe のダッシュボードの 支払いの「成功」 のところに先ほどの取引が追加されます。
該当の取引を選択し、支払いの詳細を見てみます。
手数料のところに ¥72 という記述があることがわかります。 これは Stripe の決済手数料（3.6%） の分です。 決済が終わるとこの決済手数料が発生します。
返金
何らかの理由で返金しなければいけない場合、支払い画面右上の返金ボタンから返金します。
ここで返金ボタンを押すと返金処理が走ります。
なお、返金しても決済手数料は戻ってきません。
もったいないですよね？
3.2 仮売上（オーソリ）と請求確定（キャプチャ）
Stripe には仮売上をつけるオーソリという機能と請求を確定させるキャプチャという機能があります。
仮売上の段階ではクレジットカードの枠だけを確保していて、支払いは済んでいないという状況です。この場合、支払いは済んでいませんので、決済の手数料が発生していないというところが大きなポイントです。通常、支払いが済んでしまうと手数料が取られてしまいます。Stripe の場合、決済手数料は 3.6% です。支払いが済んでしまうとこの 3.6% の決済手数料を支払わないといけません。
そのため、予約販売などで在庫を確保できていない時などキャンセルの恐れがある時に利用する場合や、準委任契約などで価格がある時にならないと確定しない契約などのために与信枠だけを確保する場合などに利用することがあります。
オーソリを利用するのは非常に簡単です。
先ほどの Charge the current user の画面で Authorize the charge only というチェックボックスにチェックを入れるだけです。
オーソリのテスト
先ほどと同じように実行してみましょう。
購入するボタンをクリックしてクレジットカードで決済します。Bubble 上での動きは全く同じです。
Stripe のダッシュボードが変わります。支払いの「未キャプチャ」のところに先ほどの取引が追加されます。
該当の取引をクリックすると、取引の詳細画面が表示されます。
支払いのキャンセル
画面右上のキャンセルボタンを押すと支払いをキャンセルすることができます。
ここでキャンセルすると、支払手数料の 3.6% は発生しないで済みます。
キャプチャ
画面右上のキャプチャボタンを押すと支払いを確定することができます。 この時、金額を変更することも可能です。ただし、オーソリで確保した枠内に設定する必要があるため、金額を増やすことはできません。減らすのみとなります。そのため、金額が変動する可能性がある場合は、オーソリの金額を多めに設定しておく必要があります。
キャプチャすると「未キャプチャ」から「成功」に取引が移動します。これで支払いが成功したことになります。
3.3 サブスクリプション販売（2020/06/04 追記）
Stripe ではサブスクリプション商品を販売することも可能です。
以前に説明していた方法は、テスト環境では販売成功しても、本番環境で販売失敗するという状態になってしまったので、改めて記載させていただきます。なお、以前記載していた情報も念の為、3.4 として残しておきます。
Stripe でサブスクリプション商品を作成する
Stripe 側のサブスクリプション商品はテスト環境と本番環境で別商品として管理されるため、両方の環境に同じ商品を登録することをオススメします。
Stripe のダッシュボードから Billing - 商品を選択し、新規ボタンをクリックします。
必要事項を入れたら料金プランを追加してください。
今回はこんな感じの「プレミアムメンバー会費」という月額 980円のサブスクリプションを作ってみました。 API ID を Bubble 側に入力する必要がありますので、コピーしておいてください。 また、「本番環境にコピー」というボタンを押して同じ商品を本番環境にもコピーしてください。 本番環境にコピーされた商品の ID はテスト環境のものとは別になりますので、ご注意ください。
Bubble でサブスクリプション商品を販売する
Button 購入する is clicked のアクションを変更し、サブスクリプション商品を販売します。
まず、現在設定されている Charge the current user は削除します。
続いて、Payment の Subscribe the user to a plan をクリックします。
Update existing subscription のチェックを外し、Dynamically specify plan にチェックを入れます。
Stripe plane name に先ほどコピーした API ID を貼り付けます。 なお、本番環境で動作させる場合にはテスト環境の API ID ではなく、本番環境の API ID を入れる必要があります。
これでテストしてみてください。
うまくいけば、一般の商品と同じように Stripe のダッシュボードの支払いの「成功」のところに該当の取引が記載されます。
3.4 サブスクリプション販売（旧情報）
こちらは古い情報であり、本番環境で次のようなエラーメッセージが表示され販売失敗するという現象が発生しています。念の為残しておきますが、実際の設定は 3.3 の方をご参考ください
Stripe ではサブスクリプション商品を販売することも可能です。
Stripe でサブスクリプション商品を作成する
Stripe のダッシュボードから Billing - 商品を選択し、新規ボタンをクリックします。
必要事項を入れたら料金プランを追加してください。
今回はこんな感じの「プレミアムメンバー会費」という月額 980円のサブスクリプションを作ってみました。 ID を Bubble 側に入力する必要がありますので、コピーしておいてください。
Bubble でサブスクリプション商品を販売する
Button 購入する is clicked のアクションを変更し、サブスクリプション商品を販売します。
まず、現在設定されている Charge the current user は削除します。
続いて、Payment の Subscribe the user to a plan をクリックします。
Subscription ID に先ほど Stripe 側でコピーした ID をペーストします。
これでテストしてみてください。
うまくいけば、一般の商品と同じように Stripe のダッシュボードの支払いの「成功」のところに該当の取引が記載されます。
終わりに
Bubble で Stripe を使った決済機能でできることを記載しました。
思ったより簡単に決済ができる一方、Bubble より Stripe の機能を覚えなければいけないので、そこが大変でした。 ただ、簡単にネットショップなどを作ることができそうだと思っていただけると思います。
メルカリのような CtoC プラットフォームを作る場合は、Stripe Connect という機能を使うことができるのですが、今回はそこは割愛しています。後日、別ページを作ってご紹介できればと考えています。
なお、日本でネットショップや CtoC プラットフォームをやるならコンビニ決済や銀行口座振込、代引きあたりの決済方法も欲しいところです。手動で手続きするのであればできないこともないみたいですが、できれば自動で対応できたら嬉しいですね。
また、PayPay などの Pay系も手動で手続きすればできないこともないみたいです。 mihune-web.com
正直に言うと、私は決済周りは苦手意識があったのですが、ここ１週間くらいでだいぶ詳しくなったと思います。
Stripe オススメです。Bubble やっている方は是非お試しください！
追記(2020/04/02)
Stripe Connect について記事にしました！マーケットプレイスやシェアリングサービスなどの開発を検討されている方は、是非ご参考くださいね。
