【React】react-credit-cardsでおしゃれなクレジット情報入力フォームを作る

2021-06-08

Content

はじめに
概要
react-credit-cards のインストール
react-credit-cards の使用方法
ソースとデモ
まとめ

はじめに

おはようございます！こんにちは！こんばんは！
のふのふ(@rpf_nob)と申します！！都内のスタートアップでフロントエンドエンジニアとして働いています。

今回は React アプリケーションにおしゃれなクレジット情報入力フォームを作ることができる react-credit-cards という便利なライブラリを紹介します！！

概要
react-credit-cards のインストール
react-credit-cards の使用方法
ソースとデモ
まとめ

概要

React 用のおしゃれにクレジットカードを表示するコンポーネントです。

以下公式の README.md に使用方法が説明されていますので詳細はこちらを見てください。

react-credit-cards のインストール

お好きなほうでインストールしてください。

npm install --save react-credit-cards
or
yarn add react-credit-cards

react-credit-cards の使用方法

入力フォームを作る

まず普通にカード番号、名前、有効期限、セキュリティコードを入力するためのフォームを作成します。 useStateで入力の状態を管理して、onChangeで状態を更新する React の基本的な実装です。

import { useState } from "react";

export default function App() {
  const [number, setNumber] = useState("");
  const [name, setName] = useState("");
  const [expiry, setExpiry] = useState("");
  const [cvc, setCvc] = useState("");

  return (
    <div className="App">
      <form>
        <input
          type="tel"
          name="number"
          placeholder="Card Number"
          value={number}
          onChange={(e) => setNumber(e.target.value)}
        />
        <input
          type="text"
          name="name"
          placeholder="Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <input
          type="text"
          name="expiry"
          placeholder="MM/YY"
          value={expiry}
          onChange={(e) => setExpiry(e.target.value)}
        />
        <input
          type="tel"
          name="cvc"
          placeholder="CVC"
          value={cvc}
          onChange={(e) => setCvc(e.target.value)}
        />
      </form>
    </div>
  );
}

どのフォームにフォーカスが当たっているかを管理する

focusという状態を作成して、それぞれの入力フォームにフォーカスが当たった時に入力フォームの名前を保存します。

import { useState } from "react";

export default function App() {
  const [number, setNumber] = useState("");
  const [name, setName] = useState("");
  const [expiry, setExpiry] = useState("");
  const [cvc, setCvc] = useState("");
  const [focus, setFocus] = useState("");
  return (
    <div className="App">
      <form>
        <input
          type="tel" name="number" placeholder="Card Number" value={number}
          onChange={(e) => setNumber(e.target.value)}
          onFocus={(e) => setFocus(e.target.name)}        />
        <input
          type="text" name="name" placeholder="Name" value={name}
          onChange={(e) => setName(e.target.value)}
          onFocus={(e) => setFocus(e.target.name)}        />
        <input
          type="text" name="expiry" placeholder="MM/YY" value={expiry}
          onChange={(e) => setExpiry(e.target.value)}
          onFocus={(e) => setFocus(e.target.name)}        />
        <input
          type="tel" name="cvc" placeholder="CVC" value={cvc}
          onChange={(e) => setCvc(e.target.value)}
          onFocus={(e) => setFocus(e.target.name)}        />
      </form>
    </div>
  );
}

カードコンポーネントを設置する

react-credit-cardsから Cards コンポーネントと CSS ファイルをインポートして、Cards コンポーネントを表示したい箇所に設置します。 props で各入力フォームの状態とフォーカスしている入力フォームの名前を渡してあげます。

import { useState } from "react";
import Cards from "react-credit-cards";import "react-credit-cards/es/styles-compiled.css";
export default function App() {
  const [number, setNumber] = useState("");
  const [name, setName] = useState("");
  const [expiry, setExpiry] = useState("");
  const [cvc, setCvc] = useState("");
  const [focus, setFocus] = useState("");

  return (
    <div className="App">
      <Cards        number={number}        name={name}        expiry={expiry}        cvc={cvc}        focused={focus}      />      <form>
        <input
          type="tel" name="number" placeholder="Card Number" value={number}
          onChange={(e) => setNumber(e.target.value)}
          onFocus={(e) => setFocus(e.target.name)}
        />
        <input
          type="text" name="name" placeholder="Name" value={name}
          onChange={(e) => setName(e.target.value)}
          onFocus={(e) => setFocus(e.target.name)}
        />
        <input
          type="text" name="expiry" placeholder="MM/YY" value={expiry}
          onChange={(e) => setExpiry(e.target.value)}
          onFocus={(e) => setFocus(e.target.name)}
        />
        <input
          type="tel" name="cvc" placeholder="CVC" value={cvc}
          onChange={(e) => setCvc(e.target.value)}
          onFocus={(e) => setFocus(e.target.name)}
        />
      </form>
    </div>
  );
}

ソースとデモ

下の Codesandbox でソースと動きを確認できて、以下のような動きが確認できるので触ってみてください。

入力フォームに情報を入力していくとカードにも反映されていきます
カード番号の頭 1,2 文字でカード会社が識別できるので、それを元にカードの見た目も変化します
セキュリティコードは裏面にあるのでフォーカスがセキュリティコード入力欄に当たると、カードが裏面になります

まとめ

今回は React アプリケーションにおしゃれなクレジット情報入力フォームを作ることができる react-credit-cards という便利なライブラリを紹介しました！！

クレジットカード情報を入力する必要があった場合に今後使ってみたいと思います！

今後も便利な React のライブラリなどを紹介していきたいと思います！！よろしければまた見てください！！！

最後まで見ていただきありがとうございます！！この記事が良かったと思ったら SHARE していただけると泣いて喜びます 🤣

Content[Close]