Omise.js

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

このドキュメントでは、Omise.jsの動作の概要と、お支払いページに追加する方法について説明します。

要件

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

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

仕組み

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

Omise.jsは、機密情報を直接Opn Paymentsのサーバーに送信します。サーバーは、一度限り有効な値(トークンまたはソース)を返します。この値は課金時に使われます。

利用例

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

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

構築済みの決済フォームを利用する

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

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

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

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

HTMLデータ属性による実装

データ属性を利用する場合、カスタム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属性は、デフォルトの決済方法を指定します。
• サポートする追加パラメーターについては、パラメータを参照してください。

Charge（課金）パスの設定については、Charge（課金）パスの設定をご参照ください。

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リクエストを受け入れるバックエンドサーバー上の場所を指しています。

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

Charge（課金）パスの設定については、Charge（課金）パスの設定をご参照ください。

Charge（課金）パスの設定

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

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

その他の支払い方法の情報が送信された場合、omiseSourceパラメーターは生成されたソース識別子に設定され、omiseTokenはnullになります。

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

フォームのカスタマイズ

以下のメソッドとパラメーターを使用することで、フォームの外観と動作をカスタマイズできます。

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 form or send ajax request to server */
  },
  onFormClosed: () => {
    /* Handler on form closure. */
  },
})

フォームのパラメーター

決済フォームのカスタマイズには、以下のパラメーターを使用します。

データパラメーター

状況別パラメーター

.以下のパラメータは一部の決済方法でのみ使用されます。状況に応じてご利用ください。

Google Pay用パラメーター

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

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

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

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

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

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

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

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

実装の方法

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

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

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

Opn Payments メソッド

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

パブリクキーの設定

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

Omise.setPublicKey("OMISE_PUBLIC_KEY");

トークンの作成

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

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

ソースの作成

課金作成が可能なOpn Payments サーバーから、一度限り有効のソースオブジェクトを作成します。 利用可能なソースタイプと必須パラメータについては、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