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

コア機能開発に集中するための Stripe Checkout活用法 / jp_stripes_...

コア機能開発に集中するための Stripe Checkout活用法 / jp_stripes_deep_dive_202301

JP_Stripes Deep Dive Vol.12

Hidetaka Okamoto (Stripe)

January 30, 2023
Tweet

More Decks by Hidetaka Okamoto (Stripe)

Other Decks in Technology

Transcript

  1. JP_Stripes Deep Dive Vol.12 State of Checkout • APAC5カ国 •

    Stripeを利用するEC • 各国上位100サイトを対象
  2. 8

  3. 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を発行
  4. line_items: [{ price_data: { unit_amount: 1000, currency: 'jpy', product_data: {

    name: 'XX様専用プラン' } }, quantity: 1 }], なぜStripe Checkoutなのか アドホックな 料金・商品設定
  5. 1. 決済の完了(カード): checkout.session.completed 2. 決済の完了(コンビニ決済等非同期型) : checkout.session.async_payment_succeeded 3. 決済の失敗(コンビニ決済など非同期型) :

    checkout.session.async_payment_failed 4. セッションの有効期限切れ: checkout.session.expired 注文・決済情報はWebhookで受け取る 20 なぜStripe Checkoutなのか
  6. const session = await stripe.checkout.sessions.create({ mode: 'payment', + invoice_creation: {

    + enabled: true, + }, … Stripeをより便利に使いこなす 一回切りの決済で 請求書・領収書を 発(有料)
  7. const elements = stripe.elements({ { theme: 'stripe', }, clientSecret });

    const paymentElement = elements.create("payment", { layout: "tabs", }); paymentElement.mount("#payment-element");  Elementsとの使い分け 埋め込み型 決済フォーム
  8.  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)', },
  9. 1. Payment Intent / Subscriptionデータを作成 2. カートの情報をDBに保存し、決済と紐付け 3. Stripe.jsでフォームを描画 4.

    Stripe.jsで決済確定処理 5. Webhookで決済完了・失敗時のWFを実行 Elementsへのマイグレーション 34 JP_Stripes Deep Dive Vol.12