Tweet
Tweet

Slide 1

Slide 1 text

割り切る？割り切らない？
 サブスクのマイグレーション。
 


Slide 2

Slide 2 text

Tomoharu Ito
 
 Web: https://hugtech.io
 
 Twitter: @haruharuharuby
 
 
 Community
 
 AAJUG (Amazon Alexa) 
 Twitter: @aajugvoice
 
 AWSUG.nl
 https://awsug.nl/about/ 
 
 JP_Stripes 神戸?
 
 Alexa Champion (2018?) 
 
 


Slide 3

Slide 3 text

2017.06.06
 @神戸


Slide 4

Slide 4 text

● サブスクのおさらいと実装のパターン
 ● CheckoutとCustomerPortalで割り切り。
 ● 割り切らないマイグレ。
 ● サブスクリプションを譲渡する。
 本日の献立


Slide 5

Slide 5 text

サブスクのおさらいと実装のパターン


Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Product (商品) ビジネスが提供する商品またはサービスを表します。 Price (価格) 商品の請求額と請求頻度を定義します。商品コスト、使用通貨、および期間 (サブスクリプションの価格の場合) が含まれています。 Customer (顧客) Stripe の Customer オブジェクトを使用することで、同一顧客に対する継続請求の実行と、複数の請求の追跡ができるようになります。サブスク リプションを作成すると、サブスクリプション ID が Customer オブジェクトに渡されます。 PaymentMethod (支払い方法) サービスに対する顧客の支払い方法を表します。たとえば、クレジットカードを Customer オブジェクトに保存して継続的に使用することができま す。通常、Payment Intents API または Setup Intents API とともに使用されます。 Subscription (サブスクリプション) 顧客が登録しているプランに関連する商品の詳細を表します。サブスクリプションにより、定期的に顧客に請求できます。 Invoice (インボイス) 顧客が支払う必要がある金額の明細書です。下書きから、支払い済みになるかその他の最終的な確定に至るまで、支払いのステータスを追跡 します。サブスクリプションではインボイスが自動生成されますが、1 回限りのインボイスを手動で作成することもできます。 PaymentIntent (支払いインテント) 動的な支払いフローを構築する方法です。Payment Intent は、顧客の決済フローのライフサイクルを追跡し、規制で必須とされる同意書、Radar のカスタムの不正使用ルール、またはリダイレクトベースの支払い方法によって要求されたときに、追加の認証ステップを開始します。Payment Intent は、インボイスによって自動的に作成されます。

Slide 8

Slide 8 text

サービスのリソースを許可 Stripe Elements: Embeddable UI components to build pixel perfect payments experiences We built Checkout so you don't have to SaaS側


Slide 9

Slide 9 text

支払いのUXは全て Stripe にアウトソース
 InvoiceやTax周りを Stripe に任せ、UIは自前で。
 フロントエンド(Stripe Element) と Backendを構築してフル統合
 CustomerPortal + PaymentLink
 Stripe Elements + Thin Backend
 Stripe Elements + Full Backend

Slide 10

Slide 10 text

PaymentLinkとCustomerPortalで割り切りマイグレーション


Slide 11

Slide 11 text

PaymentLink と CustomerPortalで割り切り。
 Dashboardポチポチして、生成されるリンクを Customerに提供するだけ。 
 
 
 キャンセル、支払い方法の変更フローを割り切ること により、さらにノーコードに。 
 
 オペレーションをさらに割り切ってしまうなら、もっと簡 略化。


Slide 12

Slide 12 text

Payment Link は、Dashboardでポチポチ。


Slide 13

Slide 13 text

CustomerPortalでサブスクリプションの管理をアウトソース


Slide 14

Slide 14 text

CustomerPortalでサブスクリプションの管理をアウトソース
 https://dashboard.stripe.com/{test|live}/settings/billing/portal


Slide 15

Slide 15 text

CustomerPortalの考慮
 1. サブスクリプションの変更は問い合わせで。としてしまうパターン。
 2. SaaS側にURLを生成するページを作成するパターン。
 3. URLをリクエストする独立したページを作成するパターン。
 https://labworks.digitalcube.jp/blog/technology_20201204_stripe-subscription/


Slide 16

Slide 16 text

割り切らない！ マイグレーション！


