Stripeにおける、 ノーコード決済から ローコード開発への移行法 / JP_Stripes Fukuoka 202307

JP_Stripes福岡 Vol.10 Stripeにおける、 ノーコード決済から ローコード開発への移行法 @hidetaka_dev Updated June 2023

JP_Stripes福岡 Vol.10 👋 Hello! Hidetaka Okamoto(岡本秀高) Developer Advocate @ Stripe AWS Community Builder 💬 @hidetaka_dev ✉ [email protected] Hyogo / Kyoto, Japan

開発時間の41%は、 バグ対応や保守・技術負債に費やされている https://youtu.be/5aqwPlMHFM8

• https://youtu.be/5aqwPlMHFM8

41%の「保守時間」を 機能開発や業務効率化に 費やせるようにするには？ 4

https://stripe.com/docs/no-code

• https://stripe.com/docs/no-code

保守・不具合対応を減らす方法 ノーコードツールで、「保守するコードをなくす」 https://stripe.com/jp/payments/payment-links https://dashboard.stripe.com/test/settings/billing/portal 6

• https://dashboard.stripe.com/test/settings/billing/portal
• https://stripe.com/jp/payments/payment-links

If: Event Driven Architecture StripeのWebhookイベントで、 「契約」と「システム」を紐付け もし This: XXなら Then: その時 That: YYする https://stripe.com/sessions 7

• https://stripe.com/sessions

ノーコード・ローコード開発では、「イベント駆動」が欠かせない 決済や契約に関する「問題」を迅速に検知・対応する AWS account AWS Step Functions workflow Email Webhook イベント Amazon Simple Email Service (Amazon SES) 契約に関する 重要なお知らせ Users AWS Lambda Amazon Simple Notification Service (Amazon SNS) Email notification Admin [対応依頼] 請求書の未払い 発生 8

Next step: ノーコードから ローコードへ 写真：Bing Hui Yau on Unsplash https://unsplash.com/ja/写真/crdXa0op5bI Unsplashライセンス

• https://unsplash.com/ja/

ノーコードからローコードへ ローコードに切り替えるタイミング ● 決済フローのカスタマイズ ○ 決済方法 / 期限付き注文ページ / etc… ● ログインユーザーとCustomerの紐付け ○ 複数プランの契約 / システム情報との連携 / etc… ● 注文商品や決済方法の「動的化」 ○ 複数商品の組み合わせ / カート機能 / 地域別送料 / etc.. 10

ローコードな決済URLの作り方 const session = await stripe.checkout.sessions.create({ success_url: 'https://example.com/thanks', cancel_url: 'https://example.com', line_items: [{ price: 'price_xxx', quantity: 1, }], mode: 'subscription', }) return Response.redirect(session.url, 302) Checkout Session URLへ リダイレクト

• https://example.com/thanks
• https://example.com

ローコードな決済URLの作り方 <a href="/checkout_session"> 注文する </a> <form method="POST" action="/checkout_session"> リンクまたは Formで遷移 <button type="submit">注文する</button> (methodに注意) </form>

Payment Links -> Checkoutでは、 Webhookイベントはほぼ同じ 13

顧客マイページ（カスタマーポータル）の ローコード化

ノーコードからローコードへ カスタマーポータルのローコード化によるメリット ● ログインユーザーとCustomerの紐付け ○ 認証処理の省略 ● マイページ操作のカスタマイズ ○ 契約変更前の事前処理 / 処理完了後のリダイレクト / etc… ● 独自UI組み込みまでの「段階的」マイグレーション 15

ローコードなマイページ組み込み

const session = await stripe.billingPortal.sessions.create({
customer: 'cus_NloPGgL7HU1dby',
return_url: 'https://example.com/account',
});

return Response.redirect(session.url, 302)

Biiling portal
Session URLへ
リダイレクト

ローコードなマイページ組み込み

stripe.billingPortal.configurations.create({
business_profile: {
privacy_policy_url:
'https://example.com/privacy-policy',
terms_of_service_url:
'https://example.com/terms-of-service',
},
features: {
subscription_cancel: {
enabled: true,
mode: 'immediately',
}
},
default_return_url: 'https://example.com'
})

