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を利用してオンラインビジネスを始める方法について週に２〜３本ペースで更新中です。

-> Stripe Organizationsをフォローして最新情報をQiitaで受け取る