Slide 17

Slide 17 text

マイグレーションを自前実装する
 - サブスクリプション自体をキャンセルするケース
 - サブスクリプションアイテムを置き換えるケース
 - 既存のサブスクリプションアイテムのQuantityを操作するケース
 - サブスクリプション自体を新たに追加するケース
 - Subscription.del
 - Subscription.update (or SubscriptionItem.update)
 - Subscription.update(or SubscriptionItem.update)
 - Subscription.create


Slide 18

Slide 18 text

サブスクリプションを変更するパターン１
 価格の変更はItemsプロパティをリプレース
 const subscription = await stripe.subscriptions.retrieve('sub_xxxxxxx'); stripe.subscriptions.update('sub_49ty4767H20z6a', { cancel_at_period_end: false, proration_behavior: 'create_prorations', items: [{ id: subscription.items.data[0].id, price: 'price_xxxxxx, ←- 新しいPriceのID }] });

Slide 19

Slide 19 text

サブスクリプションを変更するパターン2
 同じ価格の再購入はQuantityを増減(アイテムのリプレースが使え ます）
 const subscription = await stripe.subscriptions.update(‘sub_xxxxxx’, { items: [ { price: 'price_xxxx', quantity: 5, ←- ここを変えるだけ }, ], });

Slide 20

Slide 20 text

サブスクリプションを変更するパターン3
 商品が異なっていても、期間と通貨が同じなら、同じサブスクリプ ションに入れることができる
 const subscription = await stripe.subscriptions.update({ items: [ { price: 'price_xxxxxx', ⇐= Product Aに紐づいた価格 }, { price: 'price_xxxxxx', ⇐ Product B に紐づいた価格 quantity: 2, }, ], });

Slide 21

Slide 21 text

サブスクリプションを変更するパターン4
 期間または通貨が異なるケースでは、サブスクリプションの追加 が必要。
 const subscription = await stripe.subscriptions.create({ customer: 'cus_4xzxxxxxx', items: [ { price: 'price_Cxxxxx', }, ], });

Slide 22

Slide 22 text

マイグレーション のケーススタディ。
 と
 の場合


Slide 23

Slide 23 text

旧プランと新プランのマイグレーション
 と
 の場合
 Customer Subscription of Plan5 (5 サイトプラン Subscription of Plan10 (10 サイトプラン Subscription of Tier1 Plan =▶サイト


Slide 24

Slide 24 text

旧プランと新プランのマイグレーション
 👈 移行元のサイトのマイグレ可否チェック 
 👈 旧プランのサイトから該当サイトを除外 
 現プランのサブスクリプションを作成 👉
 👈 サイトに現サブスクリプションの識別情報をマーク 
 （新旧サイトが混在するため）


Slide 25

Slide 25 text

新プラン間でのマイグレーション
 👈 サブスクリプションとサイト数の突き合わせ 👉
 👈 マイグレートの可否チェック 
 請求期間変更 👉
 プラン変更 👉


Slide 26

Slide 26 text

付録：サブスクリプションを譲渡する。


Slide 27

Slide 27 text

付録：サブスクリプションを譲渡する。
 Subscriptions.del()
 or Subscriptions.update() ※ decrease quantity
 Subscriptions.create()
 or Subscriptions.update() ※ increase quantity
 Price_id


Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

const deleted = await stripe.subscriptions.del(targetSubscriptionId, { prorate: false }) const deleted = await stripe.subscriptionItems.del( subscriptionItems.data[0].id, { proration_behavior: 'none' }) 比例配分をOFF


Slide 30

Slide 30 text

const param: Stripe.SubscriptionCreateParams = { customer: receiverCustomerId, items: [ { price: priceId } ], } if (current_period_end) { param.billing_cycle_anchor = current_period_end } const created = await stripe.subscriptions.create(param) const added = await stripe.subscriptionItems.create({ subscription: subscriptions.data[0].id, proration_behavior: 'none' }) 請求サイクルを調整


Slide 31

Slide 31 text

付録：サブスクリプションを譲渡する。
 https://hugtech.io/2022/01/30/stripe-subscription-transfer-example/ 


Slide 32

Slide 32 text

Gefeliciteerd van vijfde jaar het feestdag!
 ( 5周年 おめでとうございます! )