思うこと海外旅行は魂の開放ですクラムチャウダーでお腹いっぱい。CUBE3でAmazonPayを利用するためのステップその8]【記事要約】AmazonPayはエラーハンドリングなど適切な処理をしていないと、Amazonサイドから利用を打ち切られる場合がある。そのため、確実に処理が適正に行われるよう念入りなコーディングと検証が必要になる。CUBE3で利用するためには、確実な処理を行うように詳細を念入りに設計する必要がある。※ここに書いてある記事はあくまで概要です。プログラムは自己責任で開発してください。Amazonログインステータスによる切り分け当然のことだが、Amazonアカウントにログインしている状態か否かでロジックを切り分ける必要がある。Amaonアカウントにログインしているかどうかを判別するためには、Amazonログインと同時にCookieが作成されるため、それらを利用するのが望ましい。CUBEログ表示で閲覧できる。デフォルトのログ表示設定はINFOレベルとなっているため、デバックレベルに変更したい場合は、app>config>eccubeのlog.ymlの設定が必要となる。詳細はこちらhttp://doc.ec-cube.net/guideline_log僕は、ややこしさとトラブルを回避するために、会員ログイン時はAmazonPayを利用できない仕様にした。Amazonログイン時は、カート画面にログアウトボタンを表示させた。ログアウトした時点で自作のAmazon関連のセッション等をクリアする処理を施した。CUBE3でAmazonPayを利用するためのステップその7]さらにウィジット表示の際も、Javascriptにエラーハンドリングの記載が必要になる。この点もコーディングを施し、テストをする必要がある。セッションのハンドリングAmazonPay関連のオリジナルセッションを使った場合、Amazonアカウントでのログイン時とログアウト時でそれらのセッションハンドリングが必要になる。忘れがちなので、これらも合わせて確認してほしい。検証の際に絶対的に必要になってくるのが、デバックモードだ。CUBEでは、echoやprint_rなどを使ってエラーを表示させようとしても、出てこない。そのため、デバックモードを利用する。デバックモードの利用は簡単で、https://ショップアドレス/index_dev.phpでアクセスするだけでOKだ。僕の場合は、index_dev.phpの47行目付近を下記のように書き換える必要があった。__DIR__.'/autoload.php';AmazonPayから渡ってくる値等も閲覧できたので、デバックモードはかなり重要だ。他にも細かいところでつまづき、色々と調べながらのコーディングとなったが、大体の概要は紹介できたと思う。CUBE3とAmazonPayがランニングコストなしで利用できれば、かなりのコスト削減になるので、ぜひ実現してほしいと思う。Payの無料プラグインがリリースされていた模様。https://nippon-pay.com/AmazonPay.html僕には必要なくなったので、詳しく調べていませんが、基本無料配布のようです。したら設定サポートや何やら費用がかかる可能性もあるので、ご自身で確認の上、自己責任で利用するのもよいかもです。購入確認画面にて[注文する]ボタンが押下されたら、購買情報をAmazonPayへ送信し、購入処理を完結させる必要がある。表示させる必要がある。※ここに書いてある記事はあくまで概要です。プログラムは自己責任で開発してください。各々のプログラムの組み方によると思うが、僕の場合、購入処理を下記フックポイントにて実施したShoppingController.phpを読み解いてもらうと分かるかと思うが、処理内容に応じて、適切なフックポイントは異なり、プラグインを作成する上で、フックポイントは重要な要素となってくる。NORMAL]function名は命名規則に則り、onRouteFrontShoppingConfirmRequestとする。EventファイルにonRouteFrontShoppingConfirmRequestの処理内容を記載プログラム内容を記載するとセキュリティ上もよろしくないので、プログラムの詳細は記載せずに、大まかな流れだけ紹介します。下記、流れに沿って、独自にコーディングしていただけたらと思う。Referenceの制約」の内容を熟読し、コーディングに活用する。プログラムに慣れた人はたいていマニュアルを読まないでも、それまでの経験値で多くのシステム構築をクリアできることが多いけれども、このAmazonPayに関しては独自の仕様が多いので、とにかく提供された資料を事前によく読むのが一番の近道だと実際に構築して感じた。CUBE3の購買情報へセットする。SDKのcharge関数を使用し、AmazonPayへ購買情報を送信する。<参照URL>https://github.com/amzn/amazon-pay-sdk-php?ld=APJPLPADirect(3)レスポンス、オーソリーエラーなどエラーハンドリングをする。AmazonPayのテスト環境に用意されているテストアカウントにて、カードのエラーをテストできるアカウントが用意されている。<参照URL>オーソリー状態と理由コードhttps://pay.amazon.com/jp/developer/documentation/apireference/201752950エラーコードhttps://pay.amazon.com/jp/developer/documentation/apireference/201753060(4)処理が無事完了した場合に、完了画面を表示する。CUBE3の開発者情報も非常に参照した。http://doc.ec-cube.net/上記フローでAmazonPayの基本的な流れを作り出すことができるが、次回はさらに細かい点について紹介したいと思う。CUBEの画面は購入確認画面へ遷移させ、アドレスウィジットと支払いクレジットカード選択ウィジットを表示させる必要がある。CUBE3の画面は購入確認画面へ遷移し、さらにアドレスウィジットと支払いクレジットカード選択ウィジットを表示させる必要がある。そのためには、通常非会員の場合は、会員ログインまたはゲスト購入のボタンが表示された画面へ遷移するが、会員ログイン状態と同じ画面遷移にする必要がある。※ここに書いてある記事はあくまで概要です。プログラムは自己責任で開発してください。CUBE3のおおまかな購入ロジックはsrc>Eccube>Controller>ShoppingController.phpで定義されている。そのため、プラグイン作成時にはこのプログラムも良く見て置いたほうがよい。ShoppingController.phpを読み解くと、非会員でも一度注文者情報($Customer)が作られている場合は、一度入力された情報を保持して、購入確認画面へ飛ばしていることが分かる。そのため、Amazonログインと同時にこの$Customerを擬似的に作成し、購入確認画面へダイレクトに遷移させる。Amazonアカウントに登録されている個人情報はウィジット表示後でないと取得できないため、ダミーの値等で仮作成しておく。ShoppingController.php読み込み前にこの仮注文情報を作成するためのフックポイントは下記となる。NORMAL]function名は命名規則に則り、onRouteShoppingRequestとする。[onShoppingIndexRender,NORMAL]function名は命名規則に則り、onShoppingIndexRenderとする。SDKを使用するため、eventには下記のように事前にAmazonSDKの環境設定を記述しておく。true);}*********には、独自の情報を入力。ログイン時点(ウィジット表示前)の時点でAPIから取得できるのは、氏名とEmailといった限られた情報のため、それらで仮注文者情報($Customer)を作る。$nonMember);上記コード中の$access_tokenは、Cookie中から取得することができた。各々、取得ロジックを独自に設定してほしい。都道府県情報がないとエラーになるため、仮に1を設定している。紹介したコードはあくまで最低限の内容のため、その他必要ロジックを書き足して欲しい。$source);$event->setSource($source);}正しくコーディングできれば、Amazonログインと同時に購入確認画面へ遷移し、アドレスウィジットと支払いクレジットカードウィジットが表示される。CUBE3系のプラグイン作成の第一段階。カート画面に[Amazonアカウントでお支払]ボタンを表示するプラグイン要素を作成する。「2.AmazonPayプラグインの全体的な動き」に書いたように、Amazonプラグインは大きく3つの要素に分割できる。そのまず最初のカート画面部分について説明する。CUBE3のapp>Pluginフォルダの中に、プラグインの初期ファイル一式が自動生成された状態であることを条件とする。event.ymlにフックポイントを記載カート画面にお支払ボタンを表示させるためのフックポイントは、直接Cart/index.twigとした。そのため、event.ymlに、下記のコードを記載する。CUBE3のapp>Pluginフォルダの中に、プラグインの初期ファイルが自動生成された場合、指定した名前の***event.phpというファイルが生成される。(僕は、AmazonPayEvent.phpという名前にした。)このイベントファイルにフックポイントで指定し「onCartIndexRender」の動作の内容を記載する。$event->getSource());$event->setSource($source);}上記のコードの場合、元ファイル(Cart/index.twig)中の</form>を探し出し、amazonpaybutton.twigの内容を追加して出力するというものだ。よって、次にamazonpaybutton.twigを作成する。Twigファイルを作成するtwigファイルは、プラグインフォルダ内のResource>templateの中に作成する。error.getErrorMessage());}});</script>作成したファイルをサーバにアップし、カート画面アクセス時にAmazonアカウントでお支払ボタンが表示されればOK。CUBE3系でのAmazonPay導入に関して、いよいよ本番実装。CUBEのプラグインを作成する。CUBEのプログラムを設置し、運用するタイプのネットショップだ。CUBE3の自動インストール機能がある。それによって、インストールした後、FTPなどによってサーバにアクセスし、全ファイルをダウンロードすれば、すべてのプログラムが閲覧できる。CUBEのコードをゴリゴリいじればよいかと考えた人も多いはずだ。CUBE3のプログラムを改変することは推奨されていない。他のプラグインや、バージョンアップによって、変更部分が先祖返りしたり、思わぬ障害の原因になる可能性があるからだ。CUBEに独自の機能を持たせるためには、プラグインによるドロップインが正規の干渉方法となっている。CUBE3のソースコードをゴリゴリ改変するつもりだったが、安全性を保つためにAmazonPayのプラグインを制作することにした。僕が行ったプラグインの開発方法を下記に紹介する。CUBEのプラグイン開発ドキュメントが用意されている。CUBEのプラグイン開発ドキュメントの内容に基いてコマンドをひとつひとつ打ち込むと、app>Pluginフォルダの中に、コマンドで指定した名前のプラグインファイル一式が自動生成された。CUBEのプラグイン開発ドキュメントの中にある、新規ページの追加、利用しないページの削除、フォームの追加、変更、プラグイン用テーブルの追加、チュートリアルさらには、ベストプラクティスの内容を熟読して、プラグインに関する全般的な内容を頭に入れる。遠回りのようだが、この事前に全体把握をすることは、後々の時間節約になる。闇雲に、ひとつひとつ追求していると今自分がどこの何に向き合っているのか迷子になってしまうからだ。CUBE3のプラグイン仕様書も用意されている。こちらの内容も僕はとても参照した。CUBE3でAmazonPayを利用するためのプラグインの具体的な内容に関しては、全内容の公表を差し控えさせていただく。僕が紹介するヒントを確認いただいた上で、独自にコーディングを行い、さらに確実なテストを行った上で、自己責任で実装して欲しい。CUBEの管理画面には実質請求の処理を組み込んでいない。CUBEのプラグインは「フックポイント」と呼ばれる各ポイントに切り込んで、独自の処理を通す。AmazonPayプラグインの大まかな動きは下記のようになる。1.カート画面(1)[Amazonアカントでお支払い]ボタンを表示する(2)会員ログイン時は[Amazonアカントでお支払い]ボタンをグレーアウト(3)Amazonアカウントでログイン時は、その旨をメッセージ表示し、Amazonアカウントログアウトボタンを表示(4)Amazonアカウントでログインしたら、購入確認画面にダイレクト遷移する2.購入確認画面(1)Amazonアカウントでログイン時、アドレスウィジットと支払いクレジットカード選択ウィジットを表示する。CUBEの支払い方法をAmazonPayで固定とする。CUBEに登録する(2)AmazonPayへ購入情報を送信する(3)AmazonPayからエラーが返ってきた場合のエラーハンドリングこのような内容でプラグインの構築をすすめた。CUBEに組み込む前にまず簡単なファイルを作成し、AmazonPayの大まかな動きを把握。CUBEへの組み込みイメージをつかむ。CUBEに組み込む前に、まずは簡単なファイルを作成し、ローカルのファイルとAmazonPayの動きを把握すると、その後の作業がしやすい。目次にあるように、AmazonPayの全体的な流れをつかむために3つのファイルを作った。お支払ボタンを表示させる機能とアドレス・支払いウィジェットを表示させるには、特にプログラミングは必要なかった。AmazonPayへ売上電文を送信したり、AMAZON_ORDER_REFERENCE_IDという一意なキーから住所や連作先を取得する場合にプログラミングが必要となる。以下の作業内容は、AmazonPayでの設定がすべて完了し、テスト環境での実施を想定している。ボタンウィジェットの追加を参照した。基本的にこのページに記載されているコードでAmazonお支払ボタンが表示される。エラーハンドリングなどは省略されているが、取り急ぎテスト環境での動作検証なので、本番環境のコードにエラーハンドリングをしっかり記載する。Keyで見ることができる出品者IDを記載する必要があった。REDIRECT-URLには、step2.htmlを記載する。その他のパラメータの詳細は、ボタンウィジェットのページで確認できる。4:アドレス帳とお支払い方法ウィジェットの追加を参照した。ここで、アドレスウィジェットと支払いカードウィジットが表示されると、orderReferenceIdが取得できるようになる。PythonとRubyのサンプルコードが表示されているが、ページ下部の「アドレス帳ウィジェット」と「お支払い方法ウィジェット」のコードを記載すれば、それぞれのウィジットが表示されるはずだ。AmazonPayに売上情報を送信するために、orderReferenceIdと支払い総合計が必要になる。そのため、次のstep3.phpへのフォームボタンを用意し、hiddenで値を渡すようにコーディングを追加した。value="submit"></form>oRIDには、orderReferenceId。支払い総額は、OrderTotalとし、valueに1500と記載し、1500円を仮の支払い総額とした。5:注文詳細のセットと確認も参照するとよい。インテグレーションガイドのStep5に記載されているサンプルコードはPHP以外のものなので、取り急ぎ見なくてOK。インテグレーションで紹介されているコードにはエラーハンドリングが省略されているので、これも本番環境でしっかり記述する必要がある。AmazonPayに売上情報を送信する(step3.php)step2.htmlから渡ってきた情報をAmazonPayに渡し、決済を完結させる必要がある。ここで登場するのが、SDKだ。SDKはこちら>>これをどこで使うべきなのかが分からず当初苦労した。Amazonアカウントでお支払ボタン(step1)やウィジットの表示(step2)にもSDKを絡ませる必要があると思い込んでいたからだ。Composer」と記載されているのも意味が分からなかった。(PHP)がインストールされるということだった。CUBEは、このComposerが利用されている。vendorという名前のフォルダを見ていると分かるが、中にComposer関連のファイルが格納されている。amzn/amazon-pay-sdk-php」と打ち込めば、vendorフォルダの中に、amznというフォルダができて、AmazonPay関連のSDKファイルが追加される。(PHP)の機能は利用することができた。CUBE3にすでにComposerが存在することも知らなかったため、Composerのインストールから、MacからSSHでサーバにアクセスする方法も調べ、実施してみたが、結局はファイルをダウンロードして、サーバにアップロードし、step3.phpのファイルからamzn内のClient.phpへパス通すという作業で問題なかった。Methods」の内容だ。Payments(定期支払:定)で必要な下記の3ステップの処理を一括で行ってくれるのである。AuthorizeOnBillingAgreement(定)charge関数を実施するために必要なパラメータの詳細も記載されている。$client->charge($requestParameters);//AmazonPayから戻ってきた電文を表示させるために記載print_r($response);print_r($response);と記載したので、step2.htmlからstep3.phpに画面が変わった時に、AmazonPayからのレスポンス内容が表示される。レスポンスコードが200で帰ってくれば、OKということになる。エラーレスポンスコードに関しては、エラーコードのページを参照。step1.htmlからstep3.phpの一連の流れを実際に自分の手で掴んでみると、今後の作り込みイメージも湧きやすくなったと思う。CUBE3系でのAmazonPay導入に関して、まずAmazonPayへの申し込みが必要。実際に申し込みをしてみた経緯を紹介。必要書類の提出と手続き3.AmazonPay管理画面設定3.開発者向け情報を熟読AmazonPayを利用するためにはまず、AmazonPayへの申し込みが必須。実際に申し込み作業をしてみた経過についてご紹介。AmazonPay申し込みの必須条件AmazonPayを利用する必須条件には下記の2点がある。法人カードもしくは社長の個人カードがあること1が多くの場合、ハードルになり、ガッカリされる方も多いだろう。2に関しては、僕は法人カードを持っていないので、個人(代表取締役)のカードで手続きができた。1と2の条件を満たす場合は、ちゃんとした会社であれば、問題なく審査は通ると思う。AmazonPayのページで条件などをよく読んだ上で下記ページからAmazonPayの申し込みをする。必要書類の提出と手続き申し込みをすると、自動返信メール(メール1)が送られてくる。その後、僕の場合は翌日、審査に関する詳しいメール(メール2)が送られてきた。具体的な手順や審査過程、開発ソリューション会社の提案などが書かれている。審査の流れは下記のような内容だった。)、代表者の身分を証明する書類、銀行口座(法人)を証明する書類が必要だった。(2)のセラーアカウントは、既にAmazon出品サービスのセラーアカウントを持っていたとしてもまた別にアカウントを作る必要があるとのことだった。実際僕も出品アカウントを持っていたので、別のメールアドレスで、AmazonPay用のセラーアカウントを新しく作った。メール2が送られてきたその日のうちに審査書類を提出。すると審査用書類受理の自動返信メール(メール3)が送られてきて、さらにその日の内にセラーアカウント作成方法についての案内メール(メール4)が送られてきた。していたので、メール4が来た後、しばらく放おっておいたところ、ふたたび同じ内容のメールが3日後に送られてきた。そのため、直ぐにセラーアカウント作成をしたところ、セラーアカウントの設定で漏れている箇所の指摘がメールで送られてきた。(メール5)修正したところ、審査に1週間かかるという内容のメール(メール6)が送られてきて、実質その日から6日後に審査完了の連絡メール(メール7)が届いた。必要書類の提出やセラーアカウントの作成などをテンポよくやれば、一週間ほどで手続きが完了するだろう。各メールに丁寧な説明やマニュアルがリンクされているので、迷うこと無く作業ができると思う。メール(メール7)に開発に必要なキーの確認方法や初期の設定について詳細が書かれているマニュアルが記載されている。マニュアルやメールの説明文に沿って、まずはAmazonPayの管理画面の設定や確認が必要になる。基本的に本番環境、テスト環境、ログイン設定の3パターンへの切り替えを行って、都度必要な確認や設定を行う。CUBEとの連携のための開発に取り掛からなければならない。そこで、この段階から一番見るようになるのが、開発者向け情報のページだ。CUBE3はPHPを利用しているので、一番良く見たのは、「ワンタイムペイメント」のページと「イントロダクション」のページ、そして、PHPのSDKページだった。ここを熟読することが大事だ。PHPのSDKページは英語しかない。サンプルへのリンクが切れている...。詳しくはまた追って書くが、英語のスキルも多少は必要になってくるといえるだろう。次回また続きをご紹介したいと思う。CUBE3系でのAmazonPay導入に関して、まず効率的に費用を抑えて自社ネットショップにクレジットカードを導入することにフォーカスします。無料で利用できるネットショッププログラムのため、うまく運用すればランニングコストはサーバとドメイン代程度。CUBEなどのネットショップで重要になってくるのが決済手段だ。CUBE3系と言われ、その前の2系とはプログラム構成などが全く異なっている。CUBEのあまりの変わりように驚いた。CUBE3系でAmazonユーザがAmazonアカウントで買い物することを可能にするAmazonPayの導入について紹介したいと思う。ネットショップにおけるクレジットカード決済の重要性とランニングコストの兼ね合いについてネットショップで欠かせない決済手段といえば、クレジットカード決済だ。このご時世、クレジットカード決済があるかないかは、ネットショップの売上に大きく影響する。クレジットカード決済は、ネットショップでは、必ず利用できるようにするべきと言っても過言ではない。CUBEだけでなく、さまざまなネットショップで利用できるクレジットカード決済サービスは初期費用や月額費用が発生することが多いものが多く、さらには売れた金額に応じて手数料が取られる。ネットショップの運営自体のランニングコストを抑えたとしても、このクレジットカード決済サービスのランニングコストがかかってしまうため、クレジットカード決済の導入を躊躇してしまうネットショップ運営者も多い。僕のクライアントでも、このような理由からクレジットカード決済の導入を躊躇して悪循環を呼び、ネットショップの売上がなかなか伸びないクライアントがいる。そんな時の救世主の様な存在がAmazonPayだ。ネットショップ運営者と利用者双方にとって魅力的なAmazonPayAmazonPayは、自社ネットショップにAmazonPayの機能をもたせれば、Amazonのアカウントを持っているユーザがログインして、Amazonアカウントに登録されたクレジットカードで決済ができるというサービスだ。初期費用:無料、月額費用:無料、トランザクション料:不要で、販売手数料4%のみがコストとしてかかるという費用構成もとても良心的だ。そのため、自社のネットショップにクレジットカード決済を導入したいが、ランニングコストは極力押させたいという店舗運営者にはとても魅力的なサービスだ。ネットショップ利用者にとっては、Amazonアカウントで決済をするという安心感と氏名や連絡先、配送先を入力しなくていいという手軽さが魅力になる。Amazonアカウントを持っているユーザは、このご時世ごまんといるだろう。そんなAmazonユーザがあなたのネットショップに訪れ、Amazonアカウントで決済できることは、「楽」「安心」という魅力以外の何ものでも無いはずだ。CUBEには用意がされていない。CUBEのプラグインが販売されていたが、それでは、クレジットカード決済のランニングコストを抑える意味が消失してしまう。CUBEへのAmazonPay導入方法は自分でその環境を構築することだった。最初に言っておくと、とても難しかった。ある程度プログラミングの知識がある人間なら不可能では無いと思う。僕は、プログラミングの専門畑ではないが、基本的なPHPプログラムを読んだり、組むことができるレベルだ。そのレベルの僕ができたというのが一つの目安になるかと思う。Payカスタマー契約に基づき貴社アカウントの一時停止もしくは解除をさせて頂く場合がございます。」とメールに記載されていたので、厳重なテスト及び、着実なシステム構築が必要だ。サイトの利用者に迷惑をかけるわけには行かないので、僕もテストケースを作り、念入りなテストを何百回も厳重に行った。プログラミングができない、もしくはそれを代わりに安価にお願いできる人がいない場合は、AmazonPayの利用を諦めるか、先ほど記載した有料のプラグインを利用するしか無くなってくるだろう。無料で、売れた分に対して手数料がかかるというAmazonPayと同じ条件だ。CUBE3系にも対応したプラグインが無料で利用できる。僕は、コンバージョンアップのために、ヤマトフィナンシャルの決済サービスとAmazonPayを両方導入した。Amazonアカウントユーザのコンバージョンをアップしたいという目的があれば、AmazonPayを導入するしかないが、クレジットカード決済だけを導入することが目的なら、ヤマトフィナンシャルの決済サービスを導入するほうがはるかに簡単だ。AmazonPay導入支援を行っているシステム会社や、AmazonPayを利用できるネットショップサービスは下記ページで確認できる。https://pay.amazon.com/jp/integration-optionsでは、次回また続きをご紹介したいと思う。