Omise.js

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

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

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

要件

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

仕組み

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

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

Image

利用例

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

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

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

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


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

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

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

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

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

フォームのカスタマイズ

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

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 Opn Payments”
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 ポップアップウィンドウの送信ボタンに表示されるラベル。デフォルト: “Pay”
data-submit-form-target submitFormTarget 決済フォームのセレクター。デフォルト: 親要素のフォームセレクター
- onCreateTokenSuccess トークンまたはソース作成イベントのコールバック。トークンまたはソース識別子のいずれかが、パラメータとしてコールバックに渡されます。
- onFormClosed フォームクロージャイベントのコールバック。コールバックにパラメータは提供されません。

状況別パラメーター

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

Google Pay用パラメーター
データ属性 パラメータ 説明
data-googlepay-merchant-id googlepayMerchantId googlepay向け。Google Pay用の販売者IDです(ライブトラフィックを受け入れる際に必要
data-googlepay-request-billing-address googlepayRequestBillingAddress googlepay向け。カード保有者の名前と請求先住所をカードトークンに添付するにはtrue を設定します。これを設定すると、米国、英国、およびカナダのカード保有者に対する承認率が向上します。
data-googlepay-request-phone-number googlepayRequestPhoneNumber googlepay向け。カード保有者の請求先住所が要求された場合、カードトークンにカード保有者の電話番号も添付するためにtrue を設定します。

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

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

Alternative payment methods form example

支払方法 ドキュメンテーション サポート済みの国
alipay Alipay タイ
alipay_cn Alipay CN Thailand, Singapore
alipay_hk Alipay HK Singapore
bill_payment_tesco_lotus Tesco Lotus 請求書払い タイ
boost Boost Malaysia
convenience_store*, net_banking*, pay_easy* コンビニ、Pay-easy、ネットバンク 日本
credit_card クレジットカード タイ、シンガポール、日本
dana DANA Singapore
duitnow_obw DuitNow Online Banking/Wallets Malaysia
duitnow_qr DuitNow QR Malaysia
fpx FPX Malaysia
gcash GCash Singapore
googlepay Google Pay Thailand, Singapore
grabpay GrabPay Thailand, Singapore, Malaysia
installment 分割払い タイ
internet_banking†, internet_banking_bay, internet_banking_bbl ネットバンク タイ
kakaopay KakaoPay Singapore
maybank_qr Maybank QR Malaysia
mobile_banking_bbl Bangkok Bank (Bualuang mBanking) Thailand
mobile_banking_kbank KBank (K PLUS) Thailand
mobile_banking_ktb Krung Thai (KTB NEXT) Thailand
mobile_banking_bay Krungsri (KMA) Thailand
mobile_banking_ocbc_pao OCBC Pay Anyone Singapore
mobile_banking_scb SCB (SCB Easy) Thailand
paynow PayNow Singapore
points_citi Pay With Points Thailand
promptpay PromptPay Thailand
rabbit_linepay Rabbit Line Pay Thailand
shopeepay ShopeePay Thailand
touch_n_go Touch 'n Go Singapore
truemoney TrueMoney Wallet Thailand

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

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

パブリクキーの設定

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

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

トークンの作成

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

パラメータ タイプ 説明
type string (必須) card
tokenParameters object (必須) トークンのリクエストパラメータ
callback function (必須) Opn Payments サーバーのリクエストが完了したときに呼び出される関数。コールバックには、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)
});

ソースの作成

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

パラメータ タイプ 説明
type string (必須) ソースタイプ
sourceParameters object (必須) ソースのリクエストパラメータ
callback function (必須) Opn Payments サーバーのリクエストが完了したときに呼び出される関数。コールバックには、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
Omiseは、お客様のウェブサイト全般における利便性を向上するためにクッキーを利用し、お客様のアクセス、閲覧履歴に関する情報を収集します。 当社のウェブサイトを閲覧し続けることにより、お客様は当社のプライバシーポリシーに同意することとします。 詳細はこちら