$30 off During Our Annual Pro Sale. View Details »

Stripeでクレカ決済に加えて、 コンビニ決済/銀行振込を追加する/jpstripes-deepdive-202204

Stripeでクレカ決済に加えて、 コンビニ決済/銀行振込を追加する/jpstripes-deepdive-202204

JP_Stripes DeepDive 2022/04での登壇資料です。

配信アーカイブ: https://www.youtube.com/watch?v=FzTVi8lE4uQ

Hidetaka Okamoto (Stripe)

April 20, 2022
Tweet

More Decks by Hidetaka Okamoto (Stripe)

Other Decks in Programming

Transcript

  1. Stripeでクレカ決済に加えて、
    コンビニ決済/銀行振込を追加する
    JP_Stripes DeepDive 2022/4
    岡本秀高 (@hide__dev)
    2022/04
    #Stripe #JP_Stripes

    View Slide

  2. Agenda
    ● コンビニ決済・銀行振込入門
    ● 導入篇
    ○ ノーコードで請求書送付編
    ○ API組み込み・単発決済編
    ○ API組み込み・サブスクリプション編
    ● テスト方法
    2
    JP_Stripes DeepDive 2022/4

    View Slide

  3. 岡本 秀高 ( @hide__dev )
    ● Stripe Developer Advocate
    (ex-developer in Digitalcube)
    ● JavaScript / TypeScript developer
    ● AWS / Next.js / WordPress / etc…
    ● WordCamp Kyoto 2017 / JP_Stripes
    Connect 2019 / AWS Samurai 2017 /
    etc…
    ● 🐈(猫フラご容赦󰢛)
    3
    JP_Stripes DeepDive 2022/4
    #JP_Stripes

    View Slide

  4. コンビニ決済・銀行振込のサポートを開始
    ● コンビニ: 2022/02 GA
    銀行振込: 2022/04 GA
    ● 料金をコンビニ店舗または銀行で決済
    ○ 口座番号やコンビニでの操作方法は
    Stripeが用意するデータ/PDF/メール
    を利用して顧客に案内
    ● 入金の確認や消し込みはStripeが実施
    ● 銀行振込は、Billing / 請求書フォーカス
    ○ 2022/04時点で未対応:
    Payment Links
    Checkout
    Elements
    4
    JP_Stripes DeepDive 2022/4
    #JP_Stripes

    View Slide

  5. 「設定>支払い方法>お客様のアカウント」から有効化(コンビニは審査あり)
    5
    JP_Stripes DeepDive 2022/4

    View Slide

  6. 見当たらない場合、ページ下部の[手動設定ページ]リンクへ
    6
    JP_Stripes DeepDive 2022/4

    View Slide

  7. コンビニ・銀行振込組み込みの注意点
    ● 組み込みにはWebhookが必須
    ○ 「決済されたか」を
    確認する目的
    ● WebhookでStripeからくる
    結果を受け取って処理する
    ● 受け取る必要のあるイベント
    ○ 決済成功
    ○ 決済失敗
    ○ キャンセル
    ● カードでも同じイベントがくるので、
    Webhookベースなシステム構成が
    今後の決済方法追加にも対応しやすい
    7
    JP_Stripes DeepDive 2022/4
    https://github.com/serverless-nextjs/serverless-next.js
    //一回きりの注文系
    if (event.type === 'payment_intent.succeeded') {
    const paymentIntent = event.data.object;
    // 入金が完了したことをシステムに伝える。
    }
     // サブスクリプション系
    if (event.type === 'customer.subscription.updated') {
    const subscription = event.data.object;
    if (subscription.status === "active") {
    // サブスクリプションを開始することを、システムに伝える。
    } else if (subscription.status === "past_due") {
    // 支払いが完了していないことを、システムに伝える。
    }
    }

    View Slide

  8. ノーコード・ローコードの場合は、メール通知を使おう
    8
    JP_Stripes DeepDive 2022/4

    View Slide

  9. Agenda
    ● コンビニ決済・銀行振込入門
    ● 導入篇
    ○ ノーコードで請求書送付編
    ○ API組み込み・単発決済編
    ○ API組み込み・サブスクリプション編
    ● テスト方法
    9
    JP_Stripes DeepDive 2022/4

    View Slide

  10. 請求書(Invoicing)はコンビニ・銀行振込に対応
    ● 支払い方法を手動に設定する
    API: collection_method: 'send_invoice',
    ● [支払いオプションを追加]から
    コンビニ・カード・銀行振込を
    追加・削除が可能
    ● 支払い期日は請求書単位で設定
    決済方法ごとの設定はできない
    ● 確定後は決済方法も増やせない
    複製して編集 + 旧版無効化で対応
    10
    JP_Stripes DeepDive 2022/4
     

    View Slide

  11. 銀行振込: 請求書メール・PDFに口座情報が記載される
    11
    JP_Stripes DeepDive 2022/4

    View Slide

  12. コンビニ決済: 「オンライン支払い」ページを利用
    12
    JP_Stripes DeepDive 2022/4

    View Slide

  13. Payment Linksはコンビニ決済のみ(2022/04時点)
    ● 銀行振込は未対応
    ● [支払い方法]で設定済みならば
    自動で項目が表示される
    ● 支払い方法をリンクごとに
    変更することは現状できない
    ● 個別に変更したい場合は、
    ZapierなどでCheckoutを使おう
    ● [コンビニ] 決済完了画面に飛ばず、
    店舗での支払いガイドに移動する
    13
    JP_Stripes DeepDive 2022/4
     

    View Slide

  14. Agenda
    ● コンビニ決済・銀行振込入門
    ● 導入篇
    ○ ノーコードで請求書送付編
    ○ API組み込み・単発決済編
    ○ API組み込み・サブスクリプション編
    ● テスト方法
    14
    JP_Stripes DeepDive 2022/4

    View Slide

  15. Checkoutもコンビニ決済のみ(2022/04時点)
    ● 銀行振込は未対応
    ● デフォルトは[支払い方法]の設定
    ● Payment_method_typesで
    決済方法を明示的に指定可能
    ● Payment_method_typesで
    ● フォーム処理完了後、
    コンビニでの支払いガイドに移動し、
    success_urlにリダイレクトしない
    15
    JP_Stripes DeepDive 2022/4
     

    View Slide

  16. コンビニ決済: PaymentElementにほぼおまかせ
    ● PaymentIntentを作成、
    PaymentElementにclient_secretを渡す
    ● 有効期限や、
    コンビニで表示される説明文などを
    Intent作成時に設定可能。
    ● PaymentElementなので、
    他の決済方法とのMixも可能
    ● PaymentElementでも、
    店舗での支払いガイドに
    リダイレクトされる
    16
    JP_Stripes DeepDive 2022/4
    https://github.com/serverless-nextjs/serverless-next.js
    const paymentIntent = await stripe.paymentIntents.create({
    amount: 2000,
    currency: 'jpy',
    payment_method_types: ['konbini', 'card'], // なくてもよい
    payment_method_options: {
    konbini: {
    product_description: "Tシャツ", // optional
    expires_after_days: 3,// optional
    }
    }
    })

    View Slide

  17. 銀行振込-1: Payment Intentsにcustomer_idが必須
    ● 口座情報がCustomerに紐づく
    ○ 会員機能が無くても、
    Customerを作ろう
    ● 「どの国の銀行振込か?」の
    指定などで、ちょっと引数多め
    ● 日本円以外の指定はエラーになる
    ● Customerに残高がある場合、
    相殺後の残高が入金額になる
    ● 入金が必要な場合、
    next_actionから口座情報他を取得可能
    17
    JP_Stripes DeepDive 2022/4
    https://github.com/serverless-nextjs/serverless-next.js
    const customer = await stripe.customers.create();
    const intent = await stripe.paymentIntents.create({
    amount: 19000,
    currency: 'jpy',
    customer: customer.id,
    payment_method_types: [ 'customer_balance' ],
    payment_method_data: { type: 'customer_balance' },
    payment_method_options: {
    customer_balance: {
    funding_type: 'bank_transfer',
    bank_transfer: { type: 'jp_bank_transfer' },
    },
    },
    confirm: true,
    });

    View Slide

  18. 銀行振込-2: Elementsを使う場合は専用メソッドを利用
    ● Intent作成時にconfirm:falseを設定
    ● confirmCustomerBalancePayment
    ● Promiseで口座情報などを取得
    ● Elementsを使っていて、
    複数の決済方法をサポートする場合用
    ● PaymentElementsは未対応なので、
    追加実装があることに注意
    18
    JP_Stripes DeepDive 2022/4
    https://github.com/serverless-nextjs/serverless-next.js
    stripe.confirmCustomerBalancePayment(
    pi.client_secret,
    { payment_method: { customer_balance: {}, }, },
    { handleActions: false, },
    ).then(function({error, paymentIntent}) {
    if (error) {
    } else if (paymentIntent.status === 'requires_payment_method') {
    } else if (paymentIntent.status === 'requires_action') {
    if (paymentIntent.next_action.type === 'display_bank_transfer_instructions') {
    }
    }
    });

    View Slide

  19. 入金・支払いの完了はWebhookで処理
    ● コンビニ決済:
    ○ payment_intent.requires_action: 追加のアクションが必要な決済が発生した
    ○ payment_intent.succeeded:   支払いが完了した
    ○ payment_intent.payment_failed: 期日までに支払いが完了しなかった
    ● 銀行振込:
    ○ payment_intent.requires_action: 追加のアクションが必要な決済が発生した
    ○ payment_intent.succeeded:   支払いが完了した
    ○ payment_intent.partially_funded: 入金金額が不足している
    ● イベント名やデータは他の決済方法でも発火するものがほとんど
    ○ カード決済の場合でも、決済成功時にpayment_intent.succeededが発火する
    ● 今後また決済方法が増える時に備えて、Webhookベースのイベント駆動アーキテクチャを
    19
    JP_Stripes DeepDive 2022/4

    View Slide

  20. Agenda
    ● コンビニ決済・銀行振込入門
    ● 導入篇
    ○ ノーコードで請求書送付編
    ○ API組み込み・単発決済編
    ○ API組み込み・サブスクリプション編
    ● テスト方法
    20
    JP_Stripes DeepDive 2022/4

    View Slide

  21. コンビニ決済はCheckoutで契約可能
    21
    JP_Stripes DeepDive 2022/4
     

    View Slide

  22. 銀行振込: `send_invoice`でサブスクリプションを作成
    ● カード決済では、
    charge_automaticallyを使う
    ○ 支払い方法に応じて、
    引数を変更する処理が必要
    ● 呼び出すAPIは他の決済と同じ
    ● Customerにメールアドレスが
    必須な点に要注意
    22
    JP_Stripes DeepDive 2022/4
    https://github.com/serverless-nextjs/serverless-next.js
    const subscription = await stripe.subscriptions.create({
    customer: '{{CUSTOMER_ID}}',
    items: [{
    price: '{{PRICE_ID}}',
    }],
    collection_method: 'send_invoice',
    days_until_due: 30,
    payment_settings: {
    payment_method_types: ['customer_balance'],
    }
    });

    View Slide

  23. 支払い方法に応じて引数を変えるサンプル
    ● カード決済では、
    charge_automaticallyを使う
    ○ 支払い方法に応じて、
    引数を変更する処理が必要
    ● 呼び出すAPIは他の決済と同じ
    ● Customerにメールアドレスが
    必須な点に要注意
    23
    JP_Stripes DeepDive 2022/4
    https://github.com/serverless-nextjs/serverless-next.js
    const subscriptionCreateParams = {
    customer: customerId,
    items: [{
    price: 'price_xxxxx',
    }],
    collection_method: 'charge_automatically'
    };
    if (paymentMethod === 'bank_transfer') {
    subscriptionCreateParams.collection_method = 'send_invoice';
    subscriptionCreateParams.days_until_due = 30;
    subscriptionCreateParams.payment_settings = {
    payment_method_types: ['customer_balance'],
    }
    }
    const subscription = await stripe.subscriptions.create(subscriptionCreateParams);

    View Slide

  24. コンビニ・銀行振込での「2回目以降の支払い」処理
    ● 2つの決済イベントを確認する
    ○ 1: 初回の支払いが完了したか
    ○ 2: 更新が失敗していないか
    ● Webhookでイベントを拾って処理する
    ● Stripeのリトライを使うなら、右の例
    ● 請求書単位ならば、
    Invoiceのイベントを使う
    ○ 例: 2回目の決済失敗で
    警告メールを別途送信
    24
    JP_Stripes DeepDive 2022/4
    https://github.com/serverless-nextjs/serverless-next.js
    if (event.type === 'customer.subscription.updated') {
    const subscription = event.data.object;
    if (subscription.status === "active") {
    /**
    * 初回の支払いが完了したことを、システムに伝える。
    **/
    } else if (subscription.status === "past_due") {
    /**
    * 支払いが完了していないことを、システムに伝える。
    **/
    }
    }

    View Slide

  25. 検討フェーズでは、テストクロックを活用しよう
    ● サブスクリプションの
    時間経過をテスト
    ● 入金額が多い・少ないケースや
    期日を過ぎてからの振り込みなど
    ● 「テストクロック作成」後に
    顧客とサブスクリプションを作る
    フローなことに注意
    ● APIの場合も、
    Create Customer APIで
    クロックのIDを渡す必要がある
    25
    JP_Stripes DeepDive 2022/4
     
    https://stripe.com/docs/billing/testing/test-clocks

    View Slide

  26. Agenda
    ● コンビニ決済・銀行振込入門
    ● 導入篇
    ○ ノーコードで請求書送付編
    ○ API組み込み・単発決済編
    ○ API組み込み・サブスクリプション編
    ● テスト方法
    26
    JP_Stripes DeepDive 2022/4

    View Slide

  27. 銀行振込: ダッシュボードから残高を更新する
    ● 「振込された」ことにする
    ● ダッシュボードの
    顧客詳細ページから
    ● 「支払い方法」の「追加」から、
    「現金残高に資金を追加」
    ● テスト環境のみなことに注意
    27
    JP_Stripes DeepDive 2022/4
     
    https://stripe.com/docs/payments/bank-transfers/a
    ccept-a-payment#test-your-integration

    View Slide

  28. コンビニ決済: メールアドレスと電話番号を利用
    ● 「決済された」ことにする
    ● メールアドレスのエイリアスと
    電話番号(確認番号)の組み合わせ
    ● 「即座に」と「3分後に」が
    あることに注意
    ○ 在庫管理などのテストで
    3分後もよく使う
    ○ 組み込み開始時は
    即座の方が手早い
    ● こちらもテスト環境限定
    28
    JP_Stripes DeepDive 2022/4
     
    https://stripe.com/docs/payments/konbini/accept-a
    -payment?platform=checkout#test-integration

    View Slide

  29. Stripe CLI or ShellでWebhookイベントをチェック
    ● Stripe listenで
    Webhookイベントを監視
    ● ログイン状態なら、
    Docsサイトからブラウザで
    実行可能
    ● evt_xxxなどのIDクリックで
    ダッシュボードが開いて
    詳細が確認できる
    ● これもテスト環境のみ
    29
    JP_Stripes DeepDive 2022/4
     
    https://stripe.com/docs/stripe-cli?shell=true

    View Slide

  30. こんな使い方も
    ● 受託・制作業務などの請求書を Stripeで発行
    ○ カード・銀行振込をサポートする設定にする
    ● 顧客に請求書をメールまたは PDFを印刷して郵送
    ● メールとStripeダッシュボードで入金管理・消込み
    ○ 入金完了 or 期日超過の通知をメールで受け取る
    ● その他の製品も使って、事務作業や分析を効率化
    ○ Taxを使って消費税の計算や徴収額の計算も自動化
    ○ レポートで全体・顧客・サービスごとの売上などを確認
    ○ Quotesを使って見積書の発行も Stripeで管理
    30
    JP_Stripes DeepDive 2022/4

    View Slide

  31. まとめ
    ● 日本向けの決済方法が2022年春に2つ登場(コンビニ・銀行振込)
    ○ コンビニ決済はほぼ全ての製品・サービスで利用可能
    ○ 銀行振込は請求書・定期課金系以外は今後アップデート予定
    ● 基本的な処理の流れは他の決済方法と同じ
    ○ 「決済失敗・成功」はWebhookで検知・処理する
    ● コード詳細などはQiitaのStripeタグまたはStripeをフォロー
    https://qiita.com/organizations/stripe
    31
    JP_Stripes DeepDive 2022/4

    View Slide