コア機能開発に集中するための Stripe Checkout活用法 / jp_stripes_deep_dive_202301

JP_Stripes Deep Dive Vol.12

Transcript

1. コア機能開発に集中するための
   Stripe Checkout活用法
   JP_Stripes Deep Dive Vol.12
   @hidetaka_dev
   Updated Jan 2023
   

   View Slide

2. SaaSの力 で
   「やるべきこと」に
   集中できる環境を作ろう
   2
   

   View Slide

3. 1. なぜStripe Checkoutなのか
   2. Checkoutをより便利に使いこなす
   3. Elementsとの使い分けやマイグレーション
   Agenda
   3
   JP_Stripes Deep Dive Vol.12
   

   View Slide

4. Hidetaka Okamoto(岡本秀高)
   Developer Advocate @ Stripe
   💬 @hidetaka_dev
   ✉ hideokamoto@stripe.com
   JP_Stripes宮崎
   👋 Hello!
   

   View Slide

5. JP_Stripes Deep Dive Vol.12
   State of Checkout
   ● APAC５カ国
   ● Stripeを利用するEC
   ● 各国上位100サイトを対象
   

   View Slide

6. 1. なぜStripe Checkoutなのか
   2. Checkoutをより便利に使いこなす
   3. Elementsとの使い分けやマイグレーション
   Agenda
   6
   JP_Stripes Deep Dive Vol.12
   

   View Slide

7. 7
   なぜStripe Checkoutなのか
   リダイレクト or 埋め込み
   

   View Slide

8. View Slide

9. const session = await stripe.checkout.sessions.create({
   mode: 'subscription',
   line_items: [{
   price: 'price_xxxx',
   quantity: 1
   }],
   success_url: 'https://example.com',
   cancel_url: 'https://example.com'
   })
   return res.status(200).json({
   url: session.url
   })
   なぜStripe Checkoutなのか
   数行のコードで
   URLを発行
   

   View Slide

10. line_items: [{
    price_data: {
    unit_amount: 1000,
    currency: 'jpy',
    product_data: {
    name: 'XX様専用プラン'
    }
    },
    quantity: 1
    }],
    なぜStripe Checkoutなのか
    アドホックな
    料金・商品設定
    

    View Slide

11. 1. 日本・諸外国の法改正や規制対応
    2. 決済フォームのローカライズや最適化
    3. 売上を増やすための追加施策
    Checkoutで削減できる運用コスト
    11
    なぜStripe Checkoutなのか
    

    View Slide

12. 12
    なぜStripe Checkoutなのか
    2022年施行の特商法改正への対応
    

    View Slide

13. 1. 日本・諸外国の法改正や規制対応
    2. 決済フォームのローカライズや最適化
    3. 売上を増やすための追加施策
    Checkoutで削減できる運用コスト
    13
    なぜStripe Checkoutなのか
    

    View Slide

14. なぜStripe Checkoutなのか
    複数通貨での
    価格設定
    

    View Slide

15. なぜStripe Checkoutなのか
    IPアドレスや
    住所に基づく
    決済手段の表示
    

    View Slide

16. 1. 日本・諸外国の法改正や規制対応
    2. 決済フォームのローカライズや最適化
    3. 売上を増やすための追加施策
    Checkoutで削減できる運用コスト
    16
    なぜStripe Checkoutなのか
    

    View Slide

17. なぜStripe Checkoutなのか
    クロスセル
    アップセル
    

    View Slide

18. なぜStripe Checkoutなのか
    カード情報を
    登録せずに
    トライアルを開始
    

    View Slide

19. なぜStripe Checkoutなのか
    カート内の
    商品数を変更
    

    View Slide

