JavaScript
Rails

Omise APIについて

More than 1 year has 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コマンドを用いて操作ができるため、非常に技術者に優しい、使いやすいものとなっている。