クレジットカード入力フォームをカスタマイズしましょう

機能紹介

PAY.JPのクレジットカード入力フォームを使うと、サービス提供事業者はクレジットカード番号に触れることなく決済機能が提供できるようになります。クレジットカード番号は万一悪意を持ったユーザに盗み取られたりすると大きな事業リスクになります。そのため、カード番号にそもそも触れることがなければ安心です。

そんなカード番号入力フォームは次のような簡単なJavaScriptタグで導入できます。以下の情報はすべて必須です。 data-key にはPAY.JPの管理画面で取得できる公開鍵を指定してください。

<script
  type="text/javascript"
  src="https://checkout.pay.jp/"
  class="payjp-button"
  data-key="YOUR_PUBLIC_KEY"
></script>

そしてWebブラウザでアクセスすると以下のようなボタンが表示されます。

f:id:goofmint:20171120112553p:plain

しかしこれだけではありません。オプションとして様々なカスタマイズができます。今回はそれぞれのオプションについて紹介します。

PAY ID支払いに対応する

PAY.JPではクレジットカード支払いだけでなく、PAY IDを使った決済にも対応しています。この場合、 data-payjp を指定します。値は PAY IDの管理画面で取得できるOAuthクライアントIDを指定します。

<script
  type="text/javascript"
  src="https://checkout.pay.jp/"
  class="payjp-button"
  data-payjp=""
  data-key="YOUR_PUBLIC_KEY"
></script>

指定すると、以下のようにクレジットカード入力フォームにてPAY IDが選択できるようになります。

f:id:goofmint:20171106165535p:plain

すぐにフォーム送信しないようにする

デフォルトの動作ではクレジットカード番号を入力した後、すぐに提供サービスに対するフォーム送信が行われます。しかし確認画面につなげたい、もう一段階入力内容がある、といったケースもあるでしょう。そうした時に使えるのが data-partial です。

data-partial を true に指定すると、フォーム送信が行われずにクレジットカード番号を入力したモーダルが閉じるだけで終わります。

<script
  type="text/javascript"
  src="https://checkout.pay.jp/"
  class="payjp-button"
  data-key="YOUR_PUBLIC_KEY"
  data-partial="true"
></script>

data-partial を true にすると、ボタンのラベルが「カードで支払う」から「カード番号を入力する」に変化します（後述のオプションで変更可能です）。

f:id:goofmint:20171120112442p:plain

そしてクレジットカード番号を入力すると、ボタンが緑になって「カード情報入力済み」と表示されます。

f:id:goofmint:20171120112607p:plain

ボタンのラベルを変える

ボタンのラベルはデフォルトで「カードで支払う」ですが、これを変更できます。利用するのは data-text です。以下は「カード番号の登録」というラベルに変更する例です。

<script
  type="text/javascript"
  src="https://checkout.pay.jp/"
  class="payjp-button"
  data-key="YOUR_PUBLIC_KEY"
  data-text="カード番号の登録"
></script>

f:id:goofmint:20171120112622p:plain

クレジットカード入力フォームのボタンのラベルを変える

クレジットカード入力フォームの一番下にあるボタンのラベルも変更できます。これは `` で指定できます。

<script
  type="text/javascript"
  src="https://checkout.pay.jp/"
  class="payjp-button"
  data-key="YOUR_PUBLIC_KEY"
  data-submit-text="カード番号を登録して閉じる"
></script>

f:id:goofmint:20171120112634p:plain

サーバに送信するパラメータ名を変更する

PAY.JPではクレジットカード情報をトークンに変換し、そのトークンを使って実際の決済処理を行いますが、このトークンは payjp-token というパラメータで取得できます。例えばPHPであれば $_POST['payjp-token'] といった形になるでしょう。しかし場合によってはこれを変更したい時もあります。その時に使うのが data-token-name になります。

例えば以下の例ではパラメータ名を nonce に変更します。

<script
  type="text/javascript"
  src="https://checkout.pay.jp/"
  class="payjp-button"
  data-key="YOUR_PUBLIC_KEY"
  data-token-name="nonce"
