開発者ガイドにある以下の記述にそって、Oracle APEXに合わせた実装を行います。
実装ガイド：ホストフィールドでペイメントを作成
https://ja.doc.komoju.com/docs/integration-guide-standard
ワークスペース・ユーティリティのWeb資格証明を開きます。
作成したアプリケーションは以下のように動作します。
最後にREST APIを呼び出して決済セッションの状態を確認しています。実際に決済の成功や失敗を確認するにはWebhookを実装するのが一般的だと思いますが、本記事ではWebhookの作成は取り扱っていません。通常Webhookは、APEXのアプリケーションではなく、ORDSのRESTサービスとして実装します。
以下より実装について説明します。
アプリケーション作成ウィザードを起動し、空のアプリケーションを作成します。名前はKOMOJUとします。
アプリケーションの作成をクリックします。
アプリケーション定義の置換文字列として、公開鍵とAPIのエンドポイントを設定します。
公開鍵は置換文字列をKOMOJU_PUBLISHABLE_KEY、置換値としてpk_test_で始まる（テスト用の）公開鍵を設定します。
APIのエンドポイントは置換文字列としてKOMOJU_ENDPOINT、置換値としてhttps://komoju.com/apiを設定します。
KOMOJUが提供するREST APIに使用するWeb資格証明は、以下の情報より作成します。
KOMOJUの非公開鍵は秘匿が必須なので、基本認証の代わりに認証タイプとしてHTTPヘッダーを選択します。資格証明名はAuthorization、資格証明シークレットとして、文字列Basicで始めて空白で区切り、非公開鍵の末尾に':'（コロン）をつけてBase64でエンコードした値を設定します。
Linuxなどのコマンドラインでは、以下のような処理によって資格証明シークレットを生成できます。
Linuxなどのコマンドラインでは、以下のような処理によって資格証明シークレットを生成できます。
echo Basic `echo sk_test_xxxxxxxxxxxxxxxxxxxxxxx: | base64`
% echo Basic `echo sk_test_****************: | base64`
Basic ***************************************
%
Web資格証明の名前はKOMOJU Cred、静的IDはKOMOJU_CREDとして、Web資格証明を作成します。URLに対して有効はhttps://komoju.com/api/を設定します。
以上で作成をクリックします。
Web資格証明としてKOMOJU Cred（静的IDはKOMOJU_CRED）が作成されました。
KOMOJUのホストフィールドを表示するドロワーとなるページを作成します。
ページの作成をクリックします。
空白ページを選択します。
ページ番号を２（ページ・アイテム名に現れるため２とします）、名前をPay、ページ・モードとしてドロワーを選択します。
ページの作成をクリックします。
ページPayが作成されました。
ホーム・ページでは決済金額を入力し、確定ボタンを押します。確定ボタンを押すとKOMOJUが提供するカード情報を入力するホストフィールドを実装したドロワーが開き、そこで決済を実行します。決済を実行すると、ドロワーが閉じます。
ページ・デザイナでホーム・ページを開きます。
金額を入力するページ・アイテムP1_AMOUNTを作成します。
タイプは数値フィールド、ラベルはAmountとします。
ラベルはConfirm、外観のホットをオン、テンプレート・オプションのWidthとしてStretchを選択します。動作のアクションはデフォルトのページの送信から変更しません。
作成した決済セッションのIDを保持するページ・アイテムP1_SESSION_IDを作成します。タイプは非表示です。
セッション・ステートのストレージとしてセッションごと(永続)を選択します。決済セッションはPL/SQLでの処理で作成します。その際にページ・アイテムに設定されたセッションIDは、ページ遷移の後でも値を維持するようにします。
決済セッションの状態を表示するリージョンを作成します。
識別のタイトルはSession Show、タイプとして動的コンテンツを選択します。
ソースのCLOBを返すPL/SQLファンクション本体として以下を記述します。
ページ・アイテムP1_SESSION_IDはセッション・ステートとして保持されているため、送信するページ・アイテムへの設定は不要です。
ラベルはRefresh、動作のアクションとして動的アクションで定義を選択します。
識別の名前はonClick REFRESH、タイミングのイベントはボタンのデフォルトであるクリックです。
TRUEアクションとしてリフレッシュを選択します。影響を受ける要素の選択タイプはリージョン、リージョンとしてSession Showを選択します。
このページを初期化するボタンCLEARを作成します。
ラベルはClear、動作のアクションはページの送信です。レイアウトの新規行の開始はオフにし、ボタンREFRESHの右隣に配置します。
プロセス・ビューを開き、ボタンを押した時に実行されるプロセスを作成します。
ボタンCONFIRMを押した時に決済セッションを作成します。
プロセスの識別の名前はCreate Session、タイプとしてコードを実行を選択します。ソースのPL/SQLコードとして以下を記述します。決済セッションを作成する最低限の処理です。
サーバー側の条件のボタン押下時としてCONFIRMを設定します。
識別の名前はClear Session State、タイプはセッション・ステートのクリア、設定のタイプとしてClear all Items on the Current Pageを選択します。
サーバー側の条件のボタン押下時としてCLEARを設定します。
ブランチを作成しプロセスの後に実行するように配置します。
識別の名前はOpen Host Fields、動作のタイプとしてページまたはURL(リダイレクト)を選択します。
サーバー側の条件のボタン押下時としてCONFIRMを設定します。
ターゲットは、タイプがこのアプリケーションのページ、ページは２です。アイテムの設定として、ページ・アイテムP2_SESSION_IDに&P1_SESSION_ID.の値が渡るようにします。
以上で、ボタンをCONFIRMをクリックすると決済セッションが作成され、その決済セッションIDを（ページ・アイテムP2_SESSION_IDへの）引数としてドロワーが開くようになります。
ページ・デザイナでページPayを開きます。
ページ・プロパティのJavaScriptのファイルURLとして、KOMOJUが提供しているJavaScriptライブラリを指定します。
https://multipay.komoju.com/fields.js
ホストフィールドに関する実装は、このファイルに含まれています。
決済セッションのセッションIDを保持するページ・アイテムを作成します。
識別の名前はP2_SESSION_ID、タイプは非表示です。セッション・ステートのストレージはリクエストごと(メモリーのみ)を選択します。
ホストフィールドを表示するリージョンを作成します。
識別のタイトルはKOMOJU Host Fieldsとします。タイプとして静的コンテンツを選択し、ソースのHTMLコードとして以下を記述します。
余計な装飾が表示されないよう、外観のテンプレートとしてBlank with Attributes (No Grid)を選択します。
カード決済を実行するボタンPAYを作成します。
ラベルはPay、外観のホットをオンにし、テンプレート・オプションのWidthにStretchを選択します。動作のアクションとして動的アクションで定義を選択します。
ボタンPAYに動的アクションを作成します。
識別の名前はonClick Payとします。タイミングのイベントはボタンのデフォルトであるクリックです。
TRUEアクションとしてJavaScriptコードの実行を選択し、設定のコードに以下を記述します。
カード決済を実行した後にドロワーを閉じます。
以上でKOMOJUの決済サービスの実装は完了です。アプリケーションを実行すると、この記事の先頭のGIF動画のように動作します。
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
