プレスタショップにStripeを入れてクレジットカード決済!

月額の手数料や初期費用無料、決済時の手数料のみでクレジット決済サービスが簡単にサイト内に組み込める、Stripe。
このStripeがいよいよ2015年、日本でも展開開始(ベータ版)、ということでずっと気になっていたのですがやっとこさテスト環境に組み込んでの検証ができました。

★デモサイト
http://ps2015.tatamize-web.com

※実際に決済されてしまうため本当のクレジットカード番号を決して入力しないでください。テスト用のカード番号があります。

テスト用カード番号 
VISA: 4242424242424242
MasterCard: 5555555555554444
American Express: 378282246310005

StripeのモジュールはPRESTASHOPの公式サイトに有料のものが見つかります・・・が今回は検証ということで無料のものを探して利用しています。
(ちなみに今回利用したモジュールは、元々PRESTASHOP側で提供していた無料モジュールを、会社の方針が変わって有料のモジュールばかりを取り扱うようになったことに憤慨した1プログラマさんが改変して無料でアップロードしているものです。)
※あくまでもクレジットカード決済導入が簡単に可能になるかどうかのテストであり、安全性、セキュリティーを保証するものではありません。

【Prestashop Stripe Module – Free】
http://omcfarlane.co.uk/prestashop-stripe-module-free/

実際のところ、導入方法は本当に簡単で、Stripeでアカウントを作り、その中にある Publishable Key と Test Secret Key (テスト用と本番用の2種があります)をPRESTASHOPにインストールしたStripeのモジュールの設定画面に記入し、モジュール内に記載されているWebhooksの記載をStripe内で登録するだけ。

これでとりいそぎ、クレジットカード番号と有効期限、セキュリティーコードを入力することでクレジットカード決済を可能にする機能がショップに搭載できます。

・・・怖いくらいに簡単です・・・

ただし、既存のStripeモジュールはドルやユーロなど、小数点2桁を含む金額の決済がデフォルトのためこのまま円決済で使うとショップ上では正しい金額で手続きできるのに、実際のクレジットカード決済は100倍の金額が取引されるという恐ろしい事態が起きます(汗)。
日本国内で使うにはモジュールのphpコード内でStripeに引き渡す金額合計の記述の部分を修正する必要があります。

具体的には金額関連の記述で *100となっている記述を*1に変更、*0.01となっている記述を*1に変更、通貨の小数点設定が2桁ではなく0桁になるように等の修正をしました。内容に責任を負いかねるため詳細の記載は避けますが・・・

また、この修正を行うと他通貨での決済はできません。(ドルやユーロなどの通貨での決済では金額が100分の1になります。。。)
このままではPRESTASHOPの売りの1つでもある多通貨での決済はできないということになります。
(多言語はともかく多通貨での決済が実際に必要かどうか、は通貨換算のレートの設定をどうするか難しいこともあり私は疑問に思っていたりはします・・・できるだけシンプルにするにこしたことはないと思いますし。)

ちなみに今回はテスト用ということでフリーのモジュールを使って、SSLを導入せずに検証を行っていますが、実際の運用ではSSLの導入は必須です。

イプシロン対応のモジュールができたらしい

ちょっと前の情報ではあるのですが・・・

プレスタショップの日本語ユーザー向けのフォーラム内でGMOのイプシロン対応の決済モジュールを開発された方の投稿を発見しました。
開発されているのは沖縄のディベロッパーさん。
気になってお話をお聞きしたところ日系ブラジル人のプログラマさんとのことで、現在は英語のサイトしかないのですが、国内の決済サービス対応のモジュールがいよいよということでご紹介。

【Epsilon by GMO 対応 PRESTASHOP決済モジュール】
https://pay.japancase.com/

どうやらモジュールを公式ストア内で無料で公開したいのにできない&質問の返答が返ってこない等でプレスタショップの運営サイドと一悶着あったようなのですが。。。
どうやらPRESTASHOP側では無料のモジュールを掲載したくないとの意向。(モジュールやテンプレートをディベロッパーに売ってもらって手数料とってなんぼ、ってとこなんでしょうね)
せっかくのオープンソースなのに微妙なところで普及を妨げるなあと思いつつ。&質問の返事が返ってこないのはお国柄、だろうなあと苦笑。。。

私もまだこのモジュールを利用しているわけではないので手放しに推奨するわけではないのですが同じくニッチな(?)PRESTASHOPディベロッパーとして頑張って欲しいと思います。

クレジットカード決済導入が変わる? stripe がいよいよ!

とにかく書かなきゃ!と私にしてはかなりタイムリーにブログにアップ、となった衝撃のニュース。

stripe」–日本でもテスト運用へ (CNET Japan)

