Help us understand the problem. What is going on with this article?

Omise APIについて

More than 3 years have passed since last update.

決済サービス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>

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

一連の流れ
  1. 顧客が加盟店のサイトにアクセスをして、クレジットカードの情報を入力 (加盟店のサイトにはOmise.jsが組み込まれている)
  2. Omise.jsが、顧客の直接入力したクレジットカード情報を、使い捨てのトークンに変換する。
  3. 使い捨てのトークンが、Omiseのサーバーに送られる。
  4. 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コマンドを用いて操作ができるため、非常に技術者に優しい、使いやすいものとなっている。

omise
オンライン決済サービスを提供している企業です
https://www.omise.co/ja
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away