【React】Omise.jsでカード情報を登録

こんにちは。
ECサイトを開発していて決済を実装するためにOmiseというapiを使う機会がありました。
カード情報を登録するにあたってReactで実装するのに苦労したのでメモです。
フォームはドキュメントにサンプルがあったので参考にしてみてください。

Omise.jsとは

Omise.jsはクライアントサイドのJavaSciprtライブラリで、クレジットカードの情報をトークン化するために利用します。 ユーザーが決済フォームへ情報を入力し、フォームのSubmitのタイミングでOmise.jsが決済フォームの情報をOmiseのサーバーへ送信し、トークンを作成して取得します。取得したトークンは、あなたの決済フォームで送信されますので、あなたのサーバーサイドでは、そのトークンを利用し決済の処理を実行できます。引用：https://www.omise.co/ja/collecting-card-information/japan

使い方

まずindex.htmlファイルのbodyタグ内に下記を追加します。
jQueryが必要だったり、Omise.jsからOmise APIに対して認証ができるように自身のパブリックキーを追加します。

<script src="https://cdn.omise.co/omise.js"></script>
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script>Omise.setPublicKey("発行したパブリックキー");</script>

トークン作成

カード情報の送信先がサーバーへ行かないようにします。

Card.js

class Card extends React.Component {
  constructor() {
  super();
  this.state = {
    params: {
        name: '',
        number: '',
        expiration_month: '',
        expiration_year: '',
        cvc: ''
      },
    omiseError: "",
  }
  
  handleSubmit = () => {
    let card = {
      name: this.state.params.name,
      number: this.state.params.number,
      expiration_month: this.state.params.expiration_month,
      expiration_year: this.state.params.expiration_year,
      security_code: this.state.params.cvc
    };
    this.postOmise(card);
  };

  postOmise = card => {
    const { Omise } = window;  // この記述がないとOmiseを読み込めずエラーになる。
    Omise.createToken('card', card, (statusCode, response) =>
      this.editCardToken(response)
    );
  };

  editCardToken = response => {
    if (response.object === 'error') {
      this.setState({
        omiseError: '無効なカードです。入力内容を確認してください。'
      });
      return;
    }
    if (!response.card.security_code_check) {
      this.setState({ omiseError: 'セキュリティコードが違います' });
      return;
    }
    this.createCard(response);
  };

  //userテーブルのtokenカラムにid（テスト環境では"cust_test_hogehoge"が返ってくる）を保存
  createCard = (response) => {
    axios
      .post('/card_token', {
        token: response.id
      })
      .then(() => {
        window.alert(`カード情報を登録しました！`);
      })
      .catch(error => {
        console.log(error);
      });
  };
}

JavaScriptのドキュメントを参考にしながら、実装したけどOmiseが読み込めなかったり、コールバックでthisが使えなくなったりして、非常に詰みましたが、関数をうまく切り分けてなんとか行けました。
あとは、名義人、カード番号、有効期限の月、年、セキュリティコードのフォームを作成し、登録ボタンを押したタイミングでhandleSubmitが動くようにすれば、カード情報の登録ができるようになると思います。
後日、決済についてはGoの処理を書く予定です。