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

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

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

Transcript

1. Stripeでクレカ決済に加えて、 コンビニ決済/銀行振込を追加する JP_Stripes DeepDive 2022/4 岡本秀高 (@hide__dev) 2022/04 #Stripe #JP_Stripes
2. Agenda • コンビニ決済・銀行振込入門 • 導入篇 ◦ ノーコードで請求書送付編 ◦ API組み込み・単発決済編 ◦ API組み込み・サブスクリプション編 • テスト方法 2 JP_Stripes DeepDive 2022/4
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
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
5. 「設定>支払い方法>お客様のアカウント」から有効化（コンビニは審査あり） 5 JP_Stripes DeepDive 2022/4
6. 見当たらない場合、ページ下部の[手動設定ページ]リンクへ 6 JP_Stripes DeepDive 2022/4
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") { // 支払いが完了していないことを、システムに伝える。 } }
8. ノーコード・ローコードの場合は、メール通知を使おう 8 JP_Stripes DeepDive 2022/4
9. Agenda • コンビニ決済・銀行振込入門 • 導入篇 ◦ ノーコードで請求書送付編 ◦ API組み込み・単発決済編 ◦ API組み込み・サブスクリプション編 • テスト方法 9 JP_Stripes DeepDive 2022/4
10. 請求書(Invoicing)はコンビニ・銀行振込に対応 • 支払い方法を手動に設定する API: collection_method: 'send_invoice', • [支払いオプションを追加]から コンビニ・カード・銀行振込を 追加・削除が可能 • 支払い期日は請求書単位で設定 決済方法ごとの設定はできない • 確定後は決済方法も増やせない 複製して編集 + 旧版無効化で対応 10 JP_Stripes DeepDive 2022/4 　
11. 銀行振込: 請求書メール・PDFに口座情報が記載される 11 JP_Stripes DeepDive 2022/4
12. コンビニ決済: 「オンライン支払い」ページを利用 12 JP_Stripes DeepDive 2022/4
13. Payment Linksはコンビニ決済のみ(2022/04時点) • 銀行振込は未対応 • [支払い方法]で設定済みならば 自動で項目が表示される • 支払い方法をリンクごとに 変更することは現状できない • 個別に変更したい場合は、 ZapierなどでCheckoutを使おう • [コンビニ] 決済完了画面に飛ばず、 店舗での支払いガイドに移動する 13 JP_Stripes DeepDive 2022/4 　
14. Agenda • コンビニ決済・銀行振込入門 • 導入篇 ◦ ノーコードで請求書送付編 ◦ API組み込み・単発決済編 ◦ API組み込み・サブスクリプション編 • テスト方法 14 JP_Stripes DeepDive 2022/4
15. Checkoutもコンビニ決済のみ(2022/04時点) • 銀行振込は未対応 • デフォルトは[支払い方法]の設定 • Payment_method_typesで 決済方法を明示的に指定可能 • Payment_method_typesで • フォーム処理完了後、 コンビニでの支払いガイドに移動し、 success_urlにリダイレクトしない 15 JP_Stripes DeepDive 2022/4 　
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 } } })
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, });
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') { } } });
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
20. Agenda • コンビニ決済・銀行振込入門 • 導入篇 ◦ ノーコードで請求書送付編 ◦ API組み込み・単発決済編 ◦ API組み込み・サブスクリプション編 • テスト方法 20 JP_Stripes DeepDive 2022/4
21. コンビニ決済はCheckoutで契約可能 21 JP_Stripes DeepDive 2022/4 　
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'], } });
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);
24. コンビニ・銀行振込での「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") { /** * 支払いが完了していないことを、システムに伝える。 **/ } }
25. 検討フェーズでは、テストクロックを活用しよう • サブスクリプションの 時間経過をテスト • 入金額が多い・少ないケースや 期日を過ぎてからの振り込みなど • 「テストクロック作成」後に 顧客とサブスクリプションを作る フローなことに注意 • APIの場合も、 Create Customer APIで クロックのIDを渡す必要がある 25 JP_Stripes DeepDive 2022/4 　 https://stripe.com/docs/billing/testing/test-clocks
26. Agenda • コンビニ決済・銀行振込入門 • 導入篇 ◦ ノーコードで請求書送付編 ◦ API組み込み・単発決済編 ◦ API組み込み・サブスクリプション編 • テスト方法 26 JP_Stripes DeepDive 2022/4
27. 銀行振込: ダッシュボードから残高を更新する • 「振込された」ことにする • ダッシュボードの 顧客詳細ページから • 「支払い方法」の「追加」から、 「現金残高に資金を追加」 • テスト環境のみなことに注意 27 JP_Stripes DeepDive 2022/4 　 https://stripe.com/docs/payments/bank-transfers/a ccept-a-payment#test-your-integration
28. コンビニ決済: メールアドレスと電話番号を利用 • 「決済された」ことにする • メールアドレスのエイリアスと 電話番号（確認番号）の組み合わせ • 「即座に」と「3分後に」が あることに注意 ◦ 在庫管理などのテストで 3分後もよく使う ◦ 組み込み開始時は 即座の方が手早い • こちらもテスト環境限定 28 JP_Stripes DeepDive 2022/4 　 https://stripe.com/docs/payments/konbini/accept-a -payment?platform=checkout#test-integration
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
30. こんな使い方も • 受託・制作業務などの請求書を Stripeで発行 ◦ カード・銀行振込をサポートする設定にする • 顧客に請求書をメールまたは PDFを印刷して郵送 • メールとStripeダッシュボードで入金管理・消込み ◦ 入金完了 or 期日超過の通知をメールで受け取る • その他の製品も使って、事務作業や分析を効率化 ◦ Taxを使って消費税の計算や徴収額の計算も自動化 ◦ レポートで全体・顧客・サービスごとの売上などを確認 ◦ Quotesを使って見積書の発行も Stripeで管理 30 JP_Stripes DeepDive 2022/4
31. まとめ • 日本向けの決済方法が2022年春に２つ登場（コンビニ・銀行振込） ◦ コンビニ決済はほぼ全ての製品・サービスで利用可能 ◦ 銀行振込は請求書・定期課金系以外は今後アップデート予定 • 基本的な処理の流れは他の決済方法と同じ ◦ 「決済失敗・成功」はWebhookで検知・処理する • コード詳細などはQiitaのStripeタグまたはStripeをフォロー https://qiita.com/organizations/stripe 31 JP_Stripes DeepDive 2022/4