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の２つのタイプのアカウントが作成されています。最初に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に説明があります。

https://developer.paypal.com/sdk/js/configuration/

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

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

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

	/*
	* PayPalの決済ボタンを構成する。
	*
	* style属性でボタンの表示方法を指定する。
	* createOrderでは決済をJSON形式で作成し、PayPalでの決済を依頼する。
	* onApproveはPayPalで決済が完了したときに呼び出され、決済の結果を受け取る。
	*/
	const paypalButtonsComponent = paypal.Buttons({
	// ボタンの表示形式を決める。
	style: {
	color: "gold",
	shape: "pill",
	layout: "vertical"
	},
	// P1_AMOUNTが決済金額。
	createOrder: (data, actions) => {
	// 決済の作成。
	const createOrderPayload = {
	purchase_units: [
	{
	amount: {
	value: apex.items.P1_AMOUNT.getValue()
	}
	}
	]
	};
	// PayPalに決済を依頼する。
	return actions.order.create(createOrderPayload);
	},
	// PayPalで決済が完了したので、その結果をページ・アイテムP1_RESPONSEに保存する。
	onApprove: (data, actions) => {
	// PayPalによる決済の結果をP1_RESPONSEに保存する。
	const captureOrderHandler = (details) => {
	const payerName = details.payer.name.given_name;
	apex.items.P1_RESPONSE.setValue(JSON.stringify(details, null, 2));
	};
	// 決済の結果をPayPalから取得する。
	return actions.order.capture().then(captureOrderHandler);
	},
	// 回復不能なエラーに対応する。
	onError: (err) => {
	// PayPalのエラー処理を行う。本来はもっといろいろな処理が必要。
	console.error('An error prevented the buyer from checking out with PayPal');
	}
	});
	// PayPalのボタンを表示する。
	paypalButtonsComponent
	.render("#paypal-button-container")
	.catch((err) => {
	// PayPalのボタンの表示がエラーになったときの処理。
	console.error('PayPal Buttons failed to render');
	});

view raw paypal-apex.js hosted with ❤ by GitHub

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のアプリケーション作成の参考になれば幸いです。

完