></script>

data-partial と組み合わせて、フォームをすぐに送信しないようにした場合で確認すると分かりやすいです。まず以下はデフォルトの場合で、HTML構造を見ると payjp-token という名前の変数で確認できます。

<div id="payjp_checkout_box">
  <input type="button" value="✔ カード情報入力済み" class="has-token">
  <input type="hidden" name="payjp-token" value="tok_95b...19c">
</div>

それが data-token-name="nonce" を指定すると次のように変化します。

<div id="payjp_checkout_box">
  <input type="button" value="✔ カード情報入力済み" class="has-token">
  <input type="hidden" name="nonce" value="tok_ca3...65b">
</div>

クレジットカード番号を登録した際にコールバックを受け取る

クレジットカード番号を登録した際に、JavaScriptで何らかの処理をしたい時もあるでしょう。そうした時には data-on-created を指定します。例えば以下の例では onCreated という関数を呼び出します。

<script
  type="text/javascript"
  src="https://checkout.pay.jp/"
  class="payjp-button"
  data-key="YOUR_PUBLIC_KEY"
  data-on-created="onCreated"
></script>

関数の一つ目の引数にカード情報が送られてきます。

function onCreated(card) {
  console.log(card);
}

この時の card の内容は次のようになります。確認画面で下4桁や有効期限を表示するといったことも可能です。

{
  "card": {
    "address_city": null, 
    "address_line1": null, 
    "address_line2": null, 
    "address_state": null, 
    "address_zip": null, 
    "address_zip_check": "unchecked", 
    "brand": "Visa", 
    "country": null, 
    "created": 1510968184, 
    "customer": null, 
    "cvc_check": "passed", 
    "exp_month": 10, 
    "exp_year": 2020, 
    "fingerprint": "e1d8225886e3a7211127df751c86787f", 
    "id": "car_98e4b31486f42f296710df14efc7", 
    "last4": "4242", 
    "livemode": false, 
    "metadata": {}, 
    "name": "ATSUSHI", 
    "object": "card"
  }, 
  "created": 1510968184, 
  "id": "tok_8f5...b66", 
  "livemode": false, 
  "object": "token", 
  "used": false
}

登録失敗した時のコールバックを受け取る

何らかのエラー（ユーザが入力フォームを閉じた場合は除きます）が発生した際にコールバックを受け取りたい場合は data-on-failed を指定します。以下の例では onFailed が呼び出されます。

<script
  type="text/javascript"
  src="https://checkout.pay.jp/"
  class="payjp-button"
  data-key="YOUR_PUBLIC_KEY"
  data-on-failed="onFailed"
></script>

この時、一つ目の引数にステータスコード、二つ目の引数にエラー内容が送られてきます。

function onFailed(status, error) {
  console.log(status);
  // -> 0
  console.log(error);
  // -> {"description": "token を取得できません"}
}

表示言語を変更する

PAY.JPのクレジットカード入力フォームは日本語と英語に対応しています。英語にする場合は data-lang を指定します。以下は英語に変更する例です。

<script
  type="text/javascript"
  src="https://checkout.pay.jp/"
  class="payjp-button"
  data-key="YOUR_PUBLIC_KEY"
  data-lang="en"
></script>

ボタンはもちろん、入力フォームのラベルもすべて英語になります。

f:id:goofmint:20171120112652p:plain

名前のデフォルト表示（プレースホルダー）を変更する

クレジットカード入力フォームでは名前のところに「TARO YAMADA」とデフォルト表示（プレースホルダー）されています。これを変更したい場合には data-name-placeholder を指定します。

<script
  type="text/javascript"
  src="https://checkout.pay.jp/"
  class="payjp-button"
  data-key="YOUR_PUBLIC_KEY"
  data-name-placeholder="名前を英語で入力してください"
></script>

f:id:goofmint:20171120112702p:plain

このようにPAY.JPのクレジットカード入力フォームは細かなカスタマイズができます。ぜひ皆さんのサービスに合わせて変更してください。

Checkout | PAY.JP