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

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

View Slide

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

View Slide

岡本秀高 ( @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

View Slide

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

View Slide

「設定>支払い方法>お客様のアカウント」から有効化（コンビニは審査あり）
5

View Slide

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

View Slide

コンビニ・銀行振込組み込みの注意点
● 組み込みにはWebhookが必須
○ 「決済されたか」を
確認する目的
● WebhookでStripeからくる
結果を受け取って処理する
● 受け取る必要のあるイベント
○ 決済成功
○ 決済失敗
○ キャンセル
● カードでも同じイベントがくるので、
Webhookベースなシステム構成が
今後の決済方法追加にも対応しやすい
7
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

View Slide

Agenda
● 導入篇
● テスト方法
9

View Slide

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

View Slide

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

View Slide

コンビニ決済: 「オンライン支払い」ページを利用
12

View Slide

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

View Slide

Agenda
● 導入篇
● テスト方法
14

View Slide

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

View Slide

コンビニ決済: PaymentElementにほぼおまかせ
● PaymentIntentを作成、
PaymentElementにclient_secretを渡す
● 有効期限や、
コンビニで表示される説明文などを
Intent作成時に設定可能。
● PaymentElementなので、
他の決済方法とのMixも可能
● PaymentElementでも、
店舗での支払いガイドに
リダイレクトされる
16
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

銀行振込-1: Payment Intentsにcustomer_idが必須
● 口座情報がCustomerに紐づく
○ 会員機能が無くても、
Customerを作ろう
● 「どの国の銀行振込か？」の
指定などで、ちょっと引数多め
● 日本円以外の指定はエラーになる
● Customerに残高がある場合、
相殺後の残高が入金額になる
● 入金が必要な場合、
next_actionから口座情報他を取得可能
17
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' },
},
},
conﬁrm: true,
});

View Slide

銀行振込-2: Elementsを使う場合は専用メソッドを利用
● Intent作成時にconfirm:falseを設定
● confirmCustomerBalancePayment
● Promiseで口座情報などを取得
● Elementsを使っていて、
複数の決済方法をサポートする場合用
● PaymentElementsは未対応なので、
追加実装があることに注意
18
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

入金・支払いの完了は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

View Slide

Agenda
● 導入篇
● テスト方法
20

View Slide

コンビニ決済はCheckoutで契約可能
21
　

View Slide

銀行振込: `send_invoice`でサブスクリプションを作成
● カード決済では、
charge_automaticallyを使う
○ 支払い方法に応じて、
引数を変更する処理が必要
● 呼び出すAPIは他の決済と同じ
● Customerにメールアドレスが
必須な点に要注意
22
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

支払い方法に応じて引数を変えるサンプル
● カード決済では、
charge_automaticallyを使う
○ 支払い方法に応じて、
引数を変更する処理が必要
● 呼び出すAPIは他の決済と同じ
● Customerにメールアドレスが
必須な点に要注意
23
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

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

View Slide

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

View Slide

Agenda
● 導入篇
● テスト方法
26

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

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

Hidetaka Okamoto (Stripe)

More Decks by Hidetaka Okamoto (Stripe)

Other Decks in Programming

Featured

Transcript

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

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

Hidetaka Okamoto (Stripe)

More Decks by Hidetaka Okamoto (Stripe)

Other Decks in Programming

Featured

Transcript

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

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