PAY.JPの支払いAPIをAPEXアプリから呼び出す

PAY.JPの支払いAPIを呼び出してカード決済を行うAPEXアプリケーションを作成してみます。

作成したAPEXアプリケーションは以下のように動作します。

PAY.JPによるカード決済を行うため、開発者アカウントを作成します。開発者アカウントを作成すると、ダッシュボードにアクセスできるようになります。また、API設定のページより、カード決済のテストを実施する際に必要になる、テスト秘密鍵とテスト公開鍵を取得できます。

今回の紹介する内容はPAY.JPによるカード決済を実施するために、Oracle APEX側に実装すべき最低限のコーディングになります。

Webブラウザのフロント側では、カード情報を入力するエレメントの生成および支払いAPIの呼び出しに必要なトークンの生成を実装します。

フロント側の処理はpayjp.js v2リファレンスを参照して実装します。

https://pay.jp/docs/payjs

生成したトークンと金額を受け取って、PAY.JPの支払いAPI（Charge API）を呼び出します。このREST APIは以下のリファレンスを参照して実装します。

https://pay.jp/docs/api/#charge-%E6%94%AF%E6%89%95%E3%81%84

以下より実装について説明します。

アプリケーション作成ウィザードを起動し、空のアプリケーションを作成します。名前はPAY.JP Chargesとします。PAY.JPによるカード決済は、すべてホーム・ページに実装します。

アプリケーションの作成をクリックします。

アプリケーション定義の置換文字列として、テスト公開鍵と支払いAPIのエンドポイントを設定します。

テスト公開鍵は置換文字列をPAYJP_PUBLIC_KEY、置換値としてpk_test_で始まるテスト公開鍵を設定します。

APIのエンドポイントは置換文字列としてPAYJP_ENDPOINT、置換値としてhttps://api.pay.jpを設定します。

ワークスペース・ユーティリティのWeb資格証明を開きます。

作成済みのWeb資格証明の一覧が表示されます。その画面で作成をクリックし、新たなWeb資格証明の作成を始めます。

PAY.JPが提供するREST APIに使用するWeb資格証明は、以下の情報で作成します。

PAY.JPのAPIは、テスト秘密鍵（または本番秘密鍵）をユーザー名としたBasic認証により保護されています。Oracle APEXのWeb資格認証には認証タイプとして基本認証（Basic認証）を選択できますが、この場合、秘匿して保持されるのはパスワードに限られユーザー名は誰でも参照できます。

PAY.JPのテスト秘密鍵（もちろん本番秘密鍵も）は秘匿が必須なので、基本認証の代わりに認証タイプとしてHTTPヘッダーを選択します。資格証明名はAuthorization、資格証明シークレットとして、文字列Basicで初めて空白で区切り、テスト秘密鍵の末尾に':'（コロン）をつけてBase64でエンコードした値を設定します。

Linuxなどのコマンドラインでは、以下のような処理によって資格証明シークレットを生成できます。

echo Basic `echo sk_test_xxxxxxxxxxxxxxxxxxxxxxx: | base64`

% echo Basic `echo sk_test_xxxxxxxxxxxxxxxxxxxxxxx: | base64`

Basic cGtxxXafea*****aeaqf***********k6Cg==

% 

Web資格証明の名前はPAY.JP Test CRED、静的IDはPAYJP_TEST_CREDとして、Web資格証明を作成します。URLに対して有効はhttps://api.pay.jpを設定します。

Web資格証明はアプリケーションのエクスポートから除外されるため、秘密鍵が誤って流出することを防ぐことができます。

以上で作成をクリックします。

Web資格証明としてPAY.JP Test CRED（静的IDはPAYJP_TEST_CRED）が作成されました。

ホーム・ページにいくつかのコンポーネントを配置します。

最初に決済する金額を入力するページ・アイテムを作成します。

ページ・アイテムの識別の名前はP1_AMOUNT、タイプとして数値フィールドを選択します。ラベルはAmountとします。

カード情報を入力するリージョンを作成します。

識別のタイトルはCard Element、タイプとして静的コンテンツを選択します。リージョンの描画はPAY.JPより提供されているSDKによって実行するため、APEX側では余計な修飾は省きます。外観のテンプレートにBlack with Attributes (No Grid)を選択し、詳細の静的IDとしてcard-elementを指定します。

カード情報の上下にあるページ・アイテムとボタンとの間隔が狭いので、少し広げます。テンプレート・オプションを開き、詳細のTop MarginとBottom MarginをLargeに変更します。

支払いを実行するボタンを作成します。

識別のボタン名はPAY、ラベルはPayとします。外観のホットをオンにします。

動作のアクションとして動的アクションで定義を選択します。詳細の静的IDにpay-buttonを設定します。以下の画面ショットでは動的アクションが作成されていますが、これは後で作成します。

支払いAPIのレスポンスをそのまま表示するページ・アイテムを作成します。

識別の名前はP1_RESPONSE、タイプとしてテキスト領域を選択します。ラベルはResponseとします。

ページへ配置するコンポーネントは作成できました。これより、支払い処理を実装します。

ページ・プロパティのJavaScriptのファイルURLとして以下を設定します。

https://js.pay.jp/v2/pay.js

ファンクションおよびグローバル変数の宣言として以下を記述します。

ボタンPAYに動的アクションを作成します。

動的アクションの識別の名前はonClick Pay、タイミングのイベントはボタンのデフォルトであるクリックです。

TRUEアクションとしてJavaScriptコードの実行を選択し、設定のコードに以下を記述します。

最初にカード情報からトークンを生成し、そのトークンと金額を引数として、PAY.JPの支払いAPIを呼び出すAjaxコールバックを呼び出します。

PAY.JPの支払いAPIの呼び出しはAjaxコールバックより行います。

AjaxコールバックとしてCHARGEを作成し、以下のコードを記述します。支払いAPIの仕様に従ってパラメータを渡し、/v1/chagesを呼び出しています。

以上でPAY.JPの支払いAPIを呼び出すサンプルは完成です。アプリケーションを実行すると、この記事の先頭のGIF動画のように動作します。

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完