ラベル PayPal の投稿を表示しています。 すべての投稿を表示
ラベル PayPal の投稿を表示しています。 すべての投稿を表示

2023年3月8日水曜日

PayPal決済をアプリに組み込む

 PayPalによる決済をAPEXアプリケーションに組み込んでみます。元ネタはJon Dixonさんのブログ記事Receiving Payments from Oracle APEX with PayPalです。

Jon Dixonさんが記事で作成されているAPEXアプリケーションは、デモとして一通りの機能が実装されています。本記事ではPayPal決済を組み込む実装に絞って解説します。ショッピング・カートの実装は行いません。

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

ページ・アイテムAmountに決済金額を入力し、PayPalボタンを押して支払いを行います。支払いの完了メッセージはJSON形式のままページ・アイテムResponseに印刷します。


PayPal側の準備から始めます。PayPal Developerのサイトに接続し、開発者アカウントを作成します。画面右上のLog in to Dashboardをクリックして作業を進めます。

私は一般のPayPalのアカウント(PayPalによる決済ができるアカウント)が作成済みだったため、そのアカウントでPayPal Developerのサイトに接続できるようになりました。こちらを参照するとPayPalビジネスアカウントの作成といった手順が含まれていますが、これから紹介する作業では開発者アカウントに含まれているSandbox test accountsを使用するため、開発者アカウント(それの元となった一般のPayPalアカウント)以外のアカウントは登録しません。


PayPal Developer DashboardからSandbox accountsを開きます。APEXのアプリケーションで使用するClient IDと、支払いのテストで使用するPersonalアカウントとパスワードを確認します。


BusinessとPersonalの2つのタイプのアカウントが作成されています。最初にBusinessのアカウントよりClient IDを確認します。View/Edit accountを実行します。


ダイアログが開きます。

API Credentialsのタブを選択し、REST AppsのDefault Applicationを開きます。


Default Applicationの設定が開きます。SANDBOX API CREDENTIALSのClient IDをコピーしておきます。この値はAPEXアプリケーションに作成する置換文字列G_CLIENT_IDの置換値として設定します。

App feature optionsのAccept paymentsにチェックが入っていることを確認します。

Businessアカウントでの確認は以上です。


続いてPersonalアカウントのパスワードを確認します。View/Edit accountを実行します。


ProfileのタブよりEmail IDとSystem Generated Passwordを確認します。PayPal決済を試す際に、支払いを行うユーザー名とパスワードとして使用します。


Fundingタブを開くと、テストに使用できるBank Account、Credit Card、PayPalのBalanceも確認できます。PayPalのBalanceはテストで支払いを実行すると、支払った分だけ少なくなります。Balanceには最初に5000円が振り込まれています。

PayPal側の準備は以上です。これからOracle APEXのアプリケーションを作成します。

アプリケーション作成ウィザードを起動し、空のアプリケーションを作成します。

名前はPayPal Appとします。PayPal決済はホーム・ページに実装します。


アプリケーションが作成されたらアプリケーション定義を開き、置換文字列を設定します。

置換文字列としてG_CLIENT_ID、置換値としてBusinessアカウントのREST AppのClient IDを設定します。


ページ・デザイナでホーム・ページを開きます。

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

タイプは数値フィールド、ラベルはAmountとします。必ずしも必要ではありませんが、設定の最小値に100、最大値に1000を指定します。


PayPalの決済ボタンを表示する領域をリージョンとして作成します。

識別のタイトルはPayPal、タイプとして静的コンテンツを選択します。レイアウトの新規行の開始をOFFとして、ページ・アイテムP1_AMOUNTの右隣に配置します。不要な装飾を省くため外観のテンプレートとしてBlank with Attributesを選択します。

詳細の静的IDとしてpaypal-button-containerを設定します。


PayPalの決済完了の応答を印刷するページ・アイテムP1_RESPONSEを作成します。

タイプはテキスト領域、ラベルはResponseとします。外観の高さに30を設定します。


コンポーネントの配置は以上です。

PayPal決済に必要なコーディングを行います。

ページ・プロパティのJavaScriptのファイルURLに、JavaScript SDKを読み込みを指定します。読み込み時にスクリプトの構成オプションを指定します。

構成オプションについては、PayPalのドキュメントのJavaScript SDK script configurationに説明があります。


今回はclient_id、intentおよびcurrencyを設定します。

https://www.paypal.com/sdk/js?client-id=&G_CLIENT_ID.&intent=capture&currency=JPY


ページ・ロード時に実行するJavaScriptのコードとして以下を記述します。

PayPalのドキュメントの、style、createOrder、onApprove、onErrorを参照して、これらの記述内容をより詳細にできます。


以上でアプリケーションは完成です。アプリケーションを実行すると、記事の先頭のGIF動画のように動作します。支払いにはSandbox accountのPersonalアカウント使用します。

決済の履歴などはPayPal Developerのダッシュボードから確認できます。

今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/paypal-app.zip

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

完