決済を行う

このページで扱うトピック

Opn Payments、ライブラリ、SDK(iOS, Android)、プラグインを提供しています。

ここではOpn PaymentsのAPIの基本となる

  • クレジットカード情報を代替するトークンを作成する
  • Omise.jsとは

という2つの操作について紹介します。

クレジットカード情報の代替トークンを作成する

ECサイトやウェブサービスのサーバで直接クレジットカード情報を取り扱うことで、情報漏洩時のリスクが増大します。

Opn Paymentsでは安全なカード決済の仕組みを簡単に導入できるよう、 カード所有者のブラウザやアプリケーション上から直接Opn Paymentsと通信して、クレジットカード情報を代替するトークンを作成し、 直接クレジットカード情報に触れずにカード情報を取り扱える仕組みを提供しています。

まずは、実際にトークンを作ってみましょう。下に表示されている「トークンを作成する」のボタンをクリックしてください。

トークンの作成に成功すると、実際に発行されたトークンが表示されます。

トークン作成シミュレーター

作成されたトークンのidを、課金を行う際や、顧客情報として保存しておく際に card パラメータとして与えることで 入力されたカード情報をあなたのECサイトやウェブサービスのサーバ、ネットワーク上で取り扱うことなく 目的の処理を果たすことができます。

Omise.jsとは

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

JavaScript経由でクレジットカードのデータをOpn Paymentsへ送信ができるのは、Omise.jsのみです。 PCI-DSSのライセンスを所有しサーバーサイドへデータを送信できるケースを除きます。

Token overview

決済フォーム入力からのフローについて

  • Omise.jsとあなたのパブリックキーを決済フォームで実装し、カスタマーのブラウザからカード情報はOpn Paymentsへ送信されます。
  • Opn Paymentsは、カード情報を一度だけ利用出来るトークンに変換します。
  • このトークンは、フォーム送信時に付与されますので、あなたのサーバーではこのトークンがパラメーターで参照できます。
  • あなたのサーバー上では、このトークンを使って、課金をすることや、Customer APIを利用して顧客とトークンを紐付けて、リピートユーザーのためにカード情報の入力を省くUXを提供することも可能です。

Opn Paymentsのトークンをあなたのサーバーサイドで保管することは意味がありません。トークンは一度だけ課金に利用できるものであり、その他の利用方法はありません。

実装の例

Omise.jsをウェブサイト末尾の</body>タグの前に挿入する必要があります。

<script src="https://cdn.omise.co/omise.js"></script>

Omise.jsを利用するウェブページではjQueryが必要になりますので、ご使用されていない場合は読み込むようにしてください。

<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>

その後、あなたのパブリックキーを追加してOmise.jsからOmise APIに対して認証ができるようにします。

<script>
  Omise.setPublicKey("pkey_test_4xpip92iqmehclz4a4d");
</script>

クレジットカード情報を取得するフォームを用意します。

<form action="/checkout" 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">
  </div>
  <div>
    Number<br>
    <input type="text" data-omise="number">
  </div>
  <div>
    Date<br>
    <input type="text" data-omise="expiration_month" size="4"> /
    <input type="text" data-omise="expiration_year" size="8">
  </div>
  <div>
    Security Code<br>
    <input type="text" data-omise="security_code" size="8">
  </div>

  <input type="submit" id="create_token">
</form>

次に、お客様が送信(支払い)ボタンを押したらトークン作成が起動する仕組みを設定します。
情報の送信先があなたのサーバーへ行かないようにするため、トークンフィールドを入力し、その他のフィールドはクリアにしてください。

$("#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()
  };

  // Send a request to create a token then trigger the callback function once
  // a response is received from Omise.
  //
  // Note that the response could be an error and this needs to be handled within
  // the callback.
  Omise.createToken("card", card, function (statusCode, response) {
    if (response.object == "error" || !response.card.security_code_check) {
      // Display an error message.
      var message_text = "SET YOUR SECURITY CODE CHECK FAILED MESSAGE";
      if(response.object == "error") {
        message_text = response.message;
      }
      $("#token_errors").html(message_text);

      // 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();
    };
  });

  // Prevent the form from being submitted;
  return false;

});

これによりOmiseはクレジットカード情報を取得しトークンを返すことができます。

Omiseは、お客様のウェブサイト全般における利便性を向上するためにクッキーを利用し、お客様のアクセス、閲覧履歴に関する情報を収集します。 当社のウェブサイトを閲覧し続けることにより、お客様は当社のプライバシーポリシーに同意することとします。 詳細はこちら