Omise.js

Omise.jsは、カード保有者の機密情報を、ブラウザから直接Omiseサーバーに送信することで、カード情報を安全に管理するJavaScriptライブラリです。ウェブサイトでOmiseをご利用される場合は、必ずOmise.jsをご利用ください。

このドキュメントでは、Omise.jsの動作、そして入力フォームの作成手順について説明します。

利用方法と設定

• お支払いページでHTTPSを有効にします。

加盟店のウェブサイト全体に、HTTPSを使用するよう強くお勧めします。また、加盟店のサーバー上でクレジットカード情報の処理や保管を行わないでください。詳細に関しては、加盟店向けのセキュリティ対策をご確認ください。

Omise.jsとは

Omise.jsは、クレジットカード、デビットカード、その他のお支払い方法の情報を、カード保有者のブラウザ上で安全に取り扱う仕組みを提供しています。

Omise.jsは、こうした機密情報を直接Omiseサーバーに送信します。サーバーは、一度のみ使用可能な値(トークンまたはソース)を返します。

利用例

Omise.jsの利用例は、以下のGitHubリポジトリをご参照ください。

• https://github.com/omise/omise.js-example
• https://github.com/omise/omise-flask-example

Omise既成デザインの決済フォーム

Omise.jsからトークンとソースを直接リクエストするか、既成の決済フォームをご利用いただけます。このフォームを利用することで、ユーザーデータの収集、検証、サーバーへの送信を安全に処理することができます。さらに、ユーザーのブラウザから追加データを収集することで、不正行為の防止にも役立ちます。

Omise.jsは、デフォルトでPay with Omiseのボタンをレンダリングします。下のボタンをクリックすると、決済フォームがポップアップ表示されます。

ユーザーは、決済フォームへカード情報を入力します。表示される、[Pay 1,000 JPY]ボタンをクリックすると、Omiseサーバーから一度限り使用可能なトークン、またはソースがリクエストされます。

このフォームは、HTMLデータ属性 または JavaScript を利用して実装することができます。

データ属性の利用

データ属性を利用する場合、カスタムJavaScriptは必要ありません。お支払いページにHTMLを追加するだけで、決済フォームを実装できます。

実装方法

お支払いページに、次のコードを追加します。

<form id="checkoutForm" method="POST" action="/charge">
  <script type="text/javascript" src="https://cdn.omise.co/omise.js"
          data-key="OMISE_PUBLIC_KEY"
          data-amount="12345"
          data-currency="THB"
          data-default-payment-method="credit_card">
  </script>
</form>

注意点:

• actionパスとは、トークンまたはソースを含む、POSTリクエストを受け入れるバックエンドサーバー上の場所を指しています。
• <script>エレメントは、<form>エレメント内に配置する必要があります。
• data-key属性は、パブリックキーを指定します。
• data-amount属性は、フォームに表示させる、各通貨の最小ユニットを指定します。

• data-default-payment-method属性は、デフォルトの決済方法を指定します。

• サポート済みの追加パラメータについては、パラメータを参照してください。

次のステップ

サーバー(またはactionが指定する場所)で/chargeパスを構成し、パラメータomiseTokenおよびomiseSourceを受け入れて処理を行います。

クレジットカードまたはデビットカードの情報が送信された場合、omiseTokenパラメータは、生成されたトークン識別子に設定され、omiseSourceはnullになります。

代替の決済方法の詳細情報が送信された場合、omiseSourceパラメータは生成されたソース識別子に設定され、omiseTokenはnullになります。

詳細は、トークンとソースの処理を参照してください。

JavaScriptの利用

JavaScriptを利用して、決済フォームの動作を設定することもできます。Omise.jsはOmiseCardオブジェクトによって設定を行います。

実装の方法

お支払いページに次のコードを追加します。

<form id="checkoutForm" method="POST" action="/charge">
  <input type="hidden" name="omiseToken">
  <input type="hidden" name="omiseSource">
  <button type="submit" id="checkoutButton">Checkout</button>
</form>

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

<script>
  OmiseCard.configure({
    publicKey: "OMISE_PUBLIC_KEY"
  });

  var button = document.querySelector("#checkoutButton");
  var form = document.querySelector("#checkoutForm");

  button.addEventListener("click", (event) => {
    event.preventDefault();
    OmiseCard.open({
      amount: 12345,
      currency: "THB",
      defaultPaymentMethod: "credit_card",
      onCreateTokenSuccess: (nonce) => {
          if (nonce.startsWith("tokn_")) {
              form.omiseToken.value = nonce;
          } else {
              form.omiseSource.value = nonce;
          };
        form.submit();
      }
    });
  });
</script>

注意点:

• actionパスとは、トークンまたはソースを含む、POSTリクエストを受け入れるバックエンドサーバー上の場所を指しています。
• サポート済みの追加パラメータについては、パラメータを参照してください。

次のステップ

サーバー(またはactionが指定する場所)で/chargeパスを構成し、パラメーターomiseTokenおよびomiseSourceを受け入れて処理を行います。

クレジットカードまたはデビットカードの情報が送信された場合、omiseTokenパラメータは、生成されたトークン識別子に設定され、omiseSourceはnullになります。

代替の決済方法の詳細情報が送信された場合、omiseSourceパラメータは生成されたソース識別子に設定され、omiseTokenはnullになります。

