このページは現在翻訳中です。

Omise.js

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

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

利用方法と設定

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

Omise.jsとは

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

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

Image

利用例

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

GitHubからOmise.jsのソースコードを入手できます。 https://github.com/omise/omise.js.

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パラメータは、生成されたトークン識別子に設定され、omiseSourcenullになります。

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

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

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パラメータは、生成されたトークン識別子に設定され、omiseSourcenullになります。

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

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

OmiseCard メソッド

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

構成する

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

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

パラメータ タイプ  デフォルト 説明  
config object {} ボタンのデフォルト設定。
OmiseCard.configure({
  publicKey: 'OMISE_PUBLIC_KEY',
});
ボタンの設定

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

パラメータ タイプ デフォルト 説明
selector string - ボタンのセレクター。
config object {} ボタンの構成。
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メソッドを呼び出してください。

パラメータ タイプ デフォルト 説明
config object {} ターゲットボタンの構成。
OmiseCard.open({
  amount: 10000,
  submitFormTarget: '#checkout-form',
  onCreateTokenSuccess: (nonce) => {
    /* Handler on token or source creation.  Use this to submit form or send ajax request to server */
  },
  onFormClosed: () => {
    /* Handler on form closure. */
  },
})

パラメータ

データ属性 パラメータ 説明
data-amount amount (必須) フォームに表示される金額
data-key publicKey (必須) ダッシュボード上に表示されるパブリックキー
data-button-label buttonLabel フォームに埋め込まれたボタンに表示されるラベル。デフォルト: “Pay with Omise”
data-currency currency 決済ウィンドウに表示される通貨。デフォルト: THB(タイバーツ)
data-default-payment-method defaultPaymentMethod デフォルトの決済方法。デフォルト: credit_card
data-frame-description frameDescription ヘッダーテキストの下部に表示される説明テキスト。
data-frame-label frameLabel ポップアップされる支払い画面のヘッダ部分に表示させたいテキスト。デフォルト: Omise
data-hide-amount hideAmount 送信ボタンが表示された際に、金額を非表示にするかどうか。デフォルト: false
data-image image ロゴ画像のURI。 例: https://example.com/logo.png
data-locale locale クレジットカードフォームの言語(enjath)。デフォルト: en
data-location location postal_codeおよびcityフィールドを含めるかどうか。デフォルト: no
data-other-payment-methods otherPaymentMethods 代替の決済方法で、コンマ区切りで表示される文字列
data-submit-label submitLabel ポップアップウィンドウの送信ボタンに表示されるラベル。デフォルト: “Checkout”
data-submit-form-target submitFormTarget 決済フォームのセレクター。デフォルト: 親要素のフォームセレクター
- onCreateTokenSuccess トークンまたはソース作成イベントのコールバック。トークンまたはソース識別子のいずれかが、パラメータとしてコールバックに渡されます。
- onFormClosed フォームクロージャイベントのコールバック。コールバックにパラメータは提供されません。

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

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

Alternative payment methods form example

支払方法 ドキュメンテーション サポート済みの国
alipay Alipay タイ
bill_payment_tesco_lotus Tesco Lotus 請求書払い タイ
convenience_store*, net_banking*, pay_easy* コンビニ、Pay-easy、ネットバンク 日本
credit_card クレジットカード タイ、シンガポール、日本
installment 分割払い タイ
internet_banking†, internet_banking_bay, internet_banking_bbl, internet_banking_ktb, internet_banking_scb ネットバンク タイ

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

ライブアカウントで追加の決済方法を有効にする場合は、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メソッドで一度限り有効なトークン、またはソースを作成する方法は以下の通りです。

パブリクキーの設定

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

パラメータ タイプ 説明
key string (必須) ダッシュボードにあるパブリックキー
Omise.setPublicKey("OMISE_PUBLIC_KEY");

トークンの作成

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

パラメータ タイプ 説明
type string (必須) card
tokenParameters object (必須) トークンのリクエストパラメータ
callback function (必須) Omiseサーバーのリクエストが完了したときに呼び出される関数。コールバックには、HTTPレスポンスステータスコード、またレスポンス情報、2種類のパラメータが提供されます。
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をご覧ください。

パラメータ タイプ 説明
type string (必須) ソースタイプ
sourceParameters object (必須) ソースのリクエストパラメータ
callback function (必須) Omiseサーバーのリクエストが完了したときに呼び出される関数。コールバックには、HTTPレスポンス・ステータス・コードとレスポンス情報、2種類のパラメーターが提供されます。
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 (シンガポール)
  • https://cdn2.omise.co/omise.js (日本)