20. 1. 決済の完了（カード）:
    checkout.session.completed
    2. 決済の完了（コンビニ決済等非同期型）
    :
    checkout.session.async_payment_succeeded
    3. 決済の失敗（コンビニ決済など非同期型）
    :
    checkout.session.async_payment_failed
    4. セッションの有効期限切れ:
    checkout.session.expired
    注文・決済情報はWebhookで受け取る
    20
    なぜStripe Checkoutなのか
    

    View Slide

21. なぜStripe Checkoutなのか
    Zapierなどで
    ノーコードに
    

    View Slide

22. 決済周りの開発だけでなく
    改善のためのリソースも
    Checkoutで効率化
    22
    

    View Slide

23. 1. なぜStripe Checkoutなのか
    2. Checkoutをより便利に使いこなす
    3. Elementsとの使い分けやマイグレーション
    Agenda
    23
    JP_Stripes Deep Dive Vol.12
    

    View Slide

24. Stripeをより便利に使いこなす
    請求・顧客情報
    マイページ
    

    View Slide

25. Stripeをより便利に使いこなす
    ノーコードに
    対応
    

    View Slide

26. const session = await stripe.checkout.sessions.create({
    mode: 'payment',
    + invoice_creation: {
    + enabled: true,
    + },
    …
    Stripeをより便利に使いこなす
    一回切りの決済で
    請求書・領収書を
    発（有料）
    

    View Slide

27. Stripeをより便利に使いこなす
    AWSとの
    システム連携
    

    View Slide

28. Stripe & Stripe Checkoutで
    決済に関わる
    ワークフロー を手軽に実装
    28
    

    View Slide

29. 1. なぜStripe Checkoutなのか
    2. Checkoutをより便利に使いこなす
    3. Elementsとの使い分けやマイグレーション
    Agenda
    29
    JP_Stripes Deep Dive Vol.12
    

    View Slide

30. const elements = stripe.elements({ {
    theme: 'stripe',
    }, clientSecret });
    const paymentElement = elements.create("payment", {
    layout: "tabs",
    });
    paymentElement.mount("#payment-element");
    　Elementsとの使い分け
    埋め込み型
    決済フォーム
    

    View Slide

31. 　Elementsとの使い分け
    デザインの
    カスタマイズ
    appearance: {
    theme: 'none',
    variables: {
    colorPrimary: '#2b8501'
    fontFamily: 'Osaka',
    borderRadius: '4px',
    spacingGridColumn: '50px'
    },
    rules: {
    '.Tab': {
    border: '1px solid #E0E6EB',
    boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px
    6px rgba(18, 42, 66, 0.02)',
    },
    '.Tab:hover': {
    color: 'var(--colorText)',
    },
    

    View Slide

32. 　Elementsとの使い分け
    カスタマイズされた
    Subscription
    

    View Slide

33. 33
    Elementsへのマイグレーション
    　Elementとの使い分け
    

    View Slide

34. 1. Payment Intent / Subscriptionデータを作成
    2. カートの情報をDBに保存し、決済と紐付け
    3. Stripe.jsでフォームを描画
    4. Stripe.jsで決済確定処理
    5. Webhookで決済完了・失敗時のWFを実行
    Elementsへのマイグレーション
    34
    JP_Stripes Deep Dive Vol.12
    

    View Slide

35. 1. 「カートの中身」を外部DBで保存
    2. Webhookイベントの種類が一部変わる
    3. Customer Portalを使うには、Invoicingが必要
    マイグレーション時の注意点
    35
    JP_Stripes Deep Dive Vol.12
    

    View Slide

36. 簡単ではない
    が、不可能でもない
    36
    

    View Slide

37. ● リンク型で、すぐに始める
    ● リダイレクト型で、低工数・コストに組み込む
    ● 埋め込み型で、
    デザイン・ブランドに馴染む組み込みを行う
    規模や予算・リソースに応じた決済機能開発
    37
    SaaSという「巨人の肩」を乗りこなす
    

    View Slide

38. SaaSの力 で
    ECの「やるべきこと」に
    集中できる環境を作ろう
    38
    

    View Slide