ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

Bubble での Stripe を使ったクレジットカード決済の始め方

f:id:toka-xel:20200212113555p:plain

Stripe とは

Stripe はクレジットカード決済を簡単に組み込むことができるシステムであり、日本でもサービス展開されています。

stripe.com

対応するクレジットカードは、Visa、Master、Amex です。

Stripe は JCB にも対応するようになったのですが、これには別途申請が必要となります。 support.stripe.com

この申請が通ると Diners Club、Discover カードでの決済も可能となります。

決済手数料は 3.6% というシンプルな設定であり、他の競合と比較しても使いやすい決済サービスです。

Bubble ではこの Stripe と連携できるようにするためのプラグインが提供されています。

今回は、そのStripe に対応する Bubble のプラグインを利用して「決済」をする方法について記述します。

1. Stripe にユーザー登録する

まずは、Stripe にユーザー登録します。次のリンクにアクセスしてください。

dashboard.stripe.com

ここで、メールアドレス、名前、パスワードを入力し、「Stripe アカウントを作成」ボタンを押すと Stripe のアカウントが作成されます。

f:id:toka-xel:20200211182540p:plain

今回はテスト用にしか使いませんので、このまま Stripe を利用することが可能です。 なお、本番利用する場合には、この後、「本番環境利用の申請」を行う必要があります。

2. Bubble に Stripe で決済する準備を行う

今回は新規に Stripe00 というアプリを作成し、そこに Stripe プラグインを追加します。

2.1 新規アプリの作成

Bubble にログインし、NEW APP ボタンを押します。

f:id:toka-xel:20200211183143p:plain

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 にチェックを入れてください。

f:id:toka-xel:20200211183712p:plain

この index ページに直接商品データを表示させてしまいます。

f:id:toka-xel:20200211184531p:plain

ちょっと雑ではありますが、こんな感じでページを作ってみます。

2.2 Stripe プラグインの追加

続いて Stripe プラグインを追加します。 Plugins タブを押して Add plugins を押します。

Install New Plugins が表示されるので、stripe と入力します。

f:id:toka-xel:20200211185048p:plain

上から2番目の Bubble 作成の stripe プラグインをインストールします。

2.3 Stripe プラグインの設定

インストールが終わると、Stripe のプラグインの設定画面が表示されます。

f:id:toka-xel:20200211185416p:plain

ここで絶対に必要なのは、「Secret Key」と「Publishable Key」の2つです。それぞれ、Live と development 用に入力するエリアがありますので、同じものを入力してください。

Secret Key と Publishable Key は Stripe のダッシュボードの 開発者 - API キー にあります。

f:id:toka-xel:20200211185919p:plain

この画面の公開可能キーが Publishable Key であり、シークレットキーが Secret Key になります。

f:id:toka-xel:20200211190439p:plain

ここまでで Stripe プラグインの準備は完了です。

3. Bubble で Stripe プラグインを使って決済を行う

まず、テスト用にユーザーをひとり先に作っておきます。 今回は guest@nocodelab.jp というメールアドレスを持つユーザーをテスト用に作成しました。

f:id:toka-xel:20200211190848p:plain

3.1 通常の支払いと返金

まずは通常の支払いです。

「購入する」ボタンのワークフローを設定します。

Click here to add an action のところで Payment - Charge the current user を選択します。

f:id:toka-xel:20200211191201p:plain

設定画面では次のように設定します。

f:id:toka-xel:20200211193429p:plain

Amount: 2000

Currency: JPY

Description: 初めての Stripe 決済

Button caption: 購入する

これで設定は終わりです。

テスト

それではテストしてみましょう。

今回は Data - App data から Run as → guest@nocodelab.jp をクリックしてプレビューを起動させます。 このリンクをクリックすると Run as の右側のアカウントとしてログインした状態でプレビューを起動させることができます。

f:id:toka-xel:20200211191629p:plain

うまく動作すると次のように動きます。なお、クレジットカードの 4242 4242 4242 4242 というのはテスト用の番号です。

f:id:toka-xel:20200211192841g:plain

決済がうまく済むと Stripe のダッシュボードの 支払いの「成功」 のところに先ほどの取引が追加されます。

f:id:toka-xel:20200211193213p:plain

該当の取引を選択し、支払いの詳細を見てみます。

f:id:toka-xel:20200211205030p:plain

手数料のところに ¥72 という記述があることがわかります。 これは Stripe の決済手数料(3.6%) の分です。 決済が終わるとこの決済手数料が発生します。

返金

何らかの理由で返金しなければいけない場合、支払い画面右上の返金ボタンから返金します。

f:id:toka-xel:20200211205111p:plain

ここで返金ボタンを押すと返金処理が走ります。

