Drupal Commerce & Amazon Pay module ハンズオン · Drupal 8 Commerce...

Drupal Commerce & Amazon Pay module ハンズオン

Drupal をやさしく学ぶ勉強会 2018 年 11 月

改訂版 2019 年 1 月 28 日

開催日 2018 年 11 月 28 日(水) 19:00-21:30

1

目 次

I. はじめに .................................................................................... 2

Drupal 7＆８のコア

Drupal 8 のステータス

トピックス

便利なツールやシステム

デジタルマーケティング資料

次回の勉強会

なんでも質問コーナー

II. Dries さんのブログより ............................................................... 5

III. 今月のモジュール ........................................................................ 6

IV. Drupal Commerce Demo & Amazon Pay ハンズオン ................... 6

V. Drupal Commerce Demo .......................................................... 7

VI. Drupal 8 Commerce 関連情報 .................................................... 9

VII. Drupal Commerce Amazon Pay モジュールのインストー

ル ............................................................................................. 9

Amazon セーラーセントラルの設定

Amazon Pay SDK(PHP)のインストール

Drupal Commerce の Amazon Pay モジュールのインストール

commerce_amazon_lpa 8.x-2.0-beta1 の修正

Commerce 2.x の基本設定

Amazon Pay モジュールの設定

実際の購入フロー

VIII. Drupal 8 Commerce 対応、日本の決済モジュールについて ............ 24

IX. ディスカッション ...................................................................... 25

X. クレジット、謝辞、ライセンス ..................................................... 26

クレジット

謝辞

ライセンス

2

はじめに

Drupal 7＆８のコア

11 月 28 日(水) https://www.drupal.org/project/drupal

Drupal 8 のステータス

11 月 28 日(水) https://www.drupal.org/drupal-8.0/get-involved

7 月 31 日(火) Drupal 8 について、 https://www.drupal.org/drupal-8.0/get-involved

3

5 月 30 日

トピックス

Drupal Global Training Day & First time Sprinters 2018 年 12 月 8 日（土）

Global Sprint と Training を一緒に開催することになりました。自分で作成したモジュールやデザインテ

ンプレートなどを Drupal.org サイトにアップロード登録する手順なども学びます。

4

https://cmslabo.doorkeeper.jp/events/81798

ぜひ。ご参加ください。

便利なツールやシステム

さまざま Drupal のコアや拡張モジュール、テーマ、ディストリビューションなどを無料で 24 時間、

AWS クラウドで体験できます。ただし、現在はメンテナンス中止になりました。

http://simplytest.me/

デジタルマーケティング資料

⚫ 中国で急成長するエンタメ感あふれる共同購入サービス 拼多多(ピンドウドウ)

https://www.pinduoduo.com/index.html

EC 市場のダークホースと呼ばれる「拼多多」とは何者なのか？

http://chaitopi.com/index.php/2018/04/25/whats_pinduoduo/

⚫ 買い手もストーリーの当事者

香川県高松市のオリーブ農園オキオリーブです。 世界最高品質の 100%国産エクストラバージンオリ

ーブオイルを作っています。 美しい農園では、カフェ、イベント、スペースレンタル、宿泊もしてい

ます。

https://www.okiolive.com/

5

次回の勉強会

12 月 12 日（水）コンテンツタイプ、Views、ブロック・ユーザー管理の基礎ハンズオン（九州）

12 月 17 日（月）久松町区民館で、内容は未定

なんでも質問コーナー

Drupal や CMS、クラウドなど、ご質問をお受けいたします。

Dries さんのブログより

⚫ Why Drupal's Layout Builder is so powerful and unique

https://dri.es/why-drupal-layout-builder-is-so-unique-and-powerful

6

今月のモジュール

今月はお休みです

Drupal Commerce Demo & Amazon Pay ハンズオン

7

Drupal 8 Commerce の新しい REST インタフェースによる Quickstart 的なデモ版のインストールをハン

ズオンしながら概要を学びます。

REST インタフェースによるショッピングカート

Drupal Commerce をこれから使う方、復習したい方向け、初めて入門コースになります。Drupal 8 向け

の Amazon Pay モジュールのテスト操作しながら、わからないことややりたいこと、疑問点など、ハンズ

オンと Q&A で学まびます。

Drupal Commerce Demo

インストール手順は、以下のページにて

https://github.com/drupalcommerce/demo-project

Composer をインストール

Composer で Commerce 用のデモプロジェクト作成

8

composer create-project drupalcommerce/demo-project demo-commerce --stability dev --no-interaction

インストール後、composer run preview を実行しますが、2018 年 11 月 28 日に作業した際にはエラ

ーが起こりインストールできませんでした。

そこで、Github のソースプログラム（https://github.com/drupalcommerce/demo-

