🕌

【感動】Stripe Expresssを使って本人確認と管理画面の実装コストを下げる

2023/04/19に公開

Stripe ConnectというCtoCプラットフォームを作るためのStripeのサービスがあります。

Stripe Connectのお金を受け取る側であるConnected Account(以下わかりやすいように講師側と呼ぶ)には Standard、Express、Custom の3つのタイプがありまして、Standardがもっとも講師側にStripeを使いこなすリテラシーが求められるタイプ、Customが一番Stripeを意識させないことが可能なタイプとなっています。

https://stripe.com/docs/connect/accounts

2年前にCodeBoyを実装した時には、Customを選択しました。Expressも既に存在していたのかもしれませんが、今日ほど充実してなかったんじゃないかなという記憶です。(調べたらStripe Expressは2016年に発表され、本人確認の機能であるStripe Account Linksは2020年に発表されていました。)

そして今回、CodeBoy2を開発するにあたっては、 Stripe Express を選択してみました。

Stripe Expressが一番開発コストが低く、それでいて講師側のユーザーにとってもフレンドリーだと感じたからです。

CodeBoy2がどんなサービスか気になる方はこちらの記事をチェックしてみてください。

実装やユーザー体験の流れ

以下の記事に書かれてることでもありますが、私の方でも軽くまとめて紹介します。

https://stripe.com/docs/connect/express-accounts?locale=ja-JP

①Connected Account作成

typeをexpressに指定して、アカウント(講師側)を作成します。

index.ts
const stripe = require('stripe')('sk_test_cD9qRm15AyJQEugTgE2lXMg700cDWtNdsH');

const account = await stripe.accounts.create({type: 'express'});

https://stripe.com/docs/api/accounts/create

②Account Linksのリンク作成

Stripe Connectのアカウント(講師側)が送金を受け取るためには、本人確認が必要です。そのためのUIがStripeに用意されていて、これがAccountLinksです。このページへのリンクは以下のAPIで作れます。

index.ts
const accountLink = await stripe.accountLinks.create({
  account: '{{CONNECTED_ACCOUNT_ID}}',
  refresh_url: 'https://example.com/reauth',
  return_url: 'https://example.com/return',
  type: 'account_onboarding',
});

作られたリンクに飛ぶと、以下のようにビジネス情報入力UIに飛びます。

免許証やマイナンバーカードを使った本人確認(KYC)のUIも提供してくれていて、これを自分たちで実装するよりは、AccountLinksのUIでやった方が絶対に安全でシームレスなUI体験を作れると思いました。

https://stripe.com/docs/api/account_links/create

③情報入力が完了したかどうかを確認

accountをAPIで取得するか、account.updatedをwebhookで検知してfirestoreを更新するなどして、アカウント(講師側)のステータスを確認することができます。

この時に見るparameterがdetails_submittedです。

https://stripe.com/docs/api/accounts/retrieve

④生徒から講師へ決済する

こちらの実装は以下の記事に書きました。Stripe Checkoutで行えば、こちらもUIを実装しなくて済みます。

https://zenn.dev/flutteruniv_dev/articles/14e5b04a5350a0

Stripe Checkoutのデモ↓

⑤講師はExpress管理画面で売上を管理できる

管理画面へのリンクは以下のAPIで取得できます。

index.ts
const accountId = data.account_id;
const loginLink = await stripe.accounts.createLoginLink(accountId);
const url = loginLink.url;
return url;

https://stripe.com/docs/api/account/create_login_link

このリンクを実際にPCから開くと、以下のような感じになります。(ちなみにこれは本番環境です。CodeBoy2で実際にいくつかプランを買ってもらいました。)

Stripe Expressには専用アプリが用意されていて、以下のように金額を確認できます。

https://apps.apple.com/us/app/stripe-express/id1560214813

一連の実装は以上です。できるだけ自前実装せず、Stripeの機能を使いまくっています。

まとめ

Stripe ExpressとAccount Links等を使った際の一連のざっくりとした実装の流れと、体験の紹介をさせていただきました。

是非、CtoCサービスを作る際は参考にしてください。

また、個別で僕に実装方法を聞きたい方がいましたら、Flutter大学に入会し、CodeBoy2で僕のメンタープランを買って聞いてください。いまなら30分3000円です。(この料金は4月だけ)

Flutter大学

Discussion