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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide