プログラミング覚え書き

WEB製作覚え書き

ノート代わりに勉強した内容をまとめています。

Bubble:決済(Stripe Connect/テスト環境)

 

Stripe Connectとは

Connectは、決済においてプラットフォームと顧客、および売り手の間で支払いをルーティングできるサービスである。ルーティングとは、ネットワーク上でデータを送信する際に、宛先IPアドレスをもとに最適な経路を選択してデータを送信すること。

自分が売り手である場合は、Stripe の導入で対応可能だが、取引に置いて複数の登場人物がいる場合(例えば、楽天Amazon といったマーケットプレイス)では、プラットフォーム(=楽天Amazonなど)、顧客(=商品購入者)、売り手(=ショップ)の間で、支払いをルーティング(請求して支払いを受け転送)する必要がある。そこで登場するのが、Stripe Connect 。

Connect は、ライドシェアリングサービスやトラベルサイト、ストアビルダーのプラットフォーム、他にも複数のフィットネスクラブなどの月額料金をまとめて請求する会員制プラットフォームといった様々なビジネスで利用することができる。

下の記事も参考に。

qiita.com

 

尚、本記事にて Stripe Connect の使い方を記述する前提として、自身のStripeアカウントは既に作成済みであること、またBubble でのStripe プラグインも導入済みとする。 Stripe についてや、Stripe アカウントの作成、Bubble プラグインの導入方法については、下の記事を参考に。

midori-x.hatenadiary.jp

 

 

Connectの設定

Stripe 側の設定

①Stripe のダッシュボードの「Connect」から「始める」をクリック。

②質問に答える。

https://bubble.io/poststripeauthと入力

 

Buggle 側の設定

 ①コピーしたクライアントIDを張り付ける

 ②Chekout Versionをv2にする

  ※v3で実装すると、Stripe側で売り手のビジネス名が未登録

   であることを理由にエラーが発生する。

   その為、売り手のビジネス名を登録する方法があれば、

   Stripe推奨のv3で実装することが望ましいと思われる。

   



 

売り手にStripeアカウント作成を促し、プラットフォームと連携

1.デザインを作成

 

 

2.Data Type:UserにFieldを追加

   

 

3.テスト用データを作成

   

 

4.ワークフローを設定

 ①Stripeに売り手を登録するフローを設定

   

 ②(動作確認用の為、本手順は実用には必要無し)

  リダイレクトで返却された売り手のStripe接続アカウントのIDを

  ①で作成したthingに追加

   

 

5.テスト

 ① Data タブの「Run as →」からプレビューを起動

 ②登録ボタンをクリック

  ⇒Stripeの画面に遷移する

 ③「開発モード」と表示されることを確認

 ④自分の Stripeアカウントでログインしている状態の場合は、

  「ユーザの切り替え」ボタンをクリック

   

 ⑤「このフォームをスキップ」をクリック

  ⇒Bubble画面に遷移する

  (実際はスキップせずに諸設定を行う)

 ⑥Data Type:Userに売り手のStripe IDが

  登録されていることを確認

   

 ⑦Stripe側で売り手のアカウントが連携されていることを確認

   

 

 

取引収益の一部を手数料としてルーティング

1.Data Typeの設定

   

2.デザインを作成

 ①請求画面

   

 ②支払い画面

   

   

 

3.ワークフローを設定

 ①請求画面

   

 ②支払い画面

   

   

   

 

4.テスト

【請求画面】

 ①Stripeアカウント作成済みの売り手のアカウントで「Run as →」

 ②乗客と金額を設定して「請求登録」をクリック

 

【支払い画面】

 ③ ②で設定した乗客のアカウントで「Run as →」

 ④金額が表示されていることを確認し「支払い」をクリック

 

 ⑤Stripe側で取引を確認

  ※当該データをクリックすると詳細画面に遷移する

   

 

 

 

プラットフォームから売り手にお金を転送する

Bubble のアプリを使って、自分のStripe 残高から売り手にTransfer(転送)する方法。Transfer には手数料が掛からない為、イレギュラーな返金やキャンペーンなどで利用できる。

 

1.テスト用クレジットカードで残高登録

Connect では、アカウントの残高(ドキュメント上での Balance)の状態が大切である。残高がない場合は、テストでも支払いを転送したりすることはできない為、まずは準備として残高登録が必要。

 ①デザインを作成

   

 ②「残高登録」ボタンにワークフローを設定

   

 ③Data タブの「Run as →」からプレビュー

 ④「残高登録」をクリック

 ⑤カード情報を入力し決済

  ※よく使われるカード番号(4242)では、

   残高に直接追加されないため、「利用可能」

   となるまで時間がかかってしまう。そのため、

   直接残高に追加されるようカード番号

   「4000 0000 0000 0077」を使用する。

  詳しくはこちらを参考にdocs.stripe.com

 ⑥Stripe側で残高が追加されたことを確認

   

 ⑦Stripe側で顧客が追加されたことを確認

   

 

2.デザインを作成

   

3.ワークフローを作成

   

 ※参考にした記事には、

  既存の請求と紐づけたい場合は、Source Charge IDに

  当該請求の支払いID(本記事ではField名:harge IDとして

  Data typeに保存済み)を設定する。

  とあるが、「そのようなチャージはありません」として

  エラーになる。

 

4.テスト

 ① 1.にて、Stripeに残高を登録済みのアカウントで「Run as →」

 ②Stripeに売り手として登録済みのアカウントを選択

 ③金額を入力して「転送」をクリック

 ④Stripe側で送金を確認(プラットフォームのアカウント)

  (当該データをクリックで詳細画面へ遷移する)

   

 ④Stripe側で入金を確認(売り手のアカウント)

  (当該データをクリックで詳細画面へ遷移する)

   





本記事作成にあたって参考にした記事はこちら

blog.nocodelab.jp