カート画面に[AmazonPay]でお支払ボタンを表示[EC CUBE3でAmazonPayを利用するためのステップその5]

【記事要約】

AmazonPay導入のためのEC CUBE３系のプラグイン作成の第一段階。カート画面に[Amazonアカウントでお支払]ボタンを表示するプラグイン要素を作成する。

■目次
1. event.ymlにフックポイントを記載
2. Eventファイルに処理内容を記載
3. Twigファイルを作成する

で、「２．AmazonPayプラグインの全体的な動き」に書いたように、Amazonプラグインは大きく３つの要素に分割できる。

そのまず最初のカート画面部分について説明する。

以下、プラグインはステップその４で紹介したEC CUBEのプラグイン開発ドキュメントの内容に基いて、EC CUBE３のapp＞Pluginフォルダの中に、プラグインの初期ファイル一式が自動生成された状態であることを条件とする。

EC CUBE3プラグインをつくる[EC CUBE3でAmazonPayを利用するためのステップその4]

1. event.ymlにフックポイントを記載

カート画面にお支払ボタンを表示させるためのフックポイントは、直接Cart/index.twigとした。

そのため、event.ymlに、下記のコードを記載する。

Cart/index.twig:
    - [onCartIndexRender, NORMAL]

1 2	Cart/index.twig: - [onCartIndexRender, NORMAL]

2. Eventファイルに処理内容を記載

EC CUBEのプラグイン開発ドキュメントの内容に基いて、EC CUBE３のapp＞Pluginフォルダの中に、プラグインの初期ファイルが自動生成された場合、指定した名前の***event.phpというファイルが生成される。

（僕は、AmazonPayEvent.phpという名前にした。）

このイベントファイルにフックポイントで指定し「onCartIndexRender」の動作の内容を記載する。

例：

public function onCartIndexRender(TemplateEvent $event)
    {
		//AmazonPayお支払い関連ブロックを表示
		$insert = $this->app->renderView('AmazonPay/Resource/template/amazonpaybutton.twig');
		$search = '</form>';
		$replace = $search . $insert;
		$source = str_replace($search, $replace, $event->getSource());
		$event->setSource($source);
    }

public function onCartIndexRender(TemplateEvent $event)

{

//AmazonPayお支払い関連ブロックを表示

$insert = $this->app->renderView('AmazonPay/Resource/template/amazonpaybutton.twig');

$search = '</form>';

$replace = $search . $insert;

$source = str_replace($search, $replace, $event->getSource());

$event->setSource($source);

}

上記のコードの場合、元ファイル（Cart/index.twig）中の</form>を探し出し、amazonpaybutton.twigの内容を追加して出力するというものだ。

よって、次にamazonpaybutton.twigを作成する。

3. Twigファイルを作成する

twigファイルは、プラグインフォルダ内のResource＞templateの中に作成する。

例：

<script type='text/javascript'>
	window.onAmazonLoginReady = function() {
		amazon.Login.setClientId('＊＊＊クライアントIDを記載＊＊＊');
	};
</script>
<!-- テスト環境JS -->
<script type="text/javascript" src="https://static-fe.payments-amazon.com/OffAmazonPayments/jp/sandbox/lpa/js/Widgets.js"></script>
<!-- amazonでお支払いボタン -->
<div id="AmazonPayButton"></div>
<!-- amazonでお支払いボタンJS -->
<script type='text/javascript'>
	var authRequest;
	OffAmazonPayments.Button("AmazonPayButton", "＊＊＊出品者IDを記載＊＊＊", {
		type:  "PwA",
		color: "Gold",
		size:  "medium",
		authorization: function() {
			loginOptions = {scope: "profile payments:widget payments:shipping_address", popup: true};
			authRequest = amazon.Login.authorize (loginOptions, "{{ path('cart_buystep') }}");
		},
		onError: function(error) {
			// your error handling code.
			// alert("The following error occurred: "
			//  + error.getErrorCode()
			//  + ' - ' + error.getErrorMessage());
		}
	});
</script>