State of Checkout 2022から見た オンライン決済フローの最適化/jp-stripes-miyzaki-202301

Transcript

1. State of Checkout 2022から見た
   オンライン決済フローの最適化
   JP_Stripes 宮崎
   @hidetaka_dev
   Updated Jan 2023
   

   View Slide

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

   View Slide

3. 1. 決済フォームを便利にする５つのポイント
   2. 「決済フローの外」でも、体験を最適化する
   3. SaaSという「巨人の肩」を乗りこなす
   Agenda
   3
   JP_Stripes宮崎
   

   View Slide

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

   View Slide

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

   View Slide

6. 1. 決済フォームを便利にする3つのポイント
   2. 「決済フローの外」でも、体験を最適化する
   3. SaaSという「巨人の肩」を乗りこなす
   Agenda
   6
   JP_Stripes宮崎
   

   View Slide

7. 10%
   7
   84%
   ３分
   決済フォームを便利にする
   3つのポイント
   カゴ落ちなく
   毎回注文を完了する
   顧客の割合
   1Click決済で
   注文ハードルが下がる
   顧客の割合
   49%の顧客が
   購入を諦める時間
   1: 決済のステップ数や処理時間はCVに影響する
   

   View Slide

8. 決済フォームを便利にする
   3つのポイント
   1 Click 決済
   

   View Slide

9. const session = await stripe.checkout.sessions.create({
   mode: 'payment',
   payment_intent_data: {
   setup_future_usage: 'off_session',
   },
   決済フォームを便利にする
   3つのポイント
   カード情報の
   保存
   

   View Slide

10. 10
    2: この決済フォームは安全か？
    決済フォームを便利にする
    3つのポイント
    

    View Slide

11. 買い物客は訪れたサイトに対してネガティブ
    な印象を抱くこともあり、その原因のトップは、
    「その企業のウェブサイトが安全と感じられな
    い場合、あるいは信頼できると感 じられない
    場合」である
    11
    

    View Slide

12. View Slide

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

    View Slide

14. 14
    決済フォームを便利にする
    3つのポイント
    3: ストレスなく決済情報を入力できるか？
    39%
    45%
    54%
    住所情報の
    自動補完・入力補助が
    ないサイトの割合
    期限切れのカードで
    注文処理を試行できる
    サイトの割合
    カード情報の検証を
    入力時に実施していな
    いサイトの割合
    

    View Slide

15. 決済フォームを便利にする
    3つのポイント
    入力時の
    バリデーション
    

    View Slide

16. 決済フォームを便利にする
    3つのポイント
    APIを利用した
    住所の自動入力
    

    View Slide

17. 1. 入力エラーに素早く気づく仕組みと表示
    2. 支払い情報の安全な保存と1 Click 決済
    3. 「安全な決済フロー」であることを顧客に示す
    より良い決済体験のためにできること
    17
    決済フォームを便利にする
    3つのポイント
    

    View Slide

18. 1. 決済フォームを便利にする3つのポイント
    2. 「決済フローの外」でも、体験を最適化する
    3. SaaSという「巨人の肩」を乗りこなす
    Agenda
    18
    JP_Stripes宮崎
    

    View Slide

19. 19
    「決済フローの外」でも、体験を最適化する
    より顧客単価・CVRを高めるためにできること
    54%
    89%
    82%
    クロスセル提案を
    行なっていない
    サイトの割合
    アップセルを
    行なっていない
    サイトの割合
    カート放棄(カゴ落ち)
    フォローアップを
    未実施のサイト
    

    View Slide

20. 「決済フローの外」でも、体験を最適化する
    アップセルを
    提案する
    

    View Slide

21. 「決済フローの外」でも、体験を最適化する
    クロスセル商品を
    登録する
    

    View Slide

22. 「決済フローの外」でも、体験を最適化する
    Webhookで
    フォローアップの
    WFを実行
    

    View Slide

23. 「決済フローの外」でも、体験を最適化する
    Zapierなどで
    ノーコードに
    

    View Slide

24. View Slide

25. 客単価 / LTV / CVRを上げるため
    さまざまな施策・提案を
    素早く試して検証 する
    25
    

    View Slide

26. 1. 決済フォームを便利にする５つのポイント
    2. 「決済フローの外」でも、体験を最適化する
    3. SaaSという「巨人の肩」を乗りこなす
    Agenda
    26
    JP_Stripes宮崎
    

    View Slide

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

    View Slide

28. 28
    SaaSという「巨人の肩」を乗りこなす
    組み込み方を「後から変えれる」ようにする
    

    View Slide

29. Webhookを「つなぎ目」にする
    Customer Website
    29
    Building blocks
    Elements
    Payment
    Links
    Checkout
    Backoffice
    Stripe
    Webhook
    

    View Slide

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

    View Slide

31. View Slide

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

    View Slide