PAY ID オンライン決済

PAY ID オンライン決済の組み込みは、通常のPAY.JP APIによるクレジットカード決済と同様の方法で行うことができます。 組み込み方法は下記2種類があり、どちらの方法についても、最初にOAuth Clientを作成する必要があります。

  • シンプルなチェックアウトを利用する方法
  • OAuth APIを直接利用する方法

OAuth Clientの作成

PAY ID オンライン決済ではOAuthによる認証を利用するため、事業者様のアカウントでOAuth Clientを作成する必要があります。 PAY.JPにログインして OAuth設定画面 から作成してください。 作成の際に、ユーザの認証完了後に遷移するリダイレクトURLを入力してください。 チェックアウトを使ったPAY ID オンライン決済のみを利用予定の場合は、リダイレクトを受ける必要がないため、http://localhost/ と入力してください。 OAuth APIを利用する場合は、テスト用と本番サービス用のClientを別に作成する必要があります。作成時にTest Mode Clientのチェックを入れることでテスト用Clientを作成できます。

作成されたOAuth Clientの「詳細」から下記の情報を確認することができます。

  • Redirect URI: ユーザの認証完了後に遷移するリダイレクト先
  • Client ID: OAuthクライアントの識別ID、チェックアウトでdata-payjpに指定します
  • Client Secret: OAuthクライアントの正当性確認用の秘密値
  • Test Mode Client: テストモードかどうか

チェックアウトを使ってPAY ID オンライン決済を組み込む

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

まず、購入者がPAY IDの会員情報を入力する決済画面をチェックアウトで組み込みます。 チェックアウトでは、PAY IDの会員情報に紐付いたクレジットカード情報をトークン化し、サーバーサイドへトークン情報を引き渡します。 最後に、サーバーサイドで引き渡されたトークンを使って、PAY.JP API経由で支払いリクエストを行い、支払い完了です。

下記のように決済フォームにチェックアウトのタグを追加し、data-payjp="XXXXXXXXXXXXXXXXX" の部分に先ほど作成したOAuth Client IDを指定することで、 PAY ID オンライン決済を利用するためのフォームが設置されます。

<form action="/pay" method="post">
  <script
    src="https://checkout.pay.jp/"
    class="payjp-button"
    data-key="pk_test_0383a1b8f91e8a6e3ea0e2a9"
    data-payjp="827cde0e3dd648d6d83c08b091b2b10c3c266e36">
  </script>
</form>

顧客がチェックアウトに入力したカードの情報はトークン化され、<input type="hidden" name="payjp-token">としてフォームに入力されます。 このトークンは、通常のチェックアウトやPAY.JP APIで生成するトークンと同様に扱うことができ、PAY.JP APIでの支払い処理、顧客情報への紐付けなどに利用できます。

フォームから受け取ったトークンを使って、サーバーサイドでAPIを呼び出すことで支払い処理が完了します。 チェックアウトで生成されたトークンを使って、サーバーサイドで下記のような支払いリクエストを実行します。

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

チェックアウトのテスト方法

data-keyにテスト用のパブリックキーを渡した場合、チェックアウトをテストモードで実行できます。 テストモードでは本番モードの動作に対して下記の差異があります。

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

取得したトークンを使って、支払い、顧客の作成等を行う方法についてはAPIガイド - 支払いを行うをご覧ください。

実際の顧客の利用フロー

PAY ID オンライン決済対応のフォームを設置していただくことで、PAY IDをもっている顧客はフォーム上部の「PAY ID」タブから、メールアドレスとパスワードでPAY IDにログインし、登録済みのカードを選択して支払いを行うことができます。 アカウントをまだ持っていない顧客についても、カード情報の入力後フォーム下部の「PAY IDを登録する」にチェックを入れ、メールアドレスとパスワードを設定することで、 PAY IDの発行とカードの登録が自動的に行われ、次回以降の購入時に再度カードの情報を入力することなく支払いを行うことができます。

チェックアウトのより詳細なオプションなどについては リファレンス - チェックアウト をご覧ください。

OAuth APIを使ってPAY ID オンライン決済を組み込む

PAY IDのOAuth APIは RFC6749のAuthorization Code Grantに沿ってご利用いただけます。

OAuth APIを使ってPAY ID オンライン決済をご利用いただくには、事業者様側で下記の実装が必要となります。

  • PAY.JPのAuthorization Endpointへリダイレクトさせる
  • PAY.JPからのリダイレクトを受けてAuthorization Codeを取得する
  • Authorization Codeを用いてaccess_tokenを取得する
  • OAuth APIを利用してカードのトークンを取得する
  • カードのトークンを使って、通常のAPIを呼び出す

PAY ID OAuth APIのより詳しい情報については、 リファレンス - PAY ID OAuth API をご覧ください。

OAuth APIのテスト方法

OAuthClient作成時に、TestModeのチェックを入れることで、テストモードでAPIを実行するクライアントを作成できます。 テストモードのクライアントでは、本番用のClientとは下記の差異がありますが、それ以外は本番と同様のフローでユーザの認可、各種tokenの発行、各種APIの実行等のテストが行えます。

  • 各APIからはダミーデータまたはテスト決済に利用出来るトークンデータが取得可能
  • 認可画面にサービス名の代わりにテスト用のアプリケーションであることが表示される

取得したトークンを使って、支払い、顧客の作成等を行う方法についてはAPIガイド - 支払いを行うをご覧ください。