決済サービスOmiseのAPIであるOmise APIについて、幾つか要点を上げて述べていく。

フォームの作成

こんな感じで作る。


<html>
  <header></header>
  <body>
    <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("pkey_test_55xm81wcjy2bukdnipx");
    </script>
    <form action="/Users/sugano-k/Develop/Omise/learning-jquery/checkout.html" method="post" id="checkout">
      <div id="token_errors"></div>
      <input type="hidden" name="omise_token">
      <div>
      Name<br>
        <input type="text" data-omise="holder_name" value="KEI SUGANO">
      </div>
      <div>
        Number<br>
        <input type="text" data-omise="number" value="4242424242424242">
      </div>
      <div>
        Date<br>
        <input type="text" data-omise="expiration_month" size="4" value="09"> /
        <input type="text" data-omise="expiration_year" size="8" value="2020">
      </div>
      <div>
        Security Code<br>
        <input type="text" data-omise="security_code" size="8" value="111">
      </div>
      <input type="submit" id="create_token">
    </form>
    <script>

      function isCardInvalid(response){
        return (isResponseObjectError(response) || !response.card.security_code_check);
      }

      function isResponseObjectError(response){
        return (response.object == "error");
      }

      function getMessage(response, isError){
        return isError ? response.message : "SET YOUR SECURITY CODE CHECK FAILED MESSAGE"; 
      }

      function setForm(response){
        if (isCardInvalid(response)) {
          // Display an error message.
          $("#token_errors").html(getMessage(response, isResponseObjectError(response)));
          // Re-enable the submit button.
          form.find("input[type=submit]").prop("disabled", false);
        } else {
          // Then fill the omise_token.
          form.find("[name=omise_token]").val(response.id);
          // Remove card number from form before submiting to server.
          form.find("[data-omise=number]").val("");
          form.find("[data-omise=security_code]").val("");
          // submit token to server.
          form.get(0).submit();
        }
        return form;
      }

      function applyTryCatch(func, args, message, somethingToReturn){
        try{
          func(args[0], args[1], args[2]);
          return somethingToReturn;
        } catch(err) {
          alert(message);
        }
      }

      $("#checkout").submit(function () {
        var form = $(this);
        // Disable the submit button to avoid repeated click.
        form.find("input[type=submit]").prop("disabled", true);
        // Serialize the form fields into a valid card object.
        var card = {
          "name": form.find("[data-omise=holder_name]").val(),
          "number": form.find("[data-omise=number]").val(),
          "expiration_month": form.find("[data-omise=expiration_month]").val(),
          "expiration_year": form.find("[data-omise=expiration_year]").val(),
          "security_code": form.find("[data-omise=security_code]").val()
        };
        return (applyTryCatch(Omise.createToken, ["card", card, setForm(response)], "transaction failed", false));
      });

    </script>
  </body>
</html>

クレジットカードのトークンの作成

一連の流れ

顧客が加盟店のサイトにアクセスをして、クレジットカードの情報を入力
(加盟店のサイトにはOmise.jsが組み込まれている）
Omise.jsが、顧客の直接入力したクレジットカード情報を、使い捨てのトークンに変換する。
使い捨てのトークンが、Omiseのサーバーに送られる。
Omiseがトークンを復号化し、顧客のカード情報を取得。

メリット

加盟店が顧客のクレジットカードに触らず（管理せず）に済む。
トークンは使い捨て（そのセッションでしか使用しない一回きりのもの）であるため、
仮にOmiseに送信時に漏洩したとしても、顧客のカード情報は流出しない。

課金　

Charge API を使用する
前項でOmiseに登録されたトークンは顧客情報と紐付いており、
一番初めの課金はトークンによって行われる (それ以降はトークンは使用できなくなり、顧客IDによって課金を行う。)
顧客IDのみであれば顧客のデフォルトのクレジットカードに課金がされる。
顧客IDとそれに紐づく特定のカードIDの双方を使用すると、特定のカードIDによって顧客に課金ができる。
クレジットカードと顧客情報の紐付けは、Customer というAPIによって行う。
課金に失敗した場合には、エラーコードが返却される。

一番初めの課金の例

curl https://api.omise.co/charges \
  -X POST \
  -u skey_test_4xsjvwfnvb2g0l81sjz: \
  -d "amount=100000" \
  -d "currency=thb" \
  -d “card=[ここにトークンIDを入力する]”

顧客IDのみの課金の例

curl https://api.omise.co/charges \
  -X POST \
  -u skey_test_4xsjvwfnvb2g0l81sjz: \
  -d "amount=100000" \
  -d "currency=thb" \
  -d “customer=[ここに顧客IDを入力する]”

顧客IDと、特定のカードIDの組み合わせの例

curl https://api.omise.co/charges \
  -X POST \
  -u skey_test_4xsjvwfnvb2g0l81sjz: \
  -d "amount=100000" \
  -d "currency=thb" \
  -d “customer=[ここに顧客IDを入力する]"
  -d “card=[ここにトークンIDを入力する]”

以上、Omise APIのフォームの作成方法と課金の流れについて記述を行った。
上記からわかるように、自社のサイトにJavaScript(Omise.js)を組み込むだけで使えるのと、curlコマンドを用いて操作ができるため、非常に技術者に優しい、使いやすいものとなっている。