Configで、
表示設定を
カスタマイズ

ローコードなマイページ組み込み

const session = await stripe.billingPortal.sessions.create({
customer: 'cus_NloPGgL7HU1dby',
config: 'bpc_1N0aPvL8xlxrZ26gZp7eDbLd',
return_url: 'https://example.com/account',
});

configを使って
セッション開始

例: [支払い情報の更新]と、 [請求履歴履歴閲覧]のみを許可

プラン更新・キャンセル処理に 独自の事前処理を挟みたい 20

New カスタマーポータル ディープリンク機能 https://stripe.com/docs/customermanagement/portal-deep-links

• https://stripe.com/docs/customer-management/portal-deep-links

カスタマーポータル ディープリンク機能 通常のカスタマーポータルとの違い カスタマーポータル ● ● ● ポータルページに遷移 ユーザーは、複数の操作が可能 ○ プラン変更・キャンセル ○ 決済・顧客情報の更新 ○ 請求履歴やPDFダウンロード ○ etc… APIで複数の設定が作成可能 ディープリンク ● ● ● ● 特定の操作フォームに直接移動 ○ プラン変更 ○ サブスクのキャンセル ○ 決済情報更新 設定した操作のみ可能 操作完了後の遷移先を指定できる セッション作成時に flow_dataとして都度定義 22

const session = await stripe.billingPortal.sessions.create({

ローコードなマイページ組み込み

customer: '{{CUSTOMER_ID}}',
return_url: 'https://example.com/account/overview',
flow_data: {
type: 'subscription_update',
subscription_update: {
subscription: '{{SUBSCRIPTION_ID}}',
},
},
});

例:
サブスクの
更新処理

const session = await stripe.billingPortal.sessions.create({

ローコードなマイページ組み込み

customer: '{{CUSTOMER_ID}}',
return_url: 'https://example.com/account/overview',
flow_data: {
type: 'subscription_cancel',
subscription_cancel: {
subscription: '{{SUBSCRIPTION_ID}}',
},
},
});

例:
サブスクの
更新処理

ローコードなマイページ組み込み 請求マイページの段階的「ホワイトラベル化」 ノーコードで素早く開始 独自UIで「ホワイトラベル化」 ・開発工数の最小化 ・イベント駆動を意識した アーキテクチャ設計を実施 ・Stripe APIをシステムに組み込み ・準備できた機能から順に ディープリンクより移行する カスタマーポータル カスタマーポータル（ディープリンク） APIを利用した独自UI 段階的な「埋め込み化」 ・マイページTOPを独自UIに ・必要な「操作」を、 ディープリンクにて実現 25

ノーコードからローコードへ 「イベント駆動」が段階的移行に効く理由 ● 「ユーザーの操作」と「操作後の処理」の分離 ○ 操作: プランを変更した ○ 処理: システムDBの利用上限を更新 ● Webhook処理部分は、「UI移行」の影響を受けない ○ 「どこからStripeのデータを変更するか」が変わるだけ ● 「前処理・事前チェック」が必要な場合は、 ポータルではなくディープリンクを検討しよう 26

Stripe Elementへの移行には 十分な準備と工数を用意しよう

決済フォームを独自UI埋め込みにする注意点 Element化した際に開発が必要になる機能（一部） ● 注文した商品名と数量を保存する機能 ● 配送料金や消費税を計算・加算する処理と保存する機能 ● クーポンコードフォームと割引計算処理 ● PDF領収書を発行する機能 ● アップセル・クロスセル機能 ● Webhookイベントの変化への対応 ○ checkout.sessions.completed -> payment_intent.succeeded 28

なぜ決済フォームは 埋め込み型でなければならないか？ それはYAGNIではないか？ 29

最適化された決済フローの提供 OpenAI / TwitterもStripe Checkoutを採用中 30

ビジネスや収益を 最速で増やすために 「なにをやらないか」を決めよう 31

JP_Stripes福岡 👋 Thanks! Increasing The GDP Hidetaka Okamoto(岡本秀高) Of the Internet Developer Advocate @ Stripe https://stripe.com/jp/newsroom/information 💬 @hidetaka_dev ✉ [email protected]

• https://stripe.com/jp/newsroom/information