PAY ID Checkoutを導入する

PAY ID とは

PAY IDは、メールアドレスとパスワードだけで支払いができるようになる購入用のアカウントです。BASEや各事業者のWebサービスで導入されており、多くの支払いが行われています。

先日、PAY IDリリースから1ヶ月半で10万アカウントを突破いたしました。

www.value-press.com

今回はCheckoutを使ったPAY IDを導入する方法について書きます。

f:id:payjp:20160818095529p:plain

PAY ID を組み込む

PAY IDは通常のPAY.JP APIを利用する方法と同様に導入することができ、シンプルなCheckoutを利用する方法と、より柔軟な設計が可能になるOAuth APIを直接利用する方法の2種類があります。

今回は、Checkoutを利用して組み込む「PAY ID Checkout」について説明します。PAY ID Checkoutでは、下記3つのステップでPAY IDをかんたんに組み込むことができます。

  1. OAuth Clientを作成する
  2. PAY ID Checkoutに組み込む
  3. サーバー側で処理を実行

1. OAuth Clientを作成する

PAY IDではOAuth認証を利用するので、各自でOAuth Clientを作成する必要があります。

OAuth Clientは、PAY.JPにログインしてOAuth 設定画面から作成します。

f:id:payjp:20160818095606p:plain

f:id:payjp:20160818095620p:plain

「Redirect URI」はユーザーの認証完了後に遷移するURLですが、Checkoutではリダイレクトを受ける必要がないため、 http://localhost/ と入力してください。

「Test Mode Client」はテスト用と本番用のOAauth Clientを区別するチェックで、チェックすることでテスト用のOAuth Clientを作成できます。今回はテスト用のOAuth Clientを作成します。

作成が完了したら、OAuth Clientの「詳細」を確認します。PAY ID Checkoutで使うのは「Client ID」になるので、コピーしてください。

f:id:payjp:20160818095642p:plain

f:id:payjp:20160818095705p:plain

2. PAY ID Checkoutに組み込む

Checkoutとは、 <script> タグを1行記述するだけで、 デザインされた決済フォームを生成することができるJavaScriptライブラリです。

Checkoutの <script> タグを追加し、PAY IDの設定を示す data-payjp 属性に、先ほど作成したClient IDをセットすれば、PAY IDが有効化されたフォームが表示されるようになります。

今回はテスト用のOAuth Clientを使うため、 data-key 属性にも pk_test から始まるテスト用のパブリックキーを指定します。本番用のOAuth Clientを使う場合は、本番用のパブリックキーを指定してください。

<form action="/pay" method="post">
  <script
    src="https://checkout.pay.jp/"
    data-key="pk_test_0383a1b8f91e8a6e3ea0e2a9"
    data-payjp="8e23018dc7e9078d8d02db5052dcdda3247e775c">
  </script>
</form>

PAY IDが有効化されたCheckout:

f:id:payjp:20160818105833p:plain

また data-payjp 属性をセットしない場合、PAY IDが無効化された通常のCheckoutが表示されます。

PAY IDが無効化されたCheckout:

f:id:payjp:20160818100922p:plain

3. サーバー側で処理を実行

PAY ID Checkoutでは、通常のCheckoutと同様に、利用されるカード情報はトークン化され、 <input type="hidden" name="payjp-token"> としてフォームに埋め込まれます。このトークンは、通常のCheckoutやPAY.JP APIで生成するトークンと同様に扱うことができ、PAY.JP APIでの支払い処理、顧客情報への紐付けに利用できるので、定期課金などにも柔軟に対応することが可能です。

フォームから受け取ったトークンを使って、サーバー側でAPIを叩くことで後続の処理(支払い処理、顧客情報への紐付けなど)が完了します。 例えば、支払いを行う場合、PAY ID Checkoutで生成されたトークンを使って、サーバー側で下記のようなリクエストを実行します。

$ curl https://api.pay.jp/v1/charges \
  -u sk_test_c62fade9d045b54cd76d7036 \
  -d "amount=500" \
  -d "currency=jpy" \
  -d "card=生成されたトークン"

これだけでPAY IDで支払いができるようになります。テスト用のOAuth Clientを使っているため、 シークレットキーは sk_test から始まるテスト用のものを指定しています。

以上の3ステップで、PAY IDに対応したシステムを作ることができます。

PAY ID をつかう

購入側のPAY IDの実際の利用フローについて説明します。

PAY IDをもっている購入者

フォーム上部の「PAY ID」タブから、メールアドレスとパスワードでPAY IDにログインし、登録済みのカードを選択して支払いを行うことができます。

PAY IDにまだ登録していないカードを利用したい場合は、「カード」タブから新規に利用したいカードを入力し、「PAY IDを登録」にチェックを入れた上、PAY IDで利用しているメールアドレスとパスワードを入力して「カードで支払う」を押せば、入力したカードでの支払い・PAY IDへの新規カードの登録が完了します。

PAY IDをもっていない購入者

フォーム上部の「カード」タブから、利用したいカードを入力します。 同時にPAY ID登録を行う場合、「PAY IDを登録」にチェックを入れ、メールアドレスとパスワードを入力して「カードで支払う」を押せば、入力したカードでの支払い・PAY IDのアカウント登録が完了します。

上記の2種類の決済フローは、テストモードにてご自身の環境でお試しいただくことが可能です。

テストモードでは、

  • メールアドレス、パスワードの組み合わせによらずログインが可能
  • ただしメールアドレスのフォーマット、パスワードの長さの制限は本番と同様に制限されます
  • ログインすると、テスト用のカードが1枚登録済み
  • テスト用のカードを使って、テスト決済に利用出来るトークンが取得可能

のような特徴があります。テスト用のカードについてはPAY.JP APIガイド - テストカードを参考にしてください。

まとめ

以上「PAY ID Checkout」を使ったPAY IDの導入方法についてのチュートリアルでした。

今回はPAY ID Checkoutでしたが、より自由度の高い設計が可能になる、OAuth APIを直接利用する方法も提供しています。OAuth APIについては公式リファレンスがあるので、そちらを参考にしてください。

PAY IDは先述の通り、提供開始から1ヶ月半で10万アカウントを突破し、多くの支払いシーンで利用されています。皆さんもこの機会に是非PAY IDを使ってみてください。

参考