なお、返金しても決済手数料は戻ってきません。

もったいないですよね?

3.2 仮売上(オーソリ)と請求確定(キャプチャ)

Stripe には仮売上をつけるオーソリという機能と請求を確定させるキャプチャという機能があります。

仮売上の段階ではクレジットカードの枠だけを確保していて、支払いは済んでいないという状況です。この場合、支払いは済んでいませんので、決済の手数料が発生していないというところが大きなポイントです。通常、支払いが済んでしまうと手数料が取られてしまいます。Stripe の場合、決済手数料は 3.6% です。支払いが済んでしまうとこの 3.6% の決済手数料を支払わないといけません。

そのため、予約販売などで在庫を確保できていない時などキャンセルの恐れがある時に利用する場合や、準委任契約などで価格がある時にならないと確定しない契約などのために与信枠だけを確保する場合などに利用することがあります。

オーソリを利用するのは非常に簡単です。

先ほどの Charge the current user の画面で Authorize the charge only というチェックボックスにチェックを入れるだけです。

f:id:toka-xel:20200211195537p:plain

オーソリのテスト

先ほどと同じように実行してみましょう。

購入するボタンをクリックしてクレジットカードで決済します。Bubble 上での動きは全く同じです。

Stripe のダッシュボードが変わります。支払いの「未キャプチャ」のところに先ほどの取引が追加されます。

f:id:toka-xel:20200211200434p:plain

該当の取引をクリックすると、取引の詳細画面が表示されます。

f:id:toka-xel:20200211203545p:plain

支払いのキャンセル

画面右上のキャンセルボタンを押すと支払いをキャンセルすることができます。

f:id:toka-xel:20200211203729p:plain

ここでキャンセルすると、支払手数料の 3.6% は発生しないで済みます。

キャプチャ

画面右上のキャプチャボタンを押すと支払いを確定することができます。 この時、金額を変更することも可能です。ただし、オーソリで確保した枠内に設定する必要があるため、金額を増やすことはできません。減らすのみとなります。そのため、金額が変動する可能性がある場合は、オーソリの金額を多めに設定しておく必要があります。

f:id:toka-xel:20200211204113p:plain

キャプチャすると「未キャプチャ」から「成功」に取引が移動します。これで支払いが成功したことになります。

3.3 サブスクリプション販売

Stripe ではサブスクリプション商品を販売することも可能です。

Stripe でサブスクリプション商品を作成する

Stripe のダッシュボードから Billing - 商品を選択し、新規ボタンをクリックします。

f:id:toka-xel:20200211210313p:plain

f:id:toka-xel:20200211210545p:plain

必要事項を入れたら料金プランを追加してください。

今回はこんな感じの「プレミアムメンバー会費」という月額 980円のサブスクリプションを作ってみました。 ID を Bubble 側に入力する必要がありますので、コピーしておいてください。

f:id:toka-xel:20200211211102p:plain

Bubble でサブスクリプション商品を販売する

Button 購入する is clicked のアクションを変更し、サブスクリプション商品を販売します。

まず、現在設定されている Charge the current user は削除します。

続いて、Payment の Subscribe the user to a plan をクリックします。

f:id:toka-xel:20200211211357p:plain

Subscription ID に先ほど Stripe 側でコピーした ID をペーストします。

f:id:toka-xel:20200211211610p:plain

これでテストしてみてください。

うまくいけば、一般の商品と同じように Stripe のダッシュボードの支払いの「成功」のところに該当の取引が記載されます。

終わりに

Bubble で Stripe を使った決済機能でできることを記載しました。

思ったより簡単に決済ができる一方、Bubble より Stripe の機能を覚えなければいけないので、そこが大変でした。 ただ、簡単にネットショップなどを作ることができそうだと思っていただけると思います。

メルカリのような CtoC プラットフォームを作る場合は、Stripe Connect という機能を使うことができるのですが、今回はそこは割愛しています。後日、別ページを作ってご紹介できればと考えています。

なお、日本でネットショップや CtoC プラットフォームをやるならコンビニ決済や銀行口座振込、代引きあたりの決済方法も欲しいところです。手動で手続きするのであればできないこともないみたいですが、できれば自動で対応できたら嬉しいですね。

また、PayPay などの Pay系も手動で手続きすればできないこともないみたいです。 mihune-web.com

正直に言うと、私は決済周りは苦手意識があったのですが、ここ1週間くらいでだいぶ詳しくなったと思います。

Stripe オススメです。Bubble やっている方は是非お試しください!

追記(2020/04/02)

Stripe Connect について記事にしました!マーケットプレイスやシェアリングサービスなどの開発を検討されている方は、是非ご参考くださいね。

blog.nocodelab.jp