![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F34a1de7a-adb3-4ac5-acd2-65c39adcabb2?alt=media&token=3eb13320-3050-4a38-ac89-d54022be36dd)
# はじめに
銀行口座登録機能は、給与支払いや振込サービスを提供するアプリケーションにおいて欠かせない要素です。
本記事では、ReactとStripeを活用して、銀行口座を登録・管理する機能の実装手法を解説します。UI構築、バックエンド連携、セキュリティ面での注意点に触れながら進めていきます。

# 実装の概要
以下の機能を実現するためのコードを詳しく説明します。

* 銀行口座登録モーダル: ユーザーが銀行名や口座番号を入力するUI。
* 銀行マスターデータの取得とフィルタリング: 銀行名や支店名の候補を自動補完。
* Stripeを利用した口座情報の登録: Stripe APIを活用して口座情報を保存。
* 登録済み口座の表示: 登録された銀行口座の情報を確認するUI。

# 必要なライブラリ
以下のライブラリをプロジェクトに追加します。

![img](/mosaic-code.jpg)

また、Stripe APIを使用するために、以下もインストールします。

![img](/mosaic-code.jpg)

# 実装手順
1. 銀行口座登録モーダルの構築
以下は、銀行口座登録用のモーダルコンポーネントです。

![img](/mosaic-code.jpg)

## 2. 銀行マスターデータの取得とフィルタリング
BankAccountStoreを使用して銀行マスターデータを管理します。

![img](/mosaic-code.jpg)

## 3. Stripe APIとの連携
StripeのカスタムAPIを使用して、銀行口座情報を保存します。

![img](/mosaic-code.jpg)
![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F34a1de7a-adb3-4ac5-acd2-65c39adcabb2?alt=media&token=3eb13320-3050-4a38-ac89-d54022be36dd)

# まとめ
銀行口座登録機能の実装は、ユーザーエクスペリエンスを向上させ、ビジネスの信頼性を高める重要な役割を果たします。本記事で解説した方法を参考に、安全かつ効率的な銀行口座登録機能を実現してください。

# ポイントの振り返り
* UI/UX: 使いやすいモーダルとフォーム設計。
* データ管理: 銀行マスターデータの取得と動的フィルタリング。
* セキュリティ: Stripeを利用した安全なデータ保存。

これらを適切に組み合わせることで、ユーザーに信頼されるサービスを提供できます！

![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F34a1de7a-adb3-4ac5-acd2-65c39adcabb2?alt=media&token=3eb13320-3050-4a38-ac89-d54022be36dd)
# はじめに
銀行口座登録機能は、給与支払いや振込サービスを提供するアプリケーションにおいて欠かせない要素です。
本記事では、ReactとStripeを活用して、銀行口座を登録・管理する機能の実装手法を解説します。UI構築、バックエンド連携、セキュリティ面での注意点に触れながら進めていきます。

# 実装の概要
以下の機能を実現するためのコードを詳しく説明します。

* 銀行口座登録モーダル: ユーザーが銀行名や口座番号を入力するUI。
* 銀行マスターデータの取得とフィルタリング: 銀行名や支店名の候補を自動補完。
* Stripeを利用した口座情報の登録: Stripe APIを活用して口座情報を保存。
* 登録済み口座の表示: 登録された銀行口座の情報を確認するUI。

# 必要なライブラリ
以下のライブラリをプロジェクトに追加します。

```bash
npm install @material-ui/core @material-ui/lab react-hook-form
```

また、Stripe APIを使用するために、以下もインストールします。

```bash
npm install @stripe/react-stripe-js
```

# 実装手順
1. 銀行口座登録モーダルの構築
以下は、銀行口座登録用のモーダルコンポーネントです。

