日日是Oracle APEX: Stripeを使ってみる

2022年8月23日火曜日

Stripeを使ってみる

以前から気になっていたStripeをAPEXアプリケーションから呼び出して支払いを行ってみました。参考にした手順はOracle ACEであるLino SchildeさんのOracle APEX and Stripe v3 integration - part 1です。この記事にはpart2、part3と後続の記事もあるのですが、今の所、それらは難しくて手に負えません。

Oracle CloudのAlways FreeのAutonomous Transaction Processingに、APEXアプリケーションを作成しています。

作業を実施しているのは2022年8月23日です。APEXのバージョンは22.1、その他のスクリーンショットなどは、この時点での情報になります。

以下より実施した手順を記述します。

Stripeのテスト環境を構成する

最初にStripeのダッシュボードにアクセスし、ユーザ登録を行います。

https://dashboard.stripe.com/login

Stripeアカウントの作成画面に移ります。メール、氏名、国、パスワードを入力し、アカウントを作成をクリックします。国について、ヘルプには「ビジネスが設立された国または地域を選択してください。個人の場合は、ビジネスを行っている国を選択してください。」と説明されています。この記事を読んでいる方であれば、日本を選択すると思います。

メールに指定したアドレスに、確認のためのメールが届きます。メールアドレスを確認をクリックします。

メールアドレスの確認が完了すると、Stripeのテスト環境にアクセスできるようになります。

本当に支払いを受け付ける場合は受け取り設定を行う必要があるようですが、今回はStripeとの連携テストを行うだけなので、テスト環境で作業を進めます。

Stripeのダッシュボードのホームを開き、開発者向けの公開可能キーの位置を確認します。後でAPEXアプリケーションに記述するJavaScriptのコードに埋め込みます。

購入のテストに使用する商品を登録します。

商品タブを開き、商品を追加をクリックします。

商品が登録できていればよいので、商品情報の設定は自由です。今回の例では、商品詳細の名前として入浴料、説明は北海道の温泉としています。画像も適当に貼り付けています。

料金情報の料金体系モデルとして標準の料金体系、価格は500円にしました。支払いは一括です。

以上の設定を行い、商品の保存をクリックします。

テスト環境ですが、商品の購入が可能になります。APEX側から支払いリクエストを発行する際に、料金のAPI IDが引数になります。APEXアプリケーションで使用するので、この値を覚えておきます。

今回はStripeのCheckoutクライアント側のみの組み込みを行います。そのため、設定のCheckoutとPayment Linksを開き、クライアント側のみの組み込みを有効にするをクリックします。商品IDが公開されます、と確認を求められるので、許可をクリックします。

https://dashboard.stripe.com/settings/checkout

Stripe側の準備は以上で完了です。

公開可能キーと商品のAPI IDを使って、この商品を購入するAPEXアプリケーションを作成します。

APEXアプリケーションを作成する

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

ホーム・ページはそのままにし、空白のページを２つ追加します。ページ名としてsuccess、もう一つはerrorとします。

以上でアプリケーションの作成をクリックします。

アプリケーションが作成されます。

アプリケーションはすべてホーム・ページに実装します。success、errorのページはStripeでの支払いが成功または失敗したときに呼び出されるページで、今回は何も実装しません。

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

デフォルトで作成されているページ・ナビゲーションを削除します。

ページ・アイテムP1_PRODUCTを作成します。商品のAPI IDを指定します。

識別の名前をP1_PRODUCT、タイプをテキスト・フィールドとします。ラベルはProductとします。

ページ・アイテムP1_QUANTITYを作成します。商品の個数を指定します。

識別の名前をP1_QUANTITY、タイプを数値フィールドとします。ラベルはQuantity、レイアウトの新規行の開始はOFFにし、Productの右にページ・アイテムを配置します。

Stripeに支払いを要求するボタンB_STRIPE_PAYを作成します。

識別のボタン名はB_STRIPE_PAY、ラベルはStripe Payとします。レイアウトの新規行の開始はOFFとし、Quantityの右にボタンを配置します。詳細のカスタム属性として、以下を記述します。

data-action="#action$stripe-payment"

Stripeを呼び出す処理は、APEXアクションのstripe-paymentとして実装します。

Stripeの呼び出しを実装します。

ページ・プロパティのJavaScriptのファイルURLとして、以下を記述します。

https://js.stripe.com/v3/

StripeのJavaScriptライブラリv3を読み込んでいます。

ファンクションおよびグローバル変数の宣言として、以下を記述します。

Stripeオブジェクトを作成するにあたって、pk_で始まる公開可能キーをコンストラクタに与えます。

apex_pathはAPEXを実行している環境に依存して形式は変わります。アプリケーションに作成しているsuccessページやerrorページを開き、URLを確認した上でapex_pathを設定します。customerEmailには、商品を購入する人のメール・アドレスを設定します。

var stripe = Stripe('pk_公開可能キーの貼り付け');
var apex_path = 'https://ホスト名/ords/r/ワークスペース名/';
var successUrl = apex_path + '/stripe-payment/success?session=' + apex.env.APP_SESSION;
var cancelUrl =  apex_path + '/stripe-payment/error?session=' + apex.env.APP_SESSION;
var customerEmail = '電子メール・アドレス';

ページ・ロードに時に実行に、以下を記述します。APEXアクションで実装していると、カード・リージョンやレポートからの呼び出しの対応が容易です。

	apex.actions.add([
	{
	name: "stripe-payment",
	action: function( event, element, args ) {
	let item = { price: apex.items.P1_PRODUCT.value, quantity: Number(apex.items.P1_QUANTITY.value) };
	let items = [ item ];
	console.log(items);
	stripe.redirectToCheckout({
	lineItems: items,
	mode: 'payment',
	successUrl: successUrl,
	cancelUrl: cancelUrl,
	customerEmail: customerEmail
	}).then(function (result) {
	if (result.error) {
	console.log('Error opening Stripe payment page.');
	}
	});
	}
	}
	]);