PRESTASHOPを日本で運用するのに、いつも障壁になっていたのがクレジットカード決済。Paypalはいまいち人気がなく(個人的には全然問題ないと思っているけど)、サイト内にクレジットカード決済を組み込む方法の情報が少なすぎて、導入に踏み切れずにいる方も多かったと思うのですが・・・

カード決済会社との高額な月額契約料なしで、手数料のみで運営されるクレジットカード決済のシステムはいくつもあるかと思うのだけれど、stripeに関していえば、日本での導入がまだなだけで海外では既に利用されて結構ポピュラーになっていたりします。なのでwordpressやmagentoなど多くのCMS、E-コマースサイトのプラグインが開発済。
このstripeも見てみるとすでにPRESTASHOPのモジュールがいくつか出ています。
日本語特有の問題さえクリアできれば簡単にクレジットカード決済を、少ない手数料で導入できる日も近い・・・かもしれない・・・

ドキドキしながらとにかくはテストユーザー登録。
早く使えるようになりたいです・・・

お返事、コメント承認遅れております。すみません・・・

ご来訪&読んでいただいてありがとうございます。

嬉しいことにちょくちょくコメントやお問い合わせをいただいているのですが、現在年度末の受注業務でキリキリマイとなっており、コメント承認およびお問い合わせへのお返事が滞っております。。。4月後半くらいには落ち着くと思うのですがそれまで長い目でおつきあいいただけますと幸いです。

2015年に入ってからPRESTASHOPに関するお問い合わせが激増していて、今こそもっと力を入れるべきだとは思うのですが私自身の体制が整っておらずでご迷惑をおかけしております。なにとぞご了承いただけますようお願い致します・・・。

【2015/4/22 追記】
コメント返信等を再開いたしました。
ついでにブログのテンプレートを変更してみました・・・読みづらいのにはあまり変わりないですが・・・そのうち手をいれます・・・きっとそのうち・・・(遠い目)

ちょっと見ないうちにPRESTASHOPがえらいことになっていた

年末そして年度末、WEB屋にとってはお約束の繁忙期。
やれwordpressやら、Woo Commerceやら(←最近ちょっとハマっています。PRESTASHOPを差し置いての浮気心・・・)で忙殺されているうちにPRESTASHOPがクラウド版をリリースしているのもノーチェックでおりました。
(新バージョン開発中なのは知っていたのですが・・・見ている暇がなく。。。)

こうやってブログを放置している間にもちらほらとお問い合わせをいただいていたのですが、その中で「PRESTASHOPのクラウド版についての質問」をいただいてしまい・・・
慌てて本家サイトをチェック、新サービスを試してみたわけであります。同好会とか言いながらすみません。。。

で、新しいサービスのクラウド版。
ぶっちゃけ衝撃です。

これ、PRESTASHOPを試してみたい人には本当に朗報。
インストールでつまづくことがざらにあったのだけど(ソレはどうなのというツッコミはさておき)それがもう必要ないって素晴らしい。
会員登録だけでレンタルサーバーも必要なく、世界中に販売対応可能なプレスタショップの機能が普通に使える。
デモ画面のような利用制限がないので商品登録から実際の販売まで、手数料ゼロ(クレジットカードを使わない場合ですが)、無料で使えます。

とはいえ、デフォルトのテンプレートのもっさいことったら。
本気で使うには有料のモジュールやテンプレートを使う必要がある・・・はずなのですが。
管理画面を普通に見ている限りでは、デザインテンプレートや手持ちのモジュールをアップすることはセキュリティー上できない、ということになっています。

でも、ここが、コレ。PRESTASHOPお約束の適当感 & 柔軟性。

よーーーーく探すと、ディベロッパー向けにFTPでテンプレートやモジュールをアップできる隠し機能があるんです。
つまり・・・実際は無料のクラウド環境上でのカスタマイズ自在。
細かくはまだ調べていないので断言はできないのですが、これがいけるのだったら本気でヤバい。
Woo Commerceの日本台頭もどこまでいくか?も気になりつつも越境EC、グローバルなオンラインショップ構築がますます面白くなりそうな2015年。
クレジットカード機能の対応さえなんとかなればなあ、といつも思いつつも。今年もPRESTASHOP、目が離せません。

 

制作実績:スイスのオーガニックコスメ個人輸入サイトを制作させていただきました。

ブログを書くたびにこのブログのインターフェイスをなんとかせねば・・・と毎回思うのですが・・・
(WEB屋的あるある→受注仕事に追われて自分のサイトに手を入れる時間なし)
こんなブログからでもご依頼をいただけるのは本当にありがたいことだと思いつつ。

今日は制作実績のご紹介です。
スイス在住のお客様より、PRESTASHOPを利用したオーガニックコスメの個人輸入サイトの制作をご依頼いただきました。

日本未発売のオーガニックコスメが多数!スイス直送のナチュラルコスメ販売サイト Swissecoshop.asia