```tsx
import React, { useState, useEffect, useContext } from 'react';
import {
  Typography,
  Button,
  TextField,
  Dialog,
  DialogContent,
  DialogTitle,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableRow,
} from '@material-ui/core';
import { useForm, Controller, SubmitHandler } from 'react-hook-form';
import { useBankAccountStore } from 'src/store/BankAccountStore';
import ModalContext from 'src/hooks/ModalContext';

type Inputs = {
  bankName: string;
  branchName: string;
  accountHolderName: string;
  accountNumber: string;
};

export default function BankAccountModal() {
  const {
    displayBankMasters,
    update,
    loadBankAccount,
    displayStripeBankAccountResponse,
  } = useBankAccountStore();
  const [disabledSubmit, setDisabledSubmit] = useState(false);
  const modal = useContext(ModalContext);

  const {
    handleSubmit,
    control,
    formState: { errors },
  } = useForm<Inputs>();

  useEffect(() => {
    loadBankAccount('user-id-placeholder');
  }, []);

  const onSubmit: SubmitHandler<Inputs> = async (data) => {
    setDisabledSubmit(true);
    try {
      await update('user-id-placeholder', data);
    } catch (e) {
      console.error('Error updating bank account:', e);
    }
    setDisabledSubmit(false);
    modal.setBankAccountModal(false);
  };

  return (
    <Dialog open={modal.bankAccountModal} onClose={() => modal.setBankAccountModal(false)}>
      <DialogTitle>銀行口座の登録</DialogTitle>
      <DialogContent>
        <Typography variant="body1">銀行口座情報を入力してください。</Typography>
        {displayStripeBankAccountResponse && (
          <>
            <Typography variant="body2">登録済みの口座情報:</Typography>
            <TableContainer>
              <Table>
                <TableBody>
                  <TableRow>
                    <TableCell>口座名義</TableCell>
                    <TableCell>{displayStripeBankAccountResponse.accountHolderName}</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell>口座番号</TableCell>
                    <TableCell>***{displayStripeBankAccountResponse.last4}</TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </TableContainer>
          </>
        )}
        <form onSubmit={handleSubmit(onSubmit)}>
          <Controller
            name="bankName"
            control={control}
            rules={{ required: '銀行名を入力してください' }}
            render={({ field }) => (
              <TextField
                label="銀行名"
                {...field}
                error={!!errors.bankName}
                helperText={errors.bankName?.message}
              />
            )}
          />
          <Controller
            name="branchName"
            control={control}
            rules={{ required: '支店名を入力してください' }}
            render={({ field }) => (
              <TextField
                label="支店名"
                {...field}
                error={!!errors.branchName}
                helperText={errors.branchName?.message}
              />
            )}
          />
          <Controller
            name="accountHolderName"
            control={control}
            rules={{ required: '口座名義を入力してください' }}
            render={({ field }) => (
              <TextField
                label="口座名義"
                {...field}
                error={!!errors.accountHolderName}
                helperText={errors.accountHolderName?.message}
              />
            )}
          />
          <Controller
            name="accountNumber"
            control={control}
            rules={{ required: '口座番号を入力してください' }}
            render={({ field }) => (
              <TextField
                label="口座番号"
                {...field}
                error={!!errors.accountNumber}
                helperText={errors.accountNumber?.message}
              />
            )}
          />
          <Button type="submit" variant="contained" color="primary" disabled={disabledSubmit}>
            登録
          </Button>
        </form>
      </DialogContent>
    </Dialog>
  );
}
```

## 2. 銀行マスターデータの取得とフィルタリング
BankAccountStoreを使用して銀行マスターデータを管理します。

```tsx
import { useState } from 'react';
import { BankMaster } from 'src/domain/bankMaster';

export const useBankAccountStore = () => {
  const [displayBankMasters, setDisplayBankMasters] = useState<BankMaster[]>([]);

  const loadBankMasters = async () => {
    // 銀行マスターデータの取得
    const data = await fetch('/api/bankMasters').then((res) => res.json());
    setDisplayBankMasters(data);
  };

  return { displayBankMasters, loadBankMasters };
};
```

## 3. Stripe APIとの連携
StripeのカスタムAPIを使用して、銀行口座情報を保存します。

```tsx
export const updateBankAccount = async (userId: string, data: Inputs) => {
  const response = await fetch('/api/updateBankAccount', {
    method: 'POST',
    body: JSON.stringify({ userId, ...data }),
    headers: { 'Content-Type': 'application/json' },
  });

  if (!response.ok) {
    throw new Error('Failed to update bank account');
  }
};
```
![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F34a1de7a-adb3-4ac5-acd2-65c39adcabb2?alt=media&token=3eb13320-3050-4a38-ac89-d54022be36dd)

# まとめ
銀行口座登録機能の実装は、ユーザーエクスペリエンスを向上させ、ビジネスの信頼性を高める重要な役割を果たします。本記事で解説した方法を参考に、安全かつ効率的な銀行口座登録機能を実現してください。

# ポイントの振り返り
* UI/UX: 使いやすいモーダルとフォーム設計。
* データ管理: 銀行マスターデータの取得と動的フィルタリング。
* セキュリティ: Stripeを利用した安全なデータ保存。

これらを適切に組み合わせることで、ユーザーに信頼されるサービスを提供できます！

はじめに

続きを読むには単価診断を受けてください（30秒）