EC CUBE3 – パンダもん

AmazpnPayエラーハンドリング設定などの詳細を詰める[EC CUBE3でAmazonPayを利用するためのステップその８]

【記事要約】

AmazonPayはエラーハンドリングなど適切な処理をしていないと、Amazonサイドから利用を打ち切られる場合がある。そのため、確実に処理が適正に行われるよう念入りなコーディングと検証が必要になる。

■目次
1. Amazonログインステータスによる切り分け
2. エラーハンドリング
3. セッションのハンドリング
4. デバックモードでの検証

その１から７に記載した内容はあくまで概要のため、AmazonPayをEC CUBE３で利用するためには、確実な処理を行うように詳細を念入りに設計する必要がある。

※ここに書いてある記事はあくまで概要です。プログラムは自己責任で開発してください。

1. Amazonログインステータスによる切り分け

当然のことだが、Amazonアカウントにログインしている状態か否かでロジックを切り分ける必要がある。

Amaonアカウントにログインしているかどうかを判別するためには、Amazonログインと同時にCookieが作成されるため、それらを利用するのが望ましい。

Cookieの内容はEC CUBE３の管理画面の設定＞システム情報設定＞EC CUBEログ表示で閲覧できる。

デフォルトのログ表示設定はINFOレベルとなっているため、デバックレベルに変更したい場合は、app>config>eccubeのlog.ymlの設定が必要となる。

詳細はこちら
http://doc.ec-cube.net/guideline_log

僕は、ややこしさとトラブルを回避するために、会員ログイン時はAmazonPayを利用できない仕様にした。

また、Amazonログイン時は、カート画面にログアウトボタンを表示させた。

さらに、ログアウトした時点で自作のAmazon関連のセッション等をクリアする処理を施した。

2. エラーハンドリング

STEP７の３にも記載したが、Amazonとの通信時には、レスポンス、オーソリーエラーなどエラーハンドリングが必要となる

AmazonPay購入処理を完結させる[EC CUBE3でAmazonPayを利用するためのステップその7]

さらにウィジット表示の際も、Javascriptにエラーハンドリングの記載が必要になる。

この点もコーディングを施し、テストをする必要がある。

3. セッションのハンドリング

AmazonPay関連のオリジナルセッションを使った場合、Amazonアカウントでのログイン時とログアウト時でそれらのセッションハンドリングが必要になる。

忘れがちなので、これらも合わせて確認してほしい。

4. デバックモードでの検証

検証の際に絶対的に必要になってくるのが、デバックモードだ。

EC CUBEでは、echoやprint_rなどを使ってエラーを表示させようとしても、出てこない。

そのため、デバックモードを利用する。

デバックモードの利用は簡単で、

https://ショップアドレス/index_dev.php

でアクセスするだけでOKだ。

しかし、僕の場合は、index_dev.phpの47行目付近を下記のように書き換える必要があった。

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
//require_once __DIR__.'/../autoload.php';
require_once __DIR__.'/autoload.php';

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える

//require_once __DIR__.'/../autoload.php';

require_once __DIR__.'/autoload.php';

AmazonPayから渡ってくる値等も閲覧できたので、デバックモードはかなり重要だ。

他にも細かいところでつまづき、色々と調べながらのコーディングとなったが、大体の概要は紹介できたと思う。

EC CUBE３とAmazonPayがランニングコストなしで利用できれば、かなりのコスト削減になるので、ぜひ実現してほしいと思う。

2018年１月16日追記：

このシリーズを書き終えた直後にNIPPON PAYという会社からEC CUBEで利用できるAmazon Payの無料プラグインがリリースされていた模様。

https://nippon-pay.com/AmazonPay.html

僕には必要なくなったので、詳しく調べていませんが、基本無料配布のようです。もしかしたら設定サポートや何やら費用がかかる可能性もあるので、ご自身で確認の上、自己責任で利用するのもよいかもです。

[EC CUBE3でAmazonPayを利用するためのステップその1]
AmazonPayで自社ネットショップでのクレジットカード決済を可能に

[EC CUBE3でAmazonPayを利用するためのステップその2]
AmazonPayを申し込む

[EC CUBE3でAmazonPayを利用するためのステップその3]
AmazonPayの簡易テストをする

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

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

[EC CUBE3でAmazonPayを利用するためのステップその6]
AmazonPayログイン時に購入確認画面へ遷移させる表示

[EC CUBE3でAmazonPayを利用するためのステップその7]
AmazonPay購入処理を完結させる

[EC CUBE3でAmazonPayを利用するためのステップその８]
AmazpnPayエラーハンドリング設定などの詳細を詰める

AmazonPay購入処理を完結させる[EC CUBE3でAmazonPayを利用するためのステップその7]

【記事要約】

[注文する]ボタン押下と同時にEC CUBE３から購買情報をAmazonPayへ送信し、購入処理を完結させる

■目次
1. event.ymlにフックポイントを記載
2. EventファイルにonRouteFrontShoppingConfirmRequestの処理内容を記載

購入確認画面にて[注文する]ボタンが押下されたら、購買情報をAmazonPayへ送信し、購入処理を完結させる必要がある。

また、それと同時に無事処理が完結した場合、完了確認画面を表示させる必要がある。

※ここに書いてある記事はあくまで概要です。プログラムは自己責任で開発してください。

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

各々のプログラムの組み方によると思うが、僕の場合、購入処理を下記フックポイントにて実施した

ShoppingController.phpを読み解いてもらうと分かるかと思うが、処理内容に応じて、適切なフックポイントは異なり、プラグインを作成する上で、フックポイントは重要な要素となってくる。

eccube.event.route.shopping_confirm.request:
 - [onRouteFrontShoppingConfirmRequest, NORMAL]

1 2	eccube.event.route.shopping_confirm.request: - [onRouteFrontShoppingConfirmRequest, NORMAL]

function名は命名規則に則り、onRouteFrontShoppingConfirmRequestとする。

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

プログラム内容を記載するとセキュリティ上もよろしくないので、プログラムの詳細は記載せずに、大まかな流れだけ紹介します。

下記、流れに沿って、独自にコーディングしていただけたらと思う。

Amazon Pay API リファレンスの「ワンタイムAmazon Pay API」、「Amazon Payデータタイプ」、「Order Referenceの制約」の内容を熟読し、コーディングに活用する。

プログラムに慣れた人はたいていマニュアルを読まないでも、それまでの経験値で多くのシステム構築をクリアできることが多いけれども、このAmazonPayに関しては独自の仕様が多いので、とにかく提供された資料を事前によく読むのが一番の近道だと実際に構築して感じた。

（１）Amazonログイン中の場合に、AmazonPayAPIのgetOrderReferenceDetails関数で、アドレスや連作先等の詳細情報を取得し、EC CUBE３の購買情報へセットする。

