システムやデザインの要件によっては、Stripeが提供する決済フォームを利用できないケースも存在します。
その場合に、銀行振込での決済を受け付ける方法を、JavaScriptで簡単に紹介します。
Step1: 銀行振込に対応したPayment Intentを作成する
Stripeで1回きりの決済を受け付ける場合、Payment Intentをサーバー側の処理で作成します。
この際に、「Stripeが発行する振込先口座情報を紐づけるための顧客データ」など、銀行振込での決済に必要な情報を設定しましょう。
const createBankTransferPaymentIntent = async (email, amount) => {
const customer = await stripe.customers.create({
email,
});
const intent = await stripe.paymentIntents.create({
amount,
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,
});
return {
nextAction: intent.next_action,
};
})
// 使い方
const { nextAction } = await createBankTransferPaymentIntent('test@example.com', 1000)
この関数を、ExpressやAWS Lambda + API Gatewayなどで利用し、サーバー側の処理を実装しましょう。
Step2: 振込先口座情報を、ユーザーに表示する
先程の関数を利用したAPIが用意できれば、あとは顧客に振込先口座情報を表示するUIを用意するだけです。
// API呼び出し
const response = await fetch('/api/payment/bank_transfer', {
method: "POST",
headers: {
'Content-Type': 'application/json',
},
}).then(data => data.json());
if (response.nextAction && response.nextAction.display_bank_transfer_instructions) {
const displayBankTransferInstructions = response.nextAction.display_bank_transfer_instructions;
// <div id="bank-transfer-instructions"></div>に決済情報を表示
const messageElement = document.getElementById('bank-transfer-instructions');
messageElement.innerHTML = `<p>振込先情報</p>
<dl>
<dt><b>入金額</b></dt>
<dd>
${displayBankTransferInstructions.amount_remaining.toLocaleString()}
${' '}
${displayBankTransferInstructions.currency.toUpperCase()}
</dd>
<dt><b>振込先情報</b></dt>
<dd>
${displayBankTransferInstructions.financial_addresses[0].zengin.bank_name} (${displayBankTransferInstructions.financial_addresses[0].zengin.bank_code}) <br />
${displayBankTransferInstructions.financial_addresses[0].zengin.branch_name} (${displayBankTransferInstructions.financial_addresses[0].zengin.branch_code})${' '}
<br />
${displayBankTransferInstructions.financial_addresses[0].zengin.account_type === 'futsu'
? '普通預金'
: '当座預金'}: ${displayBankTransferInstructions.financial_addresses[0].zengin.account_number} <br />
${displayBankTransferInstructions.financial_addresses[0].zengin.account_holder_name}
</dd>
</dl>`;
}
自動応答メールやチャットボットなどでも利用可能です
この方法は、ElementsやCheckoutが利用できるWeb・ネイティブアプリではあまり出番がないかもしれません。
ですが、LINEなどのチャットボットや自動応答のメールなどでは、有効的です。
より便利になったStripeの銀行振込機能を、ぜひさまざまなユースケースでお試しください。
[PR] Stripe開発者向け情報をQiitaにて配信中！
- [Stripe Updates]：開発者向けStripeアップデート紹介・解説
- ユースケース別のStripe製品や実装サンプルの紹介
- Stripeと外部サービス・OSSとの連携方法やTipsの紹介
- 初心者向けのチュートリアル(予定)
など、Stripeを利用してオンラインビジネスを始める方法について週に２〜３本ペースで更新中です。