決済サービス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コマンドを用いて操作ができるため、非常に技術者に優しい、使いやすいものとなっている。