＜参照URL＞

https://pay.amazon.com/jp/developer/documentation/lpwa/201952090#201952090

（２）AmazonPayのPHP SDKのcharge関数を使用し、AmazonPayへ購買情報を送信する。

＜参照URL＞

https://github.com/amzn/amazon-pay-sdk-php?ld=APJPLPADirect

（３）レスポンス、オーソリーエラーなどエラーハンドリングをする。

AmazonPayのテスト環境に用意されているテストアカウントにて、カードのエラーをテストできるアカウントが用意されている。

＜参照URL＞

オーソリー状態と理由コード
https://pay.amazon.com/jp/developer/documentation/apireference/201752950

エラーコード
https://pay.amazon.com/jp/developer/documentation/apireference/201753060

（４）処理が無事完了した場合に、完了画面を表示する。

これらAmazonPayの開発者向け情報を参照しながら、EC CUBE３の開発者情報も非常に参照した。

http://doc.ec-cube.net/

上記フローでAmazonPayの基本的な流れを作り出すことができるが、次回はさらに細かい点について紹介したいと思う。

[EC CUBE3でAmazonPayを利用するためのステップその1]
AmazonPayで自社ネットショップでのクレジットカード決済を可能に

[EC CUBE3でAmazonPayを利用するためのステップその2]
AmazonPayを申し込む

[EC CUBE3でAmazonPayを利用するためのステップその3]
AmazonPayの簡易テストをする

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

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

[EC CUBE3でAmazonPayを利用するためのステップその6]
AmazonPayログイン時に購入確認画面へ遷移させる表示

[EC CUBE3でAmazonPayを利用するためのステップその7]
AmazonPay購入処理を完結させる

[EC CUBE3でAmazonPayを利用するためのステップその８]
AmazpnPayエラーハンドリング設定などの詳細を詰める

AmazonPayログイン時に購入確認画面へ遷移させる表示[EC CUBE3でAmazonPayを利用するためのステップその6]

【記事要約】

Amazonアカウントでログインした場合、EC CUBEの画面は購入確認画面へ遷移させ、アドレスウィジットと支払いクレジットカード選択ウィジットを表示させる必要がある。

■目次
1. event.ymlにフックポイントを記載
2. EventファイルにonRouteShoppingRequestの処理内容を記載
3. EventファイルにonShoppingIndexRenderの処理内容を記載

カート画面の[Amaozonアカウントでお支払]ボタンを押して、Amazonへのログインが完了した場合、EC CUBE３の画面は購入確認画面へ遷移し、さらにアドレスウィジットと支払いクレジットカード選択ウィジットを表示させる必要がある。

そのためには、通常非会員の場合は、会員ログインまたはゲスト購入のボタンが表示された画面へ遷移するが、会員ログイン状態と同じ画面遷移にする必要がある。

※ここに書いてある記事はあくまで概要です。プログラムは自己責任で開発してください。

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

EC CUBE３のおおまかな購入ロジックはsrc>Eccube>Controller>ShoppingController.phpで定義されている。

そのため、プラグイン作成時にはこのプログラムも良く見て置いたほうがよい。

ShoppingController.phpを読み解くと、非会員でも一度注文者情報（$Customer）が作られている場合は、一度入力された情報を保持して、購入確認画面へ飛ばしていることが分かる。

そのため、Amazonログインと同時にこの$Customerを擬似的に作成し、購入確認画面へダイレクトに遷移させる。

Amazonアカウントに登録されている個人情報はウィジット表示後でないと取得できないため、ダミーの値等で仮作成しておく。

ShoppingController.php読み込み前にこの仮注文情報を作成するためのフックポイントは下記となる。

eccube.event.route.shopping.request:
 - [onRouteShoppingRequest, NORMAL]

1 2	eccube.event.route.shopping.request: - [onRouteShoppingRequest, NORMAL]

function名は命名規則に則り、onRouteShoppingRequestとする。

さらにウィジットを表示させるために、下記フックポイントを追加

Shopping/index.twig:
 - [onShoppingIndexRender,NORMAL]

1 2	Shopping/index.twig: - [onShoppingIndexRender,NORMAL]

function名は命名規則に則り、onShoppingIndexRenderとする。

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

eventファイルにonRouteShoppingRequestの処理を記載するが、その前に、ここでAmazonPayのPHP SDKを使用するため、eventには下記のように事前にAmazonSDKの環境設定を記述しておく。

例：

public function __construct(Application $app)
{
$this->app = $app;
//テスト環境
$this->amazonconfig = array(
'merchant_id' => '＊＊＊＊＊＊＊＊＊',
'access_key'  => '＊＊＊＊＊＊＊＊＊',
'secret_key'  => '＊＊＊＊＊＊＊＊＊',
'client_id'   => '＊＊＊＊＊＊＊＊＊',
'region'      => 'jp',
'currency_code' => 'JPY',
'sandbox'     => true);
}

public function __construct(Application $app)

{

$this->app = $app;

//テスト環境

$this->amazonconfig = array(

'merchant_id' => '＊＊＊＊＊＊＊＊＊',

'access_key' => '＊＊＊＊＊＊＊＊＊',

'secret_key' => '＊＊＊＊＊＊＊＊＊',

'client_id' => '＊＊＊＊＊＊＊＊＊',

'region' => 'jp',

'currency_code' => 'JPY',

'sandbox' => true);

}

＊＊＊＊＊＊＊＊＊には、独自の情報を入力。ログイン時点（ウィジット表示前）の時点でAPIから取得できるのは、氏名とEmailといった限られた情報のため、それらで仮注文者情報（＄Customer）を作る。

