Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Hidetaka Okamoto (Stripe)

January 27, 2023
Tweet

More Decks by Hidetaka Okamoto (Stripe)

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

  4. Hidetaka Okamoto(岡本秀高)
    Developer Advocate @ Stripe
    💬 @hidetaka_dev
    [email protected]
    JP_Stripes宮崎
    👋 Hello!

    View Slide

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

    View Slide

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

    View Slide

  7. 10%
    7
    84%
    3分
    決済フォームを便利にする
    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. 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. 24

    View Slide

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

    View Slide

  26. 1. 決済フォームを便利にする5つのポイント
    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
    [email protected]

    View Slide