制作着手から4ヶ月・・・紆余曲折あり、やっとオープンできました。
Swissecoshopasia様、ご依頼にはかなり勇気が要ったと思うのですが本当にありがとうございます!

紆余曲折の理由はいろいろあるのですがやはり制作途中にプレスタショップのバージョンが1.6.0.0から1.6.0.9まで上がったことが大きいかも。
リリース当初のバグが多すぎて、都度対処していたのがバージョンアップに伴いさらに修正を加えないといけなくなったり。
また、リリース目前でのサーバー変更もありました。

そしてなんとしてもプレスタショップの機能の多さ!(&複雑さ)
ご紹介している私でも把握しきれていないところがまだまだありそうです。

制作全般をとおして、再実感したのは

・プレスタショップ、複雑すぎてやっぱり大変
・拡張性、利用方法の可能性はものすごくある(大変だけどいろいろな汎用性がある)

機能をはじめ、サーバーなどの環境について、利用する機能の取捨選択の必要性など書きたくても追いつかないことが山ほどあるのですが、それはまたいつかの機会に・・・

セール、値引き設定の方法色々

「セールの設定の方法がよくわかりません・・・」
とのご質問をお客様からお受けしました。
そりゃあもうわからないと思います。説明が足らずにて申し訳ないです・・・
自身のメモもかねて、ざくっとここでまとめてみます。

セールや割引設定、どのショップでもおなじみの機能なのですが、ここPRESTASHOPでは一見とってもややこしくなってます。
なんせ設定できるコンディション(制限)が多言語多通貨対応なので多岐に渡る。とはいっても実際よく使う機能は限られているとは思うのですが・・・

割引設定の種類は大きく3つに分かれます。

【1】特定の商品(商品毎)に割引を設定 
【2】全商品に一括で割引を設定 
【3】カテゴリ毎や特定の複数商品に割引や送料無料の設定

どの割引も「期間」と「割引額」or「割引率(%)」どちらで設定するのか、また「割引が適用される最低価格」等が設定できます。
また、割引適用対象として国、通貨、カスタマーグループ(メンバー or ビジター、特定の人を設定したグループ)をそれぞれ選択、制限可能です。 続きを読む セール、値引き設定の方法色々

1.6.0.6から1.0.6.9にアップデート (。´-д-)

このブログのおかげ(?)でPRESTASHOPのお仕事が大半を占めるようになりつつある2014年後半、なのですが。
こうやってがっつりPRESTASHOPと取り組んで、1.6以上の新しいバージョンはどうなの?と振り返ってみると・・・

・・・うん、やっぱり、大変(笑)。

多機能&新しいニーズにも果敢に対応した機能追加、で有能なのは間違いないのだけれど、多機能なゆえなのか開発元のフランスのお国柄なのか、ちょっと設定をいじったり便利な追加機能的なものをいざ使おうとすると、必ずといっていいほど何かのバグに遭遇します。。。(私だけなのか・・・?)
多分、「オレオレ!やるよ!かっこいいインターフェイス!最新機能つけてやるぜ!」的ディベロッパーはいるんだけど整理とかすっきりさせるとか、きちんと検証するとかの概念は少ないんだろうなあと。「え、昔の機能との統合整理?昔のCSSの削除?設定を変えての動作チェック?は?」的な。

今回は最近オープンしたショップのオーナーさんからの「既存の商品を組み合わせてのセット商品が作れないですけど・・・」とのご相談。
デフォルト装備の機能なので使えないわけはないのですが、見てみると確かに動作しない。
調べると 1.6.0.8以下でのバグ、らしく。1.6.0.8だとパッチコードが公開されているものの、1.6.0.6だと打つ手なし。
いろいろと設定を触ったサイトなのでアップデート、多分難航するだろうなと思いつつも、早朝からサイトを止めてのアップデートとなりました。

全データ、DBのバックアップをとって、1 click upgradeのモジュールを使って 1.6.0.6 から 1.6.0.9 へ。
マイナーのアップデートとはいえ修正されている箇所が 732カ所て。。。

アップデート終了後は、読み込んでいたはずのJSファイルが読み込めない(1.6.0.7以降?の仕様変更のため。自作のテンプレートだとheader.tplにコード追加が必要)等の問題にワラワラしつつも、なんとか作業終了。



・・・うーん、メジャーなアップデート後、1年くらいは様子見たほうがいいんじゃね、コレ・・・

ぐったりしながらも、まいどまいど困った時でも「探せば何か解決方法が見つかる(誰かが解決方法をフォーラムにアップしている)」&「ちょっと待てばバグも修正されて新しいバージョンに反映される」というのはいいことなんだろうなーと気をとりなおしつつ。
ついついバグの話ばっかりしてしまうけど・・・ここでも早く「ここがスゴい!」的ネタに専念できるように頑張りたいものです・・・(遠い目)