public function onRouteShoppingRequest(GetResponseEvent $event)
{
$app = $this->app;
$request = $this->app['request'];
$amazonconfig = $this->amazonconfig;

// Instantiate the client class with the config type
$amazonclient = new Client($amazonconfig);

// Calling the function getUserInfo with the access token parameter returns object
$userInfo = $amazonclient->getUserInfo($access_token);

//名前を全角スペースで姓名に変更
$namestr = explode("　", $userInfo['name']);
$amazonDMname01 = $namestr[0];
$amazonDMname02 = $namestr[1];

//顧客情報を設定
$Customer = new Customer();
$Customer
	->setName01($amazonDMname01)
	->setName02($amazonDMname02)
	->setEmail($userInfo['email']);

// 非会員用セッションを作成
$nonMember = array();
$nonMember['customer'] = $Customer;
$nonMember['pref'] = '1';
$app['session']->set($this->sessionKey, $nonMember);

public function onRouteShoppingRequest(GetResponseEvent $event)

{

$app = $this->app;

$request = $this->app['request'];

$amazonconfig = $this->amazonconfig;

// Instantiate the client class with the config type

$amazonclient = new Client($amazonconfig);

// Calling the function getUserInfo with the access token parameter returns object

$userInfo = $amazonclient->getUserInfo($access_token);

//名前を全角スペースで姓名に変更

$namestr = explode("　", $userInfo['name']);

$amazonDMname01 = $namestr[0];

$amazonDMname02 = $namestr[1];

//顧客情報を設定

$Customer = new Customer();

$Customer

->setName01($amazonDMname01)

->setName02($amazonDMname02)

->setEmail($userInfo['email']);

// 非会員用セッションを作成

$nonMember = array();

$nonMember['customer'] = $Customer;

$nonMember['pref'] = '1';

$app['session']->set($this->sessionKey, $nonMember);

上記コード中の$access_tokenは、Cookie中から取得することができた。

各々、取得ロジックを独自に設定してほしい。

都道府県情報がないとエラーになるため、仮に１を設定している。

紹介したコードはあくまで最低限の内容のため、その他必要ロジックを書き足して欲しい。

3. EventファイルにonShoppingIndexRenderの処理内容を記載

onShoppingIndexRenderの処理内容には、Amazonログイン中の場合に、下記内容に表示を差し替える指示を記載する

①お客様情報エリアにアドレスウィジットと支払いクレジットカードウィジットを表示

②お客様情報変更ボタンを非表示

③配送情報変更ボタンを非表示

④配送日時指定のみ表示

⑤お支払い方法選択エリアには、AmazonPayとのみ表示し、他の決済手段を非表示とする

基本的に下記パターンで上記の表示差し替え指示をコーディングする

public function onShoppingIndexRender(TemplateEvent $event)
{
$app = $this->app;
$request = $this->app['request'];

//ソース・ファイルを取得
$source = $event->getSource();			

//AmazonPayログイン中の処理
if(AmazonPayログイン中の場合を判別する条件分){
$search = '差し替え部分の文字列';
$replace = '置き換える文字列';
$source = str_replace($search, $replace, $source);
$event->setSource($source);		
}

public function onShoppingIndexRender(TemplateEvent $event)

{

$app = $this->app;

$request = $this->app['request'];

//ソース・ファイルを取得

$source = $event->getSource();

//AmazonPayログイン中の処理

if(AmazonPayログイン中の場合を判別する条件分){

$search = '差し替え部分の文字列';

$replace = '置き換える文字列';

$source = str_replace($search, $replace, $source);

$event->setSource($source);

}

正しくコーディングできれば、Amazonログインと同時に購入確認画面へ遷移し、アドレスウィジットと支払いクレジットカードウィジットが表示される。

[EC CUBE3でAmazonPayを利用するためのステップその1]
AmazonPayで自社ネットショップでのクレジットカード決済を可能に

[EC CUBE3でAmazonPayを利用するためのステップその2]
AmazonPayを申し込む

[EC CUBE3でAmazonPayを利用するためのステップその3]
AmazonPayの簡易テストをする

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

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

[EC CUBE3でAmazonPayを利用するためのステップその6]
AmazonPayログイン時に購入確認画面へ遷移させる表示

[EC CUBE3でAmazonPayを利用するためのステップその7]
AmazonPay購入処理を完結させる

[EC CUBE3でAmazonPayを利用するためのステップその８]
AmazpnPayエラーハンドリング設定などの詳細を詰める

カート画面に[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>

window.onAmazonLoginReady = function() {

amazon.Login.setClientId('＊＊＊クライアントIDを記載＊＊＊');

};

</script>

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>

作成したファイルをサーバにアップし、カート画面アクセス時にAmazonアカウントでお支払ボタンが表示されればOK。

[EC CUBE3でAmazonPayを利用するためのステップその1]
AmazonPayで自社ネットショップでのクレジットカード決済を可能に

[EC CUBE3でAmazonPayを利用するためのステップその2]
AmazonPayを申し込む

[EC CUBE3でAmazonPayを利用するためのステップその3]
AmazonPayの簡易テストをする

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

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

[EC CUBE3でAmazonPayを利用するためのステップその6]
AmazonPayログイン時に購入確認画面へ遷移させる表示

[EC CUBE3でAmazonPayを利用するためのステップその7]
AmazonPay購入処理を完結させる

[EC CUBE3でAmazonPayを利用するためのステップその８]
AmazpnPayエラーハンドリング設定などの詳細を詰める

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

【記事要約】

EC CUBE３系でのAmazonPay導入に関して、いよいよ本番実装。EC CUBEのプラグインを作成する。

■目次
1. EC CUBE3プラグイン開発の全体像をつかむ
2. AmazonPayプラグインの全体的な動き

EC CUBEはASPサービスではなく、自身のWEBサーバーにEC CUBEのプログラムを設置し、運用するタイプのネットショップだ。

大抵の場合、ホスティングサービスにEC CUBE３の自動インストール機能がある。

それによって、インストールした後、FTPなどによってサーバにアクセスし、全ファイルをダウンロードすれば、すべてのプログラムが閲覧できる。

よって今回、AmazonPayを利用できるようにするために、それらEC CUBEのコードをゴリゴリいじればよいかと考えた人も多いはずだ。

しかし、EC CUBE３になってから特に、基本的なEC CUBE３のプログラムを改変することは推奨されていない。

他のプラグインや、バージョンアップによって、変更部分が先祖返りしたり、思わぬ障害の原因になる可能性があるからだ。

そのため、EC CUBEに独自の機能を持たせるためには、プラグインによるドロップインが正規の干渉方法となっている。

そこで当初、僕もEC CUBE３のソースコードをゴリゴリ改変するつもりだったが、安全性を保つためにAmazonPayのプラグインを制作することにした。

僕が行ったプラグインの開発方法を下記に紹介する。

1. EC CUBE3プラグイン開発の全体像をつかむ

EC CUBEのプラグインを、どのように作成したら良いかEC CUBEのプラグイン開発ドキュメントが用意されている。

http://doc.ec-cube.net/plugin_tutorial-generate

AmazonPayのPHP SDKのインストールの際に、MacからSSHで接続する方法をすでに学んでいたので、

AmazonPayの簡易テストをする[EC CUBE3でAmazonPayを利用するためのステップその3]

EC CUBEのプラグイン開発ドキュメントの内容に基いてコマンドをひとつひとつ打ち込むと、app＞Pluginフォルダの中に、コマンドで指定した名前のプラグインファイル一式が自動生成された。

EC CUBEのプラグイン開発ドキュメントの中にある、新規ページの追加、利用しないページの削除、フォームの追加、変更、プラグイン用テーブルの追加、チュートリアルさらには、ベストプラクティスの内容を熟読して、プラグインに関する全般的な内容を頭に入れる。

一見遠回りのようだが、この事前に全体把握をすることは、後々の時間節約になる。

闇雲に、ひとつひとつ追求していると今自分がどこの何に向き合っているのか迷子になってしまうからだ。

こちらのプラグイン開発ドキュメントには、EC CUBE3のプラグイン仕様書も用意されている。

こちらの内容も僕はとても参照した。

http://downloads.ec-cube.net/manual/v3/plugin.pdf

2. AmazonPayプラグインの全体的な動き

今回、EC CUBE3でAmazonPayを利用するためのプラグインの具体的な内容に関しては、全内容の公表を差し控えさせていただく。

僕が紹介するヒントを確認いただいた上で、独自にコーディングを行い、さらに確実なテストを行った上で、自己責任で実装して欲しい。

なお、僕の場合、購入後の管理画面にて実質請求する処理（配送後にする処理）はAmazonPayの管理画面で行うことにしたため、EC CUBEの管理画面には実質請求の処理を組み込んでいない。

さて、プラグイン仕様書にあるように、EC CUBEのプラグインは「フックポイント」と呼ばれる各ポイントに切り込んで、独自の処理を通す。

AmazonPayプラグインの大まかな動きは下記のようになる。

１．カート画面

（１）[Amazonアカントでお支払い]ボタンを表示する

（２）会員ログイン時は[Amazonアカントでお支払い]ボタンをグレーアウト

（３）Amazonアカウントでログイン時は、その旨をメッセージ表示し、Amazonアカウントログアウトボタンを表示

（４）Amazonアカウントでログインしたら、購入確認画面にダイレクト遷移する

２．購入確認画面

（１）Amazonアカウントでログイン時、アドレスウィジットと支払いクレジットカード選択ウィジットを表示する。

（２）Amazonアカウントでログイン時は、EC CUBEの配送先変更、お客様情報変更ボタンを非表示とする

（３）Amazonアカウントでログイン時は、EC CUBEの支払い方法をAmazonPayで固定とする。

３．購入完了画面

（１）Amazonウィジットで選択したお客様情報をEC CUBEに登録する

（２）AmazonPayへ購入情報を送信する

（３）AmazonPayからエラーが返ってきた場合のエラーハンドリング

このような内容でプラグインの構築をすすめた。

[EC CUBE3でAmazonPayを利用するためのステップその1]
AmazonPayで自社ネットショップでのクレジットカード決済を可能に

[EC CUBE3でAmazonPayを利用するためのステップその2]
AmazonPayを申し込む

[EC CUBE3でAmazonPayを利用するためのステップその3]
AmazonPayの簡易テストをする

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

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

[EC CUBE3でAmazonPayを利用するためのステップその6]
AmazonPayログイン時に購入確認画面へ遷移させる表示

[EC CUBE3でAmazonPayを利用するためのステップその7]
AmazonPay購入処理を完結させる

[EC CUBE3でAmazonPayを利用するためのステップその８]
AmazpnPayエラーハンドリング設定などの詳細を詰める

AmazonPayの簡易テストをする[EC CUBE3でAmazonPayを利用するためのステップその3]

【記事要約】

EC CUBE３系でのAmazonPay導入に関して、EC CUBEに組み込む前にまず簡単なファイルを作成し、AmazonPayの大まかな動きを把握。そうすることによってEC CUBEへの組み込みイメージをつかむ。

■目次
1. [Amazonアカウントでお支払い]ボタンを表示させる（step1.html）
2. アドレスウィジェットと支払カード選択ウィジェットを表示させる(step2.html）
3.AmazonPayに売上情報を送信する（step3.php）

AmazonPayをEC CUBEに組み込む前に、まずは簡単なファイルを作成し、ローカルのファイルとAmazonPayの動きを把握すると、その後の作業がしやすい。

目次にあるように、AmazonPayの全体的な流れをつかむために３つのファイルを作った。

お支払ボタンを表示させる機能とアドレス・支払いウィジェットを表示させるには、特にプログラミングは必要なかった。

AmazonPayへ売上電文を送信したり、AMAZON_ORDER_REFERENCE_IDという一意なキーから住所や連作先を取得する場合にプログラミングが必要となる。

なお、以下の作業内容は、AmazonPayでの設定がすべて完了し、テスト環境での実施を想定している。

初期設定とテスト環境に関しては、AmazonPayインテグレーションガイドのStep1登録とStep2 SDKの設定を参照

1. [Amazonアカウントでお支払い]ボタンを表示させる（step1.html）

AmazonPayでお支払ボタンを表示させる手順は、インテグレーションガイドのStep3 ボタンウィジェットの追加を参照した。

基本的にこのページに記載されているコードでAmazonお支払ボタンが表示される。

エラーハンドリングなどは省略されているが、取り急ぎテスト環境での動作検証なので、本番環境のコードにエラーハンドリングをしっかり記載する。

分かりにくかった点としては、SELLER-IDと記載されている箇所には、AmazonPayでログインし、インテグレーション＞MWS Access Keyで見ることができる出品者IDを記載する必要があった。

REDIRECT-URLには、step2.htmlを記載する。

その他のパラメータの詳細は、ボタンウィジェットのページで確認できる。

2. アドレスウィジェットと支払カード選択ウィジェットを表示させる(step2.html）

アドレスウィジェットと支払いカードウィジェットを表示させるstep2.htmlは、インテグレーションガイドのStep 4:アドレス帳とお支払い方法ウィジェットの追加を参照した。

ここで、アドレスウィジェットと支払いカードウィジットが表示されると、orderReferenceIdが取得できるようになる。

PythonとRubyのサンプルコードが表示されているが、ページ下部の「アドレス帳ウィジェット」と「お支払い方法ウィジェット」のコードを記載すれば、それぞれのウィジットが表示されるはずだ。

AmazonPayに売上情報を送信するために、orderReferenceIdと支払い総合計が必要になる。

そのため、次のstep3.phpへのフォームボタンを用意し、hiddenで値を渡すようにコーディングを追加した。

<form action="step3.php" method="post">
<input type="hidden" name="oRId" id="oRId" value="">
<input type="hidden" name="OrderTotal" id="OrderTotal" value="1500">
<input type="submit" value="submit">
</form>

</form>

oRIDには、orderReferenceId。

支払い総額は、OrderTotalとし、valueに1500と記載し、1500円を仮の支払い総額とした。

さらに、orderReferenceIdを取得し、hiddenのoRIdに自動的に反映させるJavascriptを追加

onOrderReferenceCreate: function (orderReference) {
            var orderReferenceId = orderReference.getAmazonOrderReferenceId();
            var el;
            if ((el = document.getElementById("orderReferenceId"))) {
              el.value = orderReferenceId;
            }
			
document.getElementById('oRId').value=orderReferenceId;

onOrderReferenceCreate: function (orderReference) {

var orderReferenceId = orderReference.getAmazonOrderReferenceId();

var el;

if ((el = document.getElementById("orderReferenceId"))) {

el.value = orderReferenceId;

}

document.getElementById('oRId').value=orderReferenceId;

インテグレーションガイドのStep 5:注文詳細のセットと確認も参照するとよい。

なお、インテグレーションガイドのStep5に記載されているサンプルコードはPHP以外のものなので、取り急ぎ見なくてOK。

なお、インテグレーションで紹介されているコードにはエラーハンドリングが省略されているので、これも本番環境でしっかり記述する必要がある。

3. AmazonPayに売上情報を送信する（step3.php）

step2.htmlから渡ってきた情報をAmazonPayに渡し、決済を完結させる必要がある。

ここで登場するのが、SDKだ。

AmazonPayのPHP SDKはこちら＞＞

これをどこで使うべきなのかが分からず当初苦労した。

なぜなら、Amazonアカウントでお支払ボタン（step1）やウィジットの表示（step2）にもSDKを絡ませる必要があると思い込んでいたからだ。

また、インストール方法に「Installing using Composer」と記載されているのも意味が分からなかった。

とことん調べてみると、元々composerがインストールされているサーバに直接アクセスするSSHを利用して、「composer require amzn/amazon-pay-sdk-php」と電文送信すれば、Amazon Pay SDK (PHP)がインストールされるということだった。

幸いにして、EC CUBEは、このComposerが利用されている。

vendorという名前のフォルダを見ていると分かるが、中にComposer関連のファイルが格納されている。

よって、SSHでサーバにアクセスし、「composer require amzn/amazon-pay-sdk-php」と打ち込めば、vendorフォルダの中に、amznというフォルダができて、AmazonPay関連のSDKファイルが追加される。

しかし結果的に後からわかったことは、この面倒くさい手続きをしなくとも、AmazonPayのPHP SDKのページからファイルをダウンロードして、パスを通せば、Amazon Pay SDK (PHP)の機能は利用することができた。

Composerというものも、EC CUBE３にすでにComposerが存在することも知らなかったため、Composerのインストールから、MacからSSHでサーバにアクセスする方法も調べ、実施してみたが、結局はファイルをダウンロードして、サーバにアップロードし、step3.phpのファイルからamzn内のClient.phpへパス通すという作業で問題なかった。

そして、AmazonPayと決済完結の処理を実施するために使うのが、AmazonPayのPHP SDKのページに記載されいる「Convenience Methods」の内容だ。

Amazon Pay SDK (PHP)ですでに用意されているchargeという関数を使えば、Standard Payments（ワンタイムペイメント：ワ） / Recurring Payments（定期支払：定）で必要な下記の３ステップの処理を一括で行ってくれるのである。

①SetOrderReferenceDetails（ワ） / SetBillingAgreementDetails（定）
②ConfirmOrderReference（ワ） / ConfirmBillingAgreement（定）
③Authorize（ワ） / AuthorizeOnBillingAgreement（定）

charge関数を実施するために必要なパラメータの詳細も記載されている。

namespace AmazonPay;

//AmazonPay/Client.phpへのパスを記載
require_once '/●●●●●●/AmazonPay/Client.php';
// or, instead of using require_once, you can use the phar file instead
// include 'file:///Macintosh HD/Library/WebServer/Documents/amazon-pay.phar';

//●●●●●●は自分のAmazonPayの情報を記載
// PHP Associative array
$config = array(
    'merchant_id' => '●●●●●●',
    'access_key'  => '●●●●●●',
    'secret_key'  => '●●●●●●',
    'client_id'   => '●●●●●●',
    'region'      => 'jp',
    'currency_code' => 'JPY',
    'sandbox'     => true);

// or, instead of setting the array in the code, you can
// initialze the Client by specifying a JSON file
// $config = 'PATH_TO_JSON_FILE';

// Instantiate the client class with the config type
$client = new Client($config);

// Also you can set the sandbox variable in the config() array of the Client class by
//$client->setSandbox(true);

// Create an array that will contain the parameters for the charge API call
$requestParameters = array();

//step2.htmlからのoRId（amazon_reference_id）を取得
// Adding the parameters values to the respective keys in the array
$requestParameters['amazon_reference_id'] = $_POST['oRId'];

// Or
// If $requestParameters['amazon_reference_id'] is not provided,
// either one of the following ID input is needed
//$requestParameters['amazon_order_reference_id'] = $_POST['oRId'];
//$requestParameters['amazon_billing_agreement_id'] = 'AMAZON_BILLING_AGREEMENT_ID';

$requestParameters['seller_id'] = null;
$requestParameters['charge_amount'] = $_POST['OrderTotal'];
$requestParameters['currency_code'] = 'JPY';
$requestParameters['authorization_reference_id'] = '1';
$requestParameters['transaction_timeout'] = 0;
$requestParameters['capture_now'] = false; //true for Digital goods
//$requestParameters['charge_note'] = '';
$requestParameters['charge_order_id'] = '1234-Example-Order';
$requestParameters['store_name'] = 'ネットショップテスト';
$requestParameters['platform_Id'] = null;
//$requestParameters['custom_information'] = 'Any_Custom_String';
$requestParameters['mws_auth_token'] = null;

// Get the Authorization response from the charge method
$response = $client->charge($requestParameters);

//AmazonPayから戻ってきた電文を表示させるために記載
print_r($response);

namespace AmazonPay;

//AmazonPay/Client.phpへのパスを記載

require_once '/●●●●●●/AmazonPay/Client.php';

// or, instead of using require_once, you can use the phar file instead

// include 'file:///Macintosh HD/Library/WebServer/Documents/amazon-pay.phar';

//●●●●●●は自分のAmazonPayの情報を記載

// PHP Associative array

$config = array(

'merchant_id' => '●●●●●●',

'access_key' => '●●●●●●',

'secret_key' => '●●●●●●',

'client_id' => '●●●●●●',

'region' => 'jp',

'currency_code' => 'JPY',

'sandbox' => true);

// or, instead of setting the array in the code, you can

// initialze the Client by specifying a JSON file

// $config = 'PATH_TO_JSON_FILE';

// Instantiate the client class with the config type

$client = new Client($config);

// Also you can set the sandbox variable in the config() array of the Client class by

//$client->setSandbox(true);

// Create an array that will contain the parameters for the charge API call

$requestParameters = array();

//step2.htmlからのoRId（amazon_reference_id）を取得

// Adding the parameters values to the respective keys in the array

$requestParameters['amazon_reference_id'] = $_POST['oRId'];

// Or

// If $requestParameters['amazon_reference_id'] is not provided,

// either one of the following ID input is needed

//$requestParameters['amazon_order_reference_id'] = $_POST['oRId'];

//$requestParameters['amazon_billing_agreement_id'] = 'AMAZON_BILLING_AGREEMENT_ID';

$requestParameters['seller_id'] = null;

$requestParameters['charge_amount'] = $_POST['OrderTotal'];

$requestParameters['currency_code'] = 'JPY';

$requestParameters['authorization_reference_id'] = '1';

$requestParameters['transaction_timeout'] = 0;

$requestParameters['capture_now'] = false; //true for Digital goods

//$requestParameters['charge_note'] = '';

$requestParameters['charge_order_id'] = '1234-Example-Order';

$requestParameters['store_name'] = 'ネットショップテスト';

$requestParameters['platform_Id'] = null;

//$requestParameters['custom_information'] = 'Any_Custom_String';

$requestParameters['mws_auth_token'] = null;

// Get the Authorization response from the charge method

$response = $client->charge($requestParameters);

//AmazonPayから戻ってきた電文を表示させるために記載

print_r($response);

print_r($response);と記載したので、step2.htmlからstep3.phpに画面が変わった時に、AmazonPayからのレスポンス内容が表示される。

レスポンスコードが200で帰ってくれば、OKということになる。

エラーレスポンスコードに関しては、エラーコードのページを参照。

step1.htmlからstep3.phpの一連の流れを実際に自分の手で掴んでみると、今後の作り込みイメージも湧きやすくなったと思う。

[EC CUBE3でAmazonPayを利用するためのステップその1]
AmazonPayで自社ネットショップでのクレジットカード決済を可能に

[EC CUBE3でAmazonPayを利用するためのステップその2]
AmazonPayを申し込む

[EC CUBE3でAmazonPayを利用するためのステップその3]
AmazonPayの簡易テストをする

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

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

[EC CUBE3でAmazonPayを利用するためのステップその6]
AmazonPayログイン時に購入確認画面へ遷移させる表示

[EC CUBE3でAmazonPayを利用するためのステップその7]
AmazonPay購入処理を完結させる

[EC CUBE3でAmazonPayを利用するためのステップその８]
AmazpnPayエラーハンドリング設定などの詳細を詰める

AmazonPayを申し込む[EC CUBE3でAmazonPayを利用するためのステップその2]

【記事要約】

EC CUBE３系でのAmazonPay導入に関して、まずAmazonPayへの申し込みが必要。実際に申し込みをしてみた経緯を紹介。

■目次
1. AmazonPay申し込みの必須条件
2. 必要書類の提出と手続き
3.AmazonPay管理画面設定
3.開発者向け情報を熟読

AmazonPayを利用するためにはまず、AmazonPayへの申し込みが必須。

実際に申し込み作業をしてみた経過についてご紹介。

1. AmazonPay申し込みの必須条件

AmazonPayを利用する必須条件には下記の２点がある。

①　法人であること

②　法人カードもしくは社長の個人カードがあること

①が多くの場合、ハードルになり、ガッカリされる方も多いだろう。

②に関しては、僕は法人カードを持っていないので、個人（代表取締役）のカードで手続きができた。

①と②の条件を満たす場合は、ちゃんとした会社であれば、問題なく審査は通ると思う。

まずは、AmazonPayのページで条件などをよく読んだ上で

下記ページからAmazonPayの申し込みをする。

https://pay.amazon.com/jp/contactsales

2. 必要書類の提出と手続き

申し込みをすると、自動返信メール（メール①）が送られてくる。

その後、僕の場合は翌日、審査に関する詳しいメール（メール②）が送られてきた。

具体的な手順や審査過程、開発ソリューション会社の提案などが書かれている。

審査の流れは下記のような内容だった。

（１）審査書類提出（御社）

（２）セラーアカウント作成方法の案内（Amazon）

（３）セラーアカウント登録（御社）→完了後、Amazonへ連絡

（４）審査開始（Amazon/１～２週間を要します）

（５）審査完了の連絡（Amazon）

（１）の審査書類には、登記簿（履歴事項全部証明書）、代表者の身分を証明する書類、銀行口座（法人）を証明する書類が必要だった。

（２）のセラーアカウントは、既にAmazon出品サービスのセラーアカウントを持っていたとしてもまた別にアカウントを作る必要があるとのことだった。

実際僕も出品アカウントを持っていたので、別のメールアドレスで、AmazonPay用のセラーアカウントを新しく作った。

メール②が送られてきたその日のうちに審査書類を提出。

すると審査用書類受理の自動返信メール（メール③）が送られてきて、さらにその日の内にセラーアカウント作成方法についての案内メール（メール④）が送られてきた。

ちょっとバタバタしていたので、メール④が来た後、しばらく放おっておいたところ、ふたたび同じ内容のメールが３日後に送られてきた。

そのため、直ぐにセラーアカウント作成をしたところ、セラーアカウントの設定で漏れている箇所の指摘がメールで送られてきた。（メール⑤）

修正したところ、審査に１週間かかるという内容のメール（メール⑥）が送られてきて、実質その日から６日後に審査完了の連絡メール（メール⑦）が届いた。

必要書類の提出やセラーアカウントの作成などをテンポよくやれば、一週間ほどで手続きが完了するだろう。

なお、各メールに丁寧な説明やマニュアルがリンクされているので、迷うこと無く作業ができると思う。

3. AmazonPay管理画面設定

審査完了メール（メール⑦）に開発に必要なキーの確認方法や初期の設定について詳細が書かれているマニュアルが記載されている。

マニュアルやメールの説明文に沿って、まずはAmazonPayの管理画面の設定や確認が必要になる。

基本的に本番環境、テスト環境、ログイン設定の３パターンへの切り替えを行って、都度必要な確認や設定を行う。

4. 開発者向け情報を熟読

AmazonPayの利用準備が整ったら、次はEC CUBEとの連携のための開発に取り掛からなければならない。

そこで、この段階から一番見るようになるのが、開発者向け情報のページだ。

https://pay.amazon.com/jp/developer/documentation

僕はワンタイムペイメントを利用するつもりで、またEC CUBE３はPHPを利用しているので、一番良く見たのは、「ワンタイムペイメント」のページと「イントロダクション」のページ、そして、PHPのSDKページだった。

とにかく、ここを熟読することが大事だ。

なお、PHPのSDKページは英語しかない。しかもサンプルへのリンクが切れている…。

詳しくはまた追って書くが、英語のスキルも多少は必要になってくるといえるだろう。

では、次回また続きをご紹介したいと思う。

[EC CUBE3でAmazonPayを利用するためのステップその1]
AmazonPayで自社ネットショップでのクレジットカード決済を可能に

[EC CUBE3でAmazonPayを利用するためのステップその2]
AmazonPayを申し込む

[EC CUBE3でAmazonPayを利用するためのステップその3]
AmazonPayの簡易テストをする

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

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

[EC CUBE3でAmazonPayを利用するためのステップその6]
AmazonPayログイン時に購入確認画面へ遷移させる表示

[EC CUBE3でAmazonPayを利用するためのステップその7]
AmazonPay購入処理を完結させる

[EC CUBE3でAmazonPayを利用するためのステップその８]
AmazpnPayエラーハンドリング設定などの詳細を詰める

AmazonPayで自社ネットショップでのクレジットカード決済を可能に[EC CUBE3でAmazonPayを利用するためのステップその1]

【記事要約】

EC CUBE３系でのAmazonPay導入に関して、まず効率的に費用を抑えて自社ネットショップにクレジットカードを導入することにフォーカスします。

■目次
1. ネットショップにおけるクレジットカード決済の重要性とランニングコストの兼ね合いについて
2. ネットショップ運営者と利用者双方にとって魅力的なAmazonPay
3.初期導入が難点のAmazonPay

圧倒的にランニングコストがかからないネットショップ運営の筆頭と言えばEC CUBEだ。

無料で利用できるネットショッププログラムのため、うまく運用すればランニングコストはサーバとドメイン代程度。

そんなEC CUBEなどのネットショップで重要になってくるのが決済手段だ。

EC CUBEの最新のバージョンはEC CUBE３系と言われ、その前の２系とはプログラム構成などが全く異なっている。

僕は２系のEC CUBEに出会った後、しばらくEC CUBEと触れ合う機会がなかったため、久しぶりにEC CUBEの仕事をした際に、３系になったEC CUBEのあまりの変わりように驚いた。

今回、このEC CUBE３系でAmazonユーザがAmazonアカウントで買い物することを可能にするAmazonPayの導入について紹介したいと思う。

1. ネットショップにおけるクレジットカード決済の重要性とランニングコストの兼ね合いについて

ネットショップで欠かせない決済手段といえば、クレジットカード決済だ。

このご時世、クレジットカード決済があるかないかは、ネットショップの売上に大きく影響する。

クレジットカード決済は、ネットショップでは、必ず利用できるようにするべきと言っても過言ではない。

しかし、EC CUBEだけでなく、さまざまなネットショップで利用できるクレジットカード決済サービスは初期費用や月額費用が発生することが多いものが多く、さらには売れた金額に応じて手数料が取られる。

ネットショップの運営自体のランニングコストを抑えたとしても、このクレジットカード決済サービスのランニングコストがかかってしまうため、クレジットカード決済の導入を躊躇してしまうネットショップ運営者も多い。

僕のクライアントでも、このような理由からクレジットカード決済の導入を躊躇して悪循環を呼び、ネットショップの売上がなかなか伸びないクライアントがいる。

そんな時の救世主の様な存在がAmazonPayだ。

https://pay.amazon.com/jp

2. ネットショップ運営者と利用者双方にとって魅力的なAmazonPay

AmazonPayは、自社ネットショップにAmazonPayの機能をもたせれば、Amazonのアカウントを持っているユーザがログインして、Amazonアカウントに登録されたクレジットカードで決済ができるというサービスだ。

初期費用：無料、月額費用：無料、トランザクション料：不要で、販売手数料４％のみがコストとしてかかるという費用構成もとても良心的だ。

そのため、自社のネットショップにクレジットカード決済を導入したいが、ランニングコストは極力押させたいという店舗運営者にはとても魅力的なサービスだ。

ネットショップ利用者にとっては、Amazonアカウントで決済をするという安心感と氏名や連絡先、配送先を入力しなくていいという手軽さが魅力になる。

Amazonアカウントを持っているユーザは、このご時世ごまんといるだろう。

そんなAmazonユーザがあなたのネットショップに訪れ、Amazonアカウントで決済できることは、「楽」「安心」という魅力以外の何ものでも無いはずだ。

3. 初期導入が難点のAmazonPay

しかし、カラミーショップなどの、ネットショップクラウドサービスでは、多少制約があり、毎月の利用料が発生するものの、AmazonPayを簡単に導入できる仕組みが用意されているようだが、EC CUBEには用意がされていない。

調べたところ、月額5,000円でAmazonPayを利用できるEC CUBEのプラグインが販売されていたが、それでは、クレジットカード決済のランニングコストを抑える意味が消失してしまう。

よって、一番コストがかからないEC CUBEへのAmazonPay導入方法は自分でその環境を構築することだった。

最初に言っておくと、とても難しかった。

だが、ある程度プログラミングの知識がある人間なら不可能では無いと思う。

僕は、プログラミングの専門畑ではないが、基本的なPHPプログラムを読んだり、組むことができるレベルだ。

そのレベルの僕ができたというのが一つの目安になるかと思う。

なお、Amazonからは、「本番リリース後も、購入者に被害が出る恐れがあると弊社が判断した場合などにおいてAmazon Payカスタマー契約に基づき貴社アカウントの一時停止もしくは解除をさせて頂く場合がございます。」とメールに記載されていたので、厳重なテスト及び、着実なシステム構築が必要だ。

サイトの利用者に迷惑をかけるわけには行かないので、僕もテストケースを作り、念入りなテストを何百回も厳重に行った。

プログラミングができない、もしくはそれを代わりに安価にお願いできる人がいない場合は、AmazonPayの利用を諦めるか、先ほど記載した有料のプラグインを利用するしか無くなってくるだろう。

なお、参考までに、ヤマトフィナンシャルの決済サービスもコストがかからない。

初期費、月額利用料が無料で、売れた分に対して手数料がかかるというAmazonPayと同じ条件だ。

ヤマトフィナンシャルは手続きをすれば、EC CUBE3系にも対応したプラグインが無料で利用できる。

僕は、コンバージョンアップのために、ヤマトフィナンシャルの決済サービスとAmazonPayを両方導入した。

Amazonアカウントユーザのコンバージョンをアップしたいという目的があれば、AmazonPayを導入するしかないが、クレジットカード決済だけを導入することが目的なら、ヤマトフィナンシャルの決済サービスを導入するほうがはるかに簡単だ。

また、AmazonPay導入支援を行っているシステム会社や、AmazonPayを利用できるネットショップサービスは下記ページで確認できる。

https://pay.amazon.com/jp/integration-options

では、次回また続きをご紹介したいと思う。

[EC CUBE3でAmazonPayを利用するためのステップその1]
AmazonPayで自社ネットショップでのクレジットカード決済を可能に

[EC CUBE3でAmazonPayを利用するためのステップその2]
AmazonPayを申し込む

[EC CUBE3でAmazonPayを利用するためのステップその3]
AmazonPayの簡易テストをする

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

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

[EC CUBE3でAmazonPayを利用するためのステップその6]
AmazonPayログイン時に購入確認画面へ遷移させる表示

[EC CUBE3でAmazonPayを利用するためのステップその7]
AmazonPay購入処理を完結させる

[EC CUBE3でAmazonPayを利用するためのステップその８]
AmazpnPayエラーハンドリング設定などの詳細を詰める

EC CUBE３新しいスタイル（CSS）を追加

【記事要約】

EC CUBE３にオリジナルのスタイル（CSS）を追加する方法を紹介します。とっても簡単！テンプレートはデフォルトのテンプレートです。

EC CUBE3でネットショップを構築。

独自のスタイル（CSS）を適応させたい場合のやり方をご説明します。

EC CUBEのデフォルトテンプレートを使用していることを前提としています。

■目次
1. CSSファイルを作る
2. ベースとなるテンプレートを書き換える
3. スタイル（CSS）が反映されているか確認する

1. CSSファイルを作る

①　FTPでEC CUBEのファイルがアップされているサーバにアクセスし、下記パスのフォルダを参照する。

html/template/default/css/

②　①のフォルダ内にあるstyle.cssをダウンロード。

やり方としては、ダウンロードしたstyle.cssに反映させたいスタイルを追記した後、再度アップロードすればよいが、ここでは、新しく独自のCSSファイルを作成するやり方を紹介します。

style.cssをnew.cssなど①のフォルダ内にないファイル名に変更。

——————————–

@charset “utf-8”;

@import url(“bootstrap.custom.min.css”); /* only Grid system CSS */

——————————–

上記はそのまま残し、
/* ——————————–
Common style
——————————– */

を

/* ——————————–
New style
——————————– */

などに変更。

それ以下の内容は一旦削除し、新しいスタイルを追加する。

③　新しく作ったnew.cssファイルをダウンロード元のフォルダにアップロードする。

html/template/default/css/

2. ベースとなるテンプレートを書き換える

①　FTPでEC CUBEのファイルがアップされているサーバにアクセスし、下記パスのフォルダを参照する。

src/Eccube/Resource/template/default

ここには、EC CUBEの表示の基本となるファイルが格納されている。

②　①のフォルダよりdefault_frame.twigをダウンロードする。ダウンロードしたら、必ずバックアップを取る（書き換えミスにより不都合が生じた場合に直ぐに元に戻せるように）。

③　default_frame.twigの45行目あたり、各CSSを読み込む記載がされている辺りの一番下に下記を追記して保存する。

④　変更したdefault_frame.twigファイルをダウンロード元のフォルダにアップロードする。

src/Eccube/Resource/template/default

3. スタイル（CSS）が反映されているか確認する

１．２に従ってファイルをアップした後、ブラウザで指定したスタイル（CSS）が反映されているか確認するのだが、僕の場合、一旦キャッシュクリアとEC CUBEのキャッシュ管理より操作をしないと、新しいスタイルが反映されなかった。

①　ブラウザのキャッシュクリアをする。

使っているブラウザ名＋キャッシュクリアで検索すると、サポートセンターの説明ページ等が見つかるのでそれに沿って操作をする。

②　EC CUBE管理画面、コンテンツ管理＞キャッシュ管理をクリック

今回は、twigファイルを更新したので、twigにチェックを入れて[キャッシュ削除]ボタンを押す。

③　ブラウザで表示させてスタイル（CSS）が反映されているか確認しよう。

EC CUBE３固定ページを増やす&メニュー追加

【記事要約】

EC CUBE３にオリジナルの固定ページを追加する方法とそのページへのリンクをメニューに追加する方法を紹介します。テンプレートはデフォルトのテンプレートです。

EC CUBE3でネットショップを構築。

サイト内に「初めての方へ」や「お手入れ方法」などについてのオリジナルのページを追加したいと思い、色々調べたところ、固定ページ自体はすぐに作れるが、メニューに固定ページを追加したい場合に、少しコードの変更が必要でした。今回はその固定ページ追加のやり方を紹介します。

EC CUBEのデフォルトテンプレートを使用していることを前提としています。

■目次
1. 固定ページを作る
2. 固定ページの内容を作る
3. メニューに固定ページを追加する

1. 固定ページを作る

①メニューのコンテンツ管理＞ページ管理をクリック。

②ページ管理画面、一番下の[新規入力]ボタンをクリック

③新規ページの入力画面に必要項目を入力し、[登録]ボタンを押す

１）作る固定ページにちなんだ名称、URL(半角英数)、ファイル名(半角英数)を入力

２）ファイル名下のテキストエリアにはこの時点では適当に「あああ」など仮テキストを入力

２）必須事項の必要に応じて、author、description、keyword、robotsを入力

④コンテンツ管理＞ページ管理でページ一覧へ戻ると、登録した新しいページが表示される。

2. 固定ページの内容を作る

①ページ一覧（コンテンツ管理＞ページ管理）で新しく作るページの構成に一番近いページ（例えばプライバシーポリシーなど）の「…」マークを押し、[ページ編集]をクリック。

②ファイル名下のテキストエリアの内容をコピーする。

③ページ一覧で新しく作ったページの「…」マークを押し、[ページ編集]をクリック。先ほどコピーした内容をファイル名下のテキストエリアにペーストする。

{% block main %}から{% endblock %}が実際のページの内容になる。

プライバシーポリシーのソースをコピペした場合、

<h1 class=”page-heading”>プライバシーポリシー</h1>を書き換えればメインタイトルが変わる。

さらに、 class=”col-md-10 col-md-offset-1″と記載されいているdivタグの内容を編集すれば、ページコンテンツが出来上がる。

プライバシーポリシーのソースの場合「privacy_box_*****」となっている各divタグのidは削除してOK。

④ページ内容を書き換えたら、忘れずに[登録]ボタンを押そう。

これで、固定ページの出来上がりだ。

ページ編集画面で登録したURLをブラウザに直接打ち込むか、ページ一覧の「…」ボタンから[レイアウト編集]をクリックした画面にある[プレビュー]ボタンより、実際の見え方を確認することができる。

3. メニューに固定ページを追加する

①コンテンツ管理＞ブロック管理からブロック一覧に移動。

②「カテゴリ」の「…」ボタンから[編集]をクリックする。

③「ブロックデータ」のテキストエリアにあるコード一番下を下記のように書き換える。

ソースコードは間違えた時のため、バックアップを取っておいた方が安全。（メモ帳にコピーして保存など）

＊＊＊元のソースコード＊＊＊

<nav id=”category” class=”drawer_block pc”>
<ul class=”category-nav”>
{% for Category in Categories %}
{{ _self.tree(Category) }}
{% endfor %}
</ul> <!– category-nav –>
</nav>

＊＊＊固定ページのリンクを追加＊＊＊

<nav id=”category” class=”drawer_block pc”>
<ul class=”category-nav”>
{% for Category in Categories %}
{{ _self.tree(Category) }}
{% endfor %}
<li><a href=”http://****ページURLを記載****“>メニュー名称を記載</a></li>
</ul> <!– category-nav –>
</nav>

④[登録]ボタンを押して保存する。

以上で、固定ページを新しく作成し、メニューからリンクすることができるようになる。