Card.js

はじめに

今後のリリースでは、Card.jsは弊社サポートサービス対象外となります。新規ブラウザやOmiseが提供するAPIに対応するための更新はございません。代わりにOmise.jsをご利用ください。

Card.jsはOmise.js上で構築されており、決済フォームをお使いのwebサイト、タブレット、またはモバイルデバイスに簡単に統合できるようになります。Card.jsによってクレジットカード決済フォームの構築を行い、他のOmise APIクライアントライブラリ(ruby、.netなど) または、Omise Rest APIで課金の作成に使用するカードトークンを作ります。

インテグレーション

Card.jsはOmise CDN https://cdn.omise.co/card.js 上にホストされています。Card.jsを利用するには、以下のものを用意しておく必要があります。

HTMLページ: 課金情報作成のために、サーバーへポストする支払いフォームがあるもの。
ポストされたデータを処理するためのサーバー側のスクリプト: Omiseはご利用のサーバーに導入するために多数のAPIライブラリ(ruby、.netなど)を提供しています。

例

HTMLフォーム

<html>
...
<body>
<form name="checkoutForm" method="POST" action="checkout">
    <input type="hidden" name="description" value="商品合計 10,025円" />
    <script type="text/javascript" src="https://cdn.omise.co/card.js"
      data-key="YOUR_PUBLIC_KEY"
      data-image="PATH_TO_LOGO_IMAGE"
      data-frame-label="Merchant site name"
      data-button-label="Pay now"
      data-submit-label="Submit"
      data-location="yes"
      data-amount="10025"
      data-currency="jpy"
      >
    </script>
    <!--the script will render <input type="hidden" name="omiseToken"> for you automatically-->
</form>
</body>
</html>

Card.jsを使って[今すぐ支払う(Pay Now)]ボタンをフォームに設置できます。このボタンにより、ユーザーがクレジットカード情報を入力することのできるポップアップウィンドウが起動します。

HTMLデバッグツール内の要素の検証をすることで、スクリプトにより追加で生成された <input type="hidden" name="omiseToken"> の要素を確認することができます。これは、Omise.jsからトークンが返される処理を行うために使用されます。

Arguments(実引数)

Argument	Value
data-key	(必須) サインイン時にダッシュボード上で確認することのできるパブリックキー
data-image	(任意) ロゴ画像へのURI。例: `http://example.com/logo.png`
data-frame-label	(任意) 支払いのポップアップウィンドウに表示させたいヘッダのテキスト
data-button-label	(任意) お使いのフォームに埋め込むボタンに表示するラベル
data-submit-label	(任意) 支払いのポップアップウィンドウの送信ボタンに表示するラベル
data-location	この属性が空欄ではなく何らかの値があった場合、ポップアップには郵便番号と都市の入力欄が表示されます
data-amount	(必須) 通貨の最小単位で支払われる金額
data-currency	(必須) 決済画面に表示される通貨

サーバー側のスクリプト(OmiseRubyライブラリ使用)


def checkout

 token = params[:omiseToken]
 checkout_description = params[:description]
 checkout_amount = 10025

 charge = Omise::Charge.create({
  return_uri: "https://example.com/orders/384/complete",
  amount: checkout_amount,
  currency: "jpy",
  description: checkout_description,
  ip: "127.0.0.1",
  card: token
})

end

ユーザーがクレジットカード情報を送信すると、Card.jsは返されたカードトークンを 'omiseToken'、input type = hiddenに設定し、その後自動的にお使いのフォームを送信します。

'今すぐ支払う'ボタン追加

生成されたボタンにはスタイルが付けられていません。好きな方法で自由にスタイルを付けることができます。