facebookのシェアボタンが正しくリンクしない→モジュールより自作ボタンがいいよという話

PRESTASHOPにはデフォルトで social sharing というSNSのリンクを表示するモジュールが入ってます。
モジュールを有効にすると各商品のページに「Twitter」「facebook」「google+」「pinterest」の4つのシェアボタンが使えるようになります。
・・・うん、なるはず、なんです。

こちらのボタン、押した時に各SNSのシェア画面が表示され、その中に自動的に商品名や写真が入るのが普通なのですが私の場合どうもうまくいかない。
(いや、多分私だけではないはずなんだけど)
仕方ないのでモジュールのソースを確認。モジュールの有効化で追加されるヘッダー内の記述がこれ

<meta property="og:title" content="" />
<meta property="og:type" content="product" />
<meta property="og:site_name" content="" />
<meta property="og:description" content="" />
<meta property="og:email" content="" />
<meta property="og:phone_number" content="" />
<meta property="og:street-address" content="" />
<meta property="og:locality" content="" />
<meta property="og:country-name" content="" />
<meta property="og:postal-code" content="" />
{if isset($link_rewrite) && isset($cover) && isset($cover.id_image)}
<meta property="og:image" content="{$link->getImageLink($link_rewrite, $cover.id_image, large_default)}" />
{/if}



↑なんでや(怒)

いや、だからオープングラフのタグは入れてるのになぜに値が空白なの?その中途半端さはなんなの?ソースに自分で入れろと?
おもわずつっこみまくってしまったのですが、オープングラフのMETAタグにしても、ボタンの記述にしてもモジュールを直すんだったらモジュール使わないで header.tplとproduct.tplに自分でタグとボタンのソースいれるのと変わらないです。(&だったらモジュールの余計なソース読ませなくていいし)

そんなわけでheader.tplに以下のソースを追加
(※9/20修正しました。ロゴ画像については各自設定によって異なるので要確認)

<meta property="og:title" content="{if $page_name=='product'}{$product->name|escape:'html':'UTF-8'} : {/if}{$shop_name|escape:html:'UTF-8'}"/>
<meta property="og:url" content="http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}"/>
<meta property="og:site_name" content="{$shop_name|escape:html:'UTF-8'}"/>
<meta property="og:type" content="website">
<meta property="og:description" content="{$meta_description|escape:html:'UTF-8'}">
{if $page_name=='product'}
<meta property="og:image" content="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}">
        {else}
<meta property="og:image" content="{$img_ps_dir}logo.jpg" />
{/if}

product.tplにはボタン4つのソースを追加、CSSで整形。
(以下ご参考まで。必要に応じてアレンジしてください)

<button data-type="twitter-b" type="button" class="btn btn-default btn-twitter" onclick="window.open('https://twitter.com/intent/tweet?text={$product->name|escape:'html':'UTF-8'} &amp;url=http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}', 'sharertwt', 'toolbar=0,status=0,width=640,height=445')">
 <i class="icon-twitter"></i> {l s="Tweet"}
 </button>
 <button data-type="facebook-b" type="button" class="btn btn-default btn-facebook" onclick="window.open('http://www.facebook.com/sharer.php?u=http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}&amp;t={$product->name|escape:'html':'UTF-8'}', 'sharer', 'toolbar=0,status=0,width=660,height=445')">
 <i class="icon-facebook"></i> {l s="Share"} 
 </button>
 <button data-type="google-plus-b" type="button" class="btn btn-default btn-google-plus" onclick="window.open('https://plus.google.com/share?url=http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}', 'sharer', 'toolbar=0,status=0,width=660,height=445')">
 <i class="icon-google-plus"></i> {l s="Google+"}
 </button>
 <button data-type="pinterest-b" type="button" class="btn btn-default btn-pinterest" onclick="window.open('http://www.pinterest.com/pin/create/button/?media={$link->getImageLink($product->link_rewrite, $imageIds, 'home_default')|escape:'html':'UTF-8'} &amp;url=http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}', 'sharerpinterest', 'toolbar=0,status=0,width=660,height=445')">
 <i class="icon-pinterest"></i> {l s="Pinterest"}
 </button>

そしてこれだけでもだいぶ面倒くさい(そして解決に時間かかった。。。)のですが。
オープングラフもきちんと表示されているはずなのに、いつまでたってもfacebookだけ違った商品名や画像が表示されるものがあり、しばらく悩まされておりました。
で、調べていてわかったのですがfacebookってfacebook側で最初のシェア情報をキャッシュするみたい。
つまり、間違った設定の状態で誰かにシェアボタンをクリックされると他の人が同じボタンをクリックした時にそのキャッシュを読み出すらしい。。。
キャッシュのクリアはdebugツールから行えるけどなんかもうほんとめんどくさいです。。。(愚痴)

https://developers.facebook.com/tools/debug