project/archive/master.zip）をダウンロード、解凍して composer run preview を実行しました。

Drupal のデータベースは SQLite に保存されます。

インストール後の画面

ログインは、ユーザーアカウントを新規作成してログインします。この Demo 環境はテスト用で

Administrator アカウントは、セキュリティ上、作成や参照することができません。

Headless Drupal Commerce として使えるように、まずはショッピングカート API から始める

Drupal Commerce Demo の概要とダウンロード

9

RESTful インタフェースでショッピングカート機能

Decoupled shopping cart - Cart API モジュールの概要

ショッピングカートの表示

Commerce Cart Flyout モジュールの概要

Drupal 8 Commerce 関連情報

• Drupal Commerce モジュール

• Commerce Kickstart

• Commerce の各種ドキュメント

• Developer Guide

• GitHub repository

• 動画 : The road to a headless Drupal Commerce future

• 動画 : Decoupling Drupal Commerce Out of the Box

• 動画 : Using Drupal Commerce for rich eCommerce experiences

• Drupal Commerce Amazon Pay モジュール

Drupal Commerce Amazon Pay モジュールのインストール

Amazon セーラーセントラルの設定

10

Amazon のセーラーセントラルに企業登録します。その際に、使用するドメイン名などを設定します。

https://sellercentral.amazon.co.jp

審査終了後に、クライアント ID を取得し、Amazon Marketplace Web Service (MWS)にて API を利用するた

めにアクセスキーを作成します。

Amazon Pay SDK(PHP)のインストール

11

始めに、サーバー側に、Amazon Pay SDK(PHP)を Composer でインストールします。Amazon Pay

SDK(PHP)は GitHub で公開されています。

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

Drupal８の Drupal_root で Compoer を使って SDK インストールします。

composer require amzn/amazon-pay-sdk-php

12

composer でインストールインストールされたディレクトリ vendor/amzn/ amazon-pay-sdk-php 以

下を、Drupal 8 の Libraries モジュールの配下 Modules/contrib/libraries/amazon-pay-sdk-php に

コピーします。

Drupal Commerce の Amazon Pay モジュールのインストール

モジュールの情報：Drupal Commerce Amazon Pay モジュール

Commerce モジュールがインストールされた環境に、Amazon Pay モジュールを追加します。

composer require 'drupal/commerce_amazon_lpa:^2.0'

commerce_amazon_lpa 8.x-2.0-beta1 での注意事項：

このバージョンでは、Amazon Pay で Amazon にログインして自動的に支払い処理するフローをサポー

トしております。非同期の支払い処理は開発中です。

13

commerce_amazon_lpa 8.x-2.0-beta1 の修正

日本の Amazon Pay サイトとの連携のために、デフォルトの langcode、などを修整します。

1) Form の Settings.php

DRUPAL_ROOT\modules\contrib\commerce_amazon_lpa\src\Form\Settings.php

207 行目から

