JP_Stripes 5th anniversary - Plan migration consideration -

This presentation is the slide for the JP Stripes 5th anniversary.

The JP_Stripes is a community of the Stripe which is world wide payment platform.

This presentation includes contens the below

- The PaymentLink
- The CustomerPortal
- How to migration the plan in the Stripe
- How to handle the specific case for part of the migration use case.

https://stripe.com/en-nl/billing

https://hugtech.io/2022/01/30/stripe-subscription-transfer-example/

Transcript

1. 割り切る？割り切らない？

   サブスクのマイグレーション。

   

   

   View Slide

2. 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?) 

   

   

   

   View Slide

3. 2017.06.06

   @神戸

   

   View Slide

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

   ● CheckoutとCustomerPortalで割り切り。

   ● 割り切らないマイグレ。

   ● サブスクリプションを譲渡する。

   本日の献立

   

   View Slide

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

   

   View Slide

6. View Slide

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

   View Slide

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

   

   View Slide

9. 支払いのUXは全て Stripe にアウトソース

   InvoiceやTax周りを Stripe に任せ、UIは自前で。

   フロントエンド(Stripe Element) と Backendを構築してフル統合

   CustomerPortal + PaymentLink

   Stripe Elements + Thin Backend

   Stripe Elements + Full Backend
   

   View Slide

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

    

    View Slide

11. PaymentLink と CustomerPortalで割り切り。

    Dashboardポチポチして、生成されるリンクを
    Customerに提供するだけ。 

    

    

    キャンセル、支払い方法の変更フローを割り切ること
    により、さらにノーコードに。 

    

    オペレーションをさらに割り切ってしまうなら、もっと簡
    略化。

    

    View Slide

12. Payment Link は、Dashboardでポチポチ。

    

    View Slide

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

    

    View Slide

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

    https://dashboard.stripe.com/{test|live}/settings/billing/portal

    

    View Slide

15. CustomerPortalの考慮

    1. サブスクリプションの変更は問い合わせで。としてしまうパターン。

    2. SaaS側にURLを生成するページを作成するパターン。

    3. URLをリクエストする独立したページを作成するパターン。

    https://labworks.digitalcube.jp/blog/technology_20201204_stripe-subscription/

    

    View Slide

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

    

    View Slide

17. マイグレーションを自前実装する

    - サブスクリプション自体をキャンセルするケース

    - サブスクリプションアイテムを置き換えるケース

    - 既存のサブスクリプションアイテムのQuantityを操作するケース

    - サブスクリプション自体を新たに追加するケース

    - Subscription.del

    - Subscription.update (or SubscriptionItem.update)

    - Subscription.update(or SubscriptionItem.update)

    - Subscription.create

    

    View Slide

18. サブスクリプションを変更するパターン１

    価格の変更は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
    }]
    });
    

    View Slide

19. サブスクリプションを変更するパターン2

    同じ価格の再購入はQuantityを増減(アイテムのリプレースが使え
    ます）

    const subscription = await stripe.subscriptions.update(‘sub_xxxxxx’, {
    items: [
    {
    price: 'price_xxxx',
    quantity: 5, ←- ここを変えるだけ
    },
    ],
    });
    

    View Slide

20. サブスクリプションを変更するパターン3

    商品が異なっていても、期間と通貨が同じなら、同じサブスクリプ
    ションに入れることができる

    const subscription = await stripe.subscriptions.update({
    items: [
    {
    price: 'price_xxxxxx', ⇐= Product Aに紐づいた価格
    },
    {
    price: 'price_xxxxxx', ⇐ Product B に紐づいた価格
    quantity: 2,
    },
    ],
    });
    

    View Slide

21. サブスクリプションを変更するパターン4

    期間または通貨が異なるケースでは、サブスクリプションの追加
    が必要。

    const subscription = await stripe.subscriptions.create({
    customer: 'cus_4xzxxxxxx',
    items: [
    {
    price: 'price_Cxxxxx',
    },
    ],
    });
    

    View Slide

22. マイグレーション のケーススタディ。

    と
 の場合

    

    View Slide

23. 旧プランと新プランのマイグレーション

    と
 の場合

    Customer Subscription of Plan5 (5 サイトプラン
    Subscription of Plan10 (10 サイトプラン
    Subscription of Tier1 Plan
    =▶サイト

    

    View Slide

24. 旧プランと新プランのマイグレーション

    👈 移行元のサイトのマイグレ可否チェック
    

    👈 旧プランのサイトから該当サイトを除外 

    現プランのサブスクリプションを作成 👉

    👈 サイトに現サブスクリプションの識別情報をマーク
    

    （新旧サイトが混在するため）

    

    View Slide

25. 新プラン間でのマイグレーション

    👈 サブスクリプションとサイト数の突き合わせ 👉

    👈 マイグレートの可否チェック 

    請求期間変更 👉

    プラン変更 👉

    

    View Slide

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

    

    View Slide

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

    Subscriptions.del()

    or Subscriptions.update() ※ decrease quantity

    Subscriptions.create()

    or Subscriptions.update() ※ increase quantity

    Price_id

    

    View Slide

28. View Slide

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

    

    View Slide

30. 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'
    })
    請求サイクルを調整

    

    View Slide

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

    https://hugtech.io/2022/01/30/stripe-subscription-transfer-example/ 

    

    View Slide

32. Gefeliciteerd van vijfde jaar het feestdag!

    ( 5周年 おめでとうございます! )

    

    View Slide