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

1.3K Views

July 21, 23

stripe aws ノーコード ローコード 決済システム

スライド概要

Stripeにおけるイベント駆動型開発とノーコードからローコードへの移行方法についての紹介スライドです。

Webhookイベントによるイベント駆動型開発、ノーコードからローコードへの移行方法や、ローコードによる決済URLの作成方法、顧客ポータルのローコード化によるメリットなどについて触れています。

profile-image
スライド一覧

Stripe Developer Advocate

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 3.62MB)

関連スライド

slide-thumbnail

Stripe + WordPressでノーコードに 決済やサブスクを始めようワークショップ
stripe wordpress
user-img Hidetaka Okamoto 8K
slide-thumbnail

SaaSの成長を加速する 「Revenue Operations」の始め方
stripe aws
user-img Hidetaka Okamoto 4.3K
slide-thumbnail

Stripeでノーコードに始める、 オンライン決済・請求管理 体験ワークショップ
stripe wordpress ノーコード サブスクリプション 決済システム
user-img Hidetaka Okamoto 4.1K
slide-thumbnail

Stripeの開発者向け機能による 決済フロー開発・保守の効率化
stripe 決済システム
user-img Hidetaka Okamoto 4K
slide-thumbnail

Stripeの 2023年アップデートを ざっくりおさらい
stripe 決済システム
user-img Hidetaka Okamoto 2.8K
slide-thumbnail

Stripeでノーコードに始める、 オンライン決済・請求管理 体験ワークショップ
stripe ノーコード wordpress
user-img Hidetaka Okamoto 2.8K
各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

ノーコード・ローコード開発では、「イベント駆動」が欠かせない 決済や契約に関する「問題」を迅速に検知・対応する 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

9.

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

10.

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

11.

ローコードな決済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へ リダイレクト

12.

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

13.

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

14.

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

15.

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

16.
[beta] 
ローコードなマイページ組み込み

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へ
リダイレクト
17.
[beta] 
ローコードなマイページ組み込み

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で、
表示設定を
カスタマイズ
18.
[beta] 
ローコードなマイページ組み込み

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

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

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

20.

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

21.

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

22.

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

23.
[beta] 
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}}',
},
},
});

例:
サブスクの
更新処理
24.
[beta] 
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}}',
},
},
});

例:
サブスクの
更新処理
25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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