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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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