トークンとソースの処理を参照してください。

OmiseCard メソッド

OmiseCardは、次の方法でフォームの外観と動作をカスタマイズすることができます。

構成する

フォームのデフォルト構成を設定します。ここで、パブリックキーを設定します。configureButtonメソッドを通して設定されたボタンは、この構成を継承します。openメソッドで読み込まれたフォームもこの構成を継承します。

openメソッドを呼び出す前に、こちらのメソッドを呼び出してください。

OmiseCard.configure({
  publicKey: 'OMISE_PUBLIC_KEY',
});

ボタンの設定

フォームのボタン固有の構成を設定します。ボタンがフォーム外にある場合は、構成オブジェクトキーsubmitFormTargetを含め、フォームを指定します。

OmiseCard.configure({
  publicKey: 'OMISE_PUBLIC_KEY'
});

OmiseCard.configureButton('#checkout-button', {
  amount: 3000,
  currency: 'USD',
  buttonLabel: 'Pay 30 USD'
});

OmiseCard.configureButton('#checkout-button-alt', {
  amount: 100000,
  currency: 'THB',
  buttonLabel: 'Pay 1000 THB'
});

情報を紐づける

configureButtonを使用して設定されたすべてのボタンに設定情報を紐づけます。すべてのボタンに設定情報が紐づけされた後にボタンをクリックすると、フォームがトリガーされます。

OmiseCard.configureButton('#checkout-button', {
  publicKey: 'OMISE_PUBLIC_KEY',
  amount: 10000,
  frameLabel: 'Merchant Name',
  submitLabel: 'Pay',
});

OmiseCard.attach();

フォームを開く

設定画面から決済フォームを開いてください。

このメソッドを呼び出す前に、configureメソッドを呼び出してください。

OmiseCard.open({
  amount: 10000,
  submitFormTarget: '#checkout-form',
  onCreateTokenSuccess: (nonce) => {
    /* Handler on token or source creation.  Use this to submit a form or send an Ajax request to the server */
  },
  onFormClosed: () => {
    /* Handler on form closure. */
  },
})

パラメータ

Omise既成デザインの入力フォームでサポートされている決済方法

全ての決済方法はOmise.jsでサポートされていますが、既成フォームでサポートされているのは、下記の決済方法のみとなっています。サポート済みの場合でも、アカウントの種類や、アカウントを登録した国によって決済方法が異なる場合があります。

* 作成されたソースtypeはecontextです。
† 利用可能なネットバンクが表示され、ユーザーが選択することができます。

ライブアカウントで追加の決済方法を有効にする場合は、support@omise.coまでお問い合わせください。

トークンとソースを直接リクエストする

顧客側で用意した決済フォームに関しても、全てのお支払いに適応した、満足のいくサポートをご提供しています。こちらのサービスをご利用の際は、決済フォームの作成、イベントの処理など、全て顧客側にて行う必要がありますのでご注意ください。

カスタムフォームの<input>エレメントの識別子としてname属性を使用しないでください。使用すると、フォームと共にエレメントの値がサーバーに送信されます。

識別子として、dataまたはid属性を使用してください。それにより機密情報(クレジットカード番号など)がサーバーに送信されることを防止します。加盟店のセキュリティ対策をご覧ください。

実装の方法

Omise.jsを読み込む<script>エレメントを作成します。

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

次に、ご利用のシステム環境にOmiseオブジェクトを読み込んでください。

Omise メソッド

Omiseメソッドで一度限り有効なトークン、またはソースを作成する方法は以下の通りです。

パブリクキーの設定

パブリックキーを利用して認証を行います。

Omise.setPublicKey("OMISE_PUBLIC_KEY");

トークンの作成

一度限り有効のトークンオブジェクトを、Omiseサーバーから作成します。このオブジェクトを使用すると、課金の作成、またトークン化されたカード情報を、顧客オブジェクトに紐付けることができます。

tokenParameters = {
  "city": "New York",
  "country": "US",
  "expiration_month": 2,
  "expiration_year": 2022,
  "name": "Somchai Prasert",
  "number": "4242424242424242",
  "phone_number": "0123456789",
  "postal_code": 10320,
  "security_code": 123,
  "state": "NY",
  "street1": "476 Fifth Avenue"
};

Omise.createToken("card",
                  tokenParameters,
                  function(statusCode, response) {

  // response["id"] is token identifier

  console.log(response)
});

ソースの作成

課金作成が可能なOmiseサーバーから、一度限り有効のソースオブジェクトを作成します。 利用可能なソースタイプと必須パラメータについては、Source(ソース)APIをご覧ください。

sourceParameters = {
  "amount": 12345,
  "currency": "THB",
  "phone_number": "0123456789"
}

Omise.createSource("truemoney",
                   sourceParameters,
                   function(statusCode, response) {

  // response["id"] is source identifer

  console.log(response)
});

トークンとソースの処理

トークンについてはクレジットカード決済に関する情報をご覧ください。 詳細情報、またサンプルコードについては、charge(課金)APIをご覧ください。

ソースについては、APIドキュメント の「お支払い方法」カテゴリ内のガイドを参照してください。

CDN

Omise.jsは下記のサイトからダウンロードできます。

• https://cdn.omise.co/omise.js