if (empty(array_intersect($supported_billing, ['DE', 'GB', 'US', 'JP']))) { ＜－ 追加

$form['merchant_information'][$uuid]['#description'] = $this->t('Sorry, this store does

not support available billing regions.');

continue;

}

$store_country_code = $store->getAddress()->getCountryCode();

$defaults = [

'merchant_id' => '',

'mws_access_key' => '',

'mws_secret_key' => '',

'lwa_client_id' => '',

'region' => $store_country_code == 'GB' ? 'UK' : $store_country_code,

// @todo port default language code mapping.

/* 'langcode' => 'en-US', */ - コメントにして

'langcode' => 'jp-JP', ＜－ 追加

];

247 行目から

$form['merchant_information'][$uuid]['region'] = [

'#type' => 'radios',

'#title' => $this->t('Region'),

'#options' => [

14

'DE' => $this->t('Germany'),

'UK' => $this->t('United Kingdom'),

'US' => $this->t('United States'),

'JP' => $this->t('Japan'), ＜－ 追加

],

258 行目から

$form['merchant_information'][$uuid]['langcode'] = [

'#type' => 'radios',

'#title' => $this->t('Language'),

'#options' => [

'en-US' => $this->t('US English'),

'en-GB' => $this->t('UK English'),

'de-DE' => $this->t('German'),

'fr-FR' => $this->t('French'),

'it-IT' => $this->t('Italian'),

'es-ES' => $this->t('Spanish (Spain)'),

'jp-JP' => $this->t('Japanese'), ＜－ 追加

],

2) Src の AmazonPay.php の編集

Drupal_ROOT\modules\contrib\commerce_amazon_lpa\src\AmazonPay.php

55 行目 platform ID の意味を調査中ですが、とりあえず「出品者トークン」を設定しました。

protected $platformIds = [

'UK' => 'A33DP3YE7OHVLV',

'DE' => 'A1ZBM19RFMXA83',

'US' => 'A294FY3QW7KJ8X',

'JP' => 'A2XXXJ8VDXXXXX', ＜－ 追加

15

];

3) Commerce_amazon_lpa.module で日本の AmazonPay サイトのWidgets.js URL を追加

Amazon Pay を Web サイトに設定するための、Amazon Pay の SDK の設定は、以下のページでご確認

ください。

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

16

DRUPAL_ROOT\modules\contrib\commerce_amazon_lpa\commerce_amazon_lpa.module を編

集します。

63 行目から

$widget_js_urls = [

'US' => [

'test' => 'https://static-na.payments-amazon.com/OffAmazonPayments/us/sandbox/js/Widgets.js',

'live' => 'https://static-na.payments-amazon.com/OffAmazonPayments/us/js/Widgets.js',

],

'UK' => [

'test' => 'https://static-eu.payments-amazon.com/OffAmazonPayments/uk/sandbox/lpa/js/Widgets.js',

'live' => 'https://static-eu.payments-amazon.com/OffAmazonPayments/uk/lpa/js/Widgets.js',

],

'DE' => [

'test' => 'https://static-eu.payments-amazon.com/OffAmazonPayments/de/sandbox/lpa/js/Widgets.js',

'live' => 'https://static-eu.payments-amazon.com/OffAmazonPayments/de/lpa/js/Widgets.js',

],

'JP' => [ ＜－ 追加

'test' => 'https://static-fe.payments-amazon.com/OffAmazonPayments/jp/sandbox/lpa/js/Widgets.js',

'live' => 'https://static-fe.payments-amazon.com/OffAmazonPayments/jp/lpa/js/Widgets.js',

],

];

Commerce 2.x の基本設定

Drupal Commerce 2.x の使い方は https://docs.drupalcommerce.org/commerce2/getting-started

にて参考にしてください。 Amazon Pay のテストのために、簡単な製品と支払い処理を設定します。

17

User guide の手順にもとづき、ストアの設定、通貨の設定、商品の設定、受注、税金、支払い、などを設

定します。

Amazon Pay モジュールの設定

モジュールの画面

管理画面 -> Commerce -> Amazon Pay configuration

マーチャント ID、MWS Access Key、MWS Secret Key、LWA Client ID を入力します。

18

その他は、デフォルト設定です。

実際の購入フロー

ショッピングカートの購入手続き画面で、Amazon Pay へのログインボタンが表示さます。

19

Amazon pay のバナーをクリックし、Amazon アカウントへ連携します。

20

Amazon アカウントとパスワードを入力します。もしくは、Amazon アカウントを新規作成も可能です。

ログインすると注文内容を確認します。

アドレス帳が表示されるのは、Drupal Commerce の「Commerce Shipping モジュール」をインスト

ールした場合です。

Commerce Shipping：https://www.drupal.org/project/commerce_shipping

21

もし、配送先住所を追加する場合は、「＋新規追加」をクリックします。

22

次に進む「レビューを続ける」をクリックし、購入確認画面になります。

「支払いと購入完了」をクリックします。Amazon と連携し、注文（39 番）が確定しました。

管理画面 -> Commerce -> 注文 で今の購入手続きのプロセスが確認できます。

23

Amazon 側でも注文を確認できます。

「Amazon リファレンス ID」をクリックすると、注文の詳細が確認できます。

24

※Drupal８の管理画面やショップの公開画面で表示される英語テキストやメッセージなどは、管理画面の

「ユーザーインタフェースの翻訳」で可能です。

管理画面 -> 環境設定 -> 地域と言語 -> ユーザーインタフェースの翻訳

Drupal 8 Commerce 対応、日本の決済モジュールについて

Drupal 7 版の Drupal Commerce 対応の日本国内決済モジュールを開発した渡邉隆弘さんによる、

Drupal 8 版の Drupal Commerce 対応の決済モジュール開発ステータスと Drupal Commerce につい

て、お話いただきます。

デモ

⚫ GMO

⚫ Paidy

⚫ Softbank Payment Service

25

ディスカッション

Drupal、WordPress、オープンソースコミュニティ、CMS などの質疑応答

26

クレジット、謝辞、ライセンス

クレジット

このマニュアル作者は、Gennai3株式会社の程田和義です。

お問合せ 電子メール hodota@gennai3.co.jp 電話 044-220-1588

謝辞

本マニュアル作成は、主に以下のサイトを参考にしました。心より感謝いたします。

出典： Drupal.org simplytest.me

ライセンス

Drupal は Dries Buytaert による登録商標です。その他本マニュアルで使われている製

品および名称については、それぞれの所有者の商標または登録商標です。