Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

8

Slide 9

Slide 9 text

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を発行

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

　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)', },

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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