チュートリアルの以下の記述にそって、Oracle APEXに合わせた実装を行います。
テスト環境で決済を実行する
https://docs.fincode.jp/tutorial/test_api_exec
決済登録のAPIは、APEXアプリケーションより呼び出します。
入力フォームの生成は、JavaScriptリファレンスを参照して実装します。
作成したアプリケーションは以下のように動作します。
以下より実装について説明します。
アプリケーション作成ウィザードを起動し、空のアプリケーションを作成します。名前はfincodeとします。
アプリケーションの作成をクリックします。
アプリケーション定義の置換文字列として、パブリックキーとAPIのエンドポイントを設定します。
パブリックキーは置換文字列をFINCODE_PUBLIC_KEY、置換値としてp_test_で始まる（テスト用の）パブリックキーを設定します。
APIのエンドポイントは置換文字列としてFINCODE_ENDPOINT、置換値としてhttps://api.test.fincode.jpを設定します。
ワークスペース・ユーティリティのWeb資格証明を開きます。
fincodeが提供するREST APIに使用するWeb資格証明は、以下の情報より作成します。
fincodeのAPIは、ベアラーとしてシークレットキーを渡すことで認証できます。認証タイプにHTTPヘッダーを選択し、資格証明名はAuthorization、資格証明シークレットとして、文字列Bearerで始めて空白で区切り、シークレットキーの値を設定します。
Bearer シークレットキー
Web資格証明の名前はfincode CRED、静的IDはFINCODE_CREDとして、Web資格証明を作成します。URLに対して有効はhttps://api.test.fincode.jpを設定します。
以上で作成をクリックします。
Web資格証明としてfincode CRED（静的IDはFINCODE_CRED）が作成されました。
fincodeによるカード情報入力フォームを表示するページを作成します。
ページの作成をクリックします。
空白ページを選択します。
ページ番号を２（ページ・アイテム名に現れるため２とします）、名前をPay、ページ・モードとしてドロワーを選択します。
ページの作成をクリックします。
ページPayが作成されました。
ホーム・ページでは決済金額を入力し、確定ボタンを押します。確定ボタンを押すとfincodeが提供するカード情報を入力するフォームを実装したドロワーが開き、そこで決済を実行します。決済を実行すると、ドロワーが閉じます。
ページ・デザイナでホーム・ページを開きます。
金額を入力するページ・アイテムP1_AMOUNTを作成します。
タイプは数値フィールド、ラベルはAmountとします。
決済金額を確定するボタンCONFIRMを作成します。
ラベルはConfirm、外観のホットをオン、テンプレート・オプションのWidthとしてStretchを選択します。動作のアクションはデフォルトのページの送信から変更しません。
作成した決済IDを保持するページ・アイテムP1_ORDER_IDと取引IDを保持するページ・アイテムP1_ACCESS_IDを作成します。双方ともタイプは非表示です。
セッション・ステートのストレージとしてセッションごと(永続)を選択します。決済登録はPL/SQLで実行します。その際にページ・アイテムに設定された決済IDは、ページ遷移の後でも値を維持するようにします。
決済の状態を表示するリージョンを作成します。
識別のタイトルはPayment Status、タイプとして動的コンテンツを選択します。
ソースのCLOBを返すPL/SQLファンクション本体として以下を記述します。
ページ・アイテムP1_ORDER_IDはセッション・ステートとして保持されているため、送信するページ・アイテムへの設定は不要です。
このリージョンをリフレッシュするボタンREFRESHを作成します。
ラベルはRefresh、動作のアクションとして動的アクションで定義を選択します。
ボタンREFRESHの動的アクションを作成します。
識別の名前はonClick REFRESH、タイミングのイベントはボタンのデフォルトであるクリックです。
TRUEアクションとしてリフレッシュを選択します。影響を受ける要素の選択タイプはリージョン、リージョンとしてPayment Statusを選択します。
このページを初期化するボタンCLEARを作成します。
ラベルはClear、動作のアクションはページの送信です。レイアウトの新規行の開始はオフにし、ボタンREFRESHの右隣に配置します。
プロセス・ビューを開き、ボタンを押した時に実行されるプロセスを作成します。
ボタンCONFIRMを押した時に決済登録を実行します。
プロセスの識別の名前はRegister Payment、タイプとしてコードを実行を選択します。ソースのPL/SQLコードとして以下を記述します。決済登録を実行する最低限の処理です。
サーバー側の条件のボタン押下時としてCONFIRMを設定します。
識別の名前はClear Session State、タイプはセッション・ステートのクリア、設定のタイプとしてClear all Items on the Current Pageを選択します。
サーバー側の条件のボタン押下時としてCLEARを設定します。
ブランチを作成しプロセスの後に実行するように配置します。
識別の名前はOpen Drawer、動作のタイプとしてページまたはURL(リダイレクト)を選択します。
サーバー側の条件のボタン押下時としてCONFIRMを設定します。
ターゲットは、タイプがこのアプリケーションのページ、ページは２です。アイテムの設定として、ページ・アイテムP2_ORDER_IDに&P1_ORDER_ID.、P2_ACCESS_IDに&P1_ACCESS_ID.の値が渡るようにします。
以上で、ボタンをCONFIRMをクリックすると決済登録が実行され、その決済IDと取引IDを（ページ・アイテムP2_ORDER_IDとP2_ACCESS_IDへの）引数としてドロワーが開くようになります。
ページ・デザイナでページPayを開きます。
ページ・プロパティのJavaScriptのファイルURLとして、fincodeが提供しているJavaScriptライブラリを指定します。
https://js.test.fincode.jp/v1/fincode.js
ファンクションおよびグローバル変数の宣言に以下を記述します。
カード情報の入力フォームを生成しています。
クレジットカード情報を入力するフォームを生成するリージョンを作成します。
Content Bodyの直下にタイプが静的コンテンツのリージョンを作成します。
識別のタイトルはfincode-form、余計な装飾を省くため外観のテンプレートとしてBlank with Attributes (No Grid)を選択します。詳細の静的IDとしてfincode-formを設定します。このリージョンは実施的に以下のDIV要素を生成します。
<div id="fincode-form">....</div>
fincodeのチュートリアルではidがfincode-formの要素はFORMです。Oracle APEXが生成したページにFORM要素がすでに含まれているためか、<form id="fincode-form">では動作しません。そのため、代わりにDIV要素を作成しています。
識別のタイトルはfincode、タイプは静的コンテンツです。レイアウトの親リージョンとしてfincode-formを指定します。このリージョンも余計な装飾を省くため、外観のテンプレートとしてBlank with Attributes (No Grid)を選びます。詳細の静的IDとしてfincodeを設定します。
ラベルは支払い、レイアウトのリージョンとしてfincode-form、外観のホットをオンにし、テンプレート・オプションのWidthにStretchを選択します。動作のアクションとして動的アクションで定義を選択します。
決済IDと取引IDを保持するページ・アイテムP2_ORDER_IDとP2_ACCESS_IDを作成します。
双方ともタイプは非表示、レイアウトのリージョンはfincode-form、セッション・ステートのストレージはリクエストごと(メモリーのみ)とします。
ボタンSUBMITに動的アクションを作成します。
識別の名前はonClick SUBMITとします。タイミングのイベントはボタンのデフォルトであるクリックです。
TRUEアクションとしてJavaScriptコードの実行を選択し、設定のコードに以下を記述します。
カード決済が成功するとドロワーを閉じます。
以上でfincodeの決済サービスの実装は完了です。アプリケーションを実行すると、この記事の先頭のGIF動画のように動作します。
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
