チュートリアルの以下の記述にそって、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ファンクション本体として以下を記述します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| declare | |
| l_response clob; | |
| begin | |
| if :P1_ORDER_ID is null then | |
| return ''; | |
| end if; | |
| apex_web_service.set_request_headers('Content-Type','application/json'); | |
| l_response := apex_web_service.make_rest_request( | |
| p_url => :FINCODE_ENDPOINT || '/v1/payments/' || :P1_ORDER_ID | |
| ,p_http_method => 'GET' | |
| ,p_parm_name => apex_util.string_to_table('pay_type') | |
| ,p_parm_value => apex_util.string_to_table('Card') | |
| ,p_credential_static_id => 'FINCODE_CRED' | |
| ); | |
| return l_response; | |
| end; |
ページ・アイテムP1_ORDER_IDはセッション・ステートとして保持されているため、送信するページ・アイテムへの設定は不要です。
このリージョンをリフレッシュするボタンREFRESHを作成します。
ラベルはRefresh、動作のアクションとして動的アクションで定義を選択します。
ボタンREFRESHの動的アクションを作成します。
識別の名前はonClick REFRESH、タイミングのイベントはボタンのデフォルトであるクリックです。
TRUEアクションとしてリフレッシュを選択します。影響を受ける要素の選択タイプはリージョン、リージョンとしてPayment Statusを選択します。
このページを初期化するボタンCLEARを作成します。
ラベルはClear、動作のアクションはページの送信です。レイアウトの新規行の開始はオフにし、ボタンREFRESHの右隣に配置します。
プロセス・ビューを開き、ボタンを押した時に実行されるプロセスを作成します。
ボタンCONFIRMを押した時に決済登録を実行します。
プロセスの識別の名前はRegister Payment、タイプとしてコードを実行を選択します。ソースのPL/SQLコードとして以下を記述します。決済登録を実行する最低限の処理です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| declare | |
| l_request clob; | |
| l_response clob; | |
| l_response_json json_object_t; | |
| e_register_payment_failed exception; | |
| begin | |
| select json_object( | |
| key 'pay_type' value 'Card', | |
| key 'job_code' value 'CAPTURE', | |
| key 'amount' value :P1_AMOUNT -- 数値ではなく文字列として与える。 | |
| ) into l_request from dual; | |
| apex_debug.info(l_request); | |
| apex_web_service.set_request_headers('Content-Type', 'application/json'); | |
| l_response := apex_web_service.make_rest_request( | |
| p_url => :FINCODE_ENDPOINT || '/v1/payments' | |
| ,p_http_method => 'POST' | |
| ,p_body => l_request | |
| ,p_credential_static_id => 'FINCODE_CRED' | |
| ); | |
| apex_debug.info(l_response); | |
| if apex_web_service.g_status_code <> 200 then | |
| apex_debug.info(l_response); | |
| raise e_register_payment_failed; | |
| end if; | |
| l_response_json := json_object_t(l_response); | |
| :P1_ORDER_ID := l_response_json.get_string('id'); | |
| :P1_ACCESS_ID := l_response_json.get_string('access_id'); | |
| end; |
サーバー側の条件のボタン押下時として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
ファンクションおよびグローバル変数の宣言に以下を記述します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const fincode = Fincode('&FINCODE_PUBLIC_KEY.'); | |
| fincode.setIdempotentKey(crypto.randomUUID()); | |
| const ui = fincode.ui({layout: "vertical"}); | |
| ui.create("payments",{layout: "vertical"}); | |
| document.addEventListener('DOMContentLoaded', async function () { | |
| ui.mount("fincode",'400'); | |
| }); |
カード情報の入力フォームを生成しています。
クレジットカード情報を入力するフォームを生成するリージョンを作成します。
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コードの実行を選択し、設定のコードに以下を記述します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ui.getFormData().then( | |
| (card) => { | |
| const transaction = { | |
| id: apex.items.P2_ORDER_ID.value, | |
| pay_type: "Card", | |
| access_id: apex.items.P2_ACCESS_ID.value, | |
| method: card.method, | |
| card_no: card.cardNo, | |
| expire: card.expire, | |
| holder_name: card.holderName, | |
| security_code: card.CVC | |
| }; | |
| fincode.payments( | |
| transaction, | |
| function(status, response) { | |
| if (status === 200) { | |
| console.log("payments succeed", response); | |
| // ドロワーを閉じる。 | |
| apex.navigation.dialog.close(true); | |
| } else { | |
| console.log("payments failed", response); | |
| } | |
| }, | |
| function() { | |
| console.log("ERROR"); | |
| } | |
| ); | |
| } | |
| ); |
カード決済が成功するとドロワーを閉じます。
以上でfincodeの決済サービスの実装は完了です。アプリケーションを実行すると、この記事の先頭のGIF動画のように動作します。
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
