BTCPay Server/独自ショップでモナコイン決済!

サービス

モナコイン販売する独自ショップ!

人がたくさん集まるモナコインのウォレット&ポータルサイトで、ストア機能も便利だった、「Monappy」が休止してから、モナコインでの商品販売方法をいろいろと考えてきましたが、今回、独自ショップでのモナコイン決済に挑戦してみることにしました!

WooCommerce+BTCPay Server

このブログでも使っている、定番ブログソフトウェア「WordPress」に、「WooCommerce」というショッピングカートのプラグインと、単体でも請求に使えるBTC決済システム「BTCPay Server」 のプラグイン「BTCPay for WooCommerce」をインストールするだけで、BTC決済のストアが作れるとのこと。

そして、どうやらその「BTCPay Server」に、モナコイン対応バージョンが登場したので、同じ手順でモナコイン決済ストアが出来てしまう!とのことなんですね。

なにそれ!すごいっっ(@_@)

というわけで、導入済みの先輩方の力をお借りして、早速設置に挑戦してみました。(ページの最後でご協力いただいた方をご紹介しています)

1. ウォレットとBTCPay Serverを準備

最初に、Electrum-MONA(モナコイン軽量ウォレット)とBTCPay Serverをそれぞれ準備しておきます。

Electrum-MONA
https://blog.n-ista.org/2018/07/electrum-mona.html

BTCPay Server
https://blog.n-ista.org/2018/12/btcpayservermonacoin.html

と、この2つはにすた財団さまのサイトでわかりやすく説明されています!

2. WordPressのインストールと基本設定

ドメインとサーバーを用意したら、WordPressをインストール。基本設定・SSL化、最低限のプラグインを入れるなど、一般的なブログがスタートできる程度までの設定を完了させておきます。

商品のみのショップサイトなら、パーマリンクを、/%postname%/にしておいたほうがいいかもしれないということ。そして基本プラグインの一つとして知られる「Jetpack」、こちらも「WooCommerce」でのメリットもあるとのことで、インストールしておいて損はなさそう。

ちなみにわたしはムームードメイン ✕ ロリポップのユーザー。とても使いやすいです。

3. プラグインとテーマをインストール

ここからは、その「ブログ」を、「ショップ」にするためにプラグインとテーマをインストールしていく作業。

a. プラグインをインストール→有効化

★WooCommerce … ショップ本体
https://ja.wordpress.org/plugins/woocommerce/

★BTCPay for WooCommerce … WooCommerceでBTC決済ができるようにする
https://ja.wordpress.org/plugins/btcpay-for-woocommerce/

どちらも公式に登録されています。

b. テーマをインストール→有効化

外観→テーマ→新規追加からキーワードで「WooCommerce」を入力して検索。一覧だと美しく見えても日本語だと崩れてイメージが大きく違ったり、商品のイメージと合わなかったりとなかなか難しい。

今回は少しカスタマイズしたいのと、アップデートにも即対応という安心から、素直に公式テーマ「Storefront」を使うことにしました。子テーマを作成→有効化。公式では無料・有料のお着替え用子テーマもあるので、そちらを使うのもよし!

▼参考にさせていただきました

WooCommerce : Storefront の子テーマを作成 - HomeMadeGarbage
Storefront の子テーマを作成しました。 目次 Storefront の子テーマについて子テーマ作成ディレクトリ作成ファイル作成style.css functions.phpテーマ適用 Storefront の子テーマについて 公式サイトでおしゃれな子テーマも販売されています。 Storef … "WooCom...

4. プラグインとテーマの設定

ここからは、ご紹介いただいた動画を参考に。

BTCPay – WooCommerce

a. BTCPay Serverの設定

にすた氏のブログの手順で、BTCPay Serverのアカウントを開設し、新しい「Store」を作成、Electrum-MONAと連携する、というところまでを済ませておきます。

b. BTCPay for WooCommerceの設定

WordPressの管理画面の、プラグイン→BTCPay for WooCommerceの「setting」から設定をしていきます。

以下の部分を書き換え。

◆ Title:BitCoin → モナコイン または MonaCoin(決済方法の選択名となる)

◆ Customer Message:
You will be redirected to BTCPay to complete your purchase.
お支払いは「BTCPay」にリダイレクトされます(注意書きなので、このような日本語を追加すると親切?)

◆ API Token:
BTCPay URL(eg,https://your-bitpay.com/)
https://btcpay.electrum-mona.org/

Pairing Code: コードを入力 ※コードの取得方法は次の項目で

◆ Invoice pass to “confirmed” state after: 承認回数を選択
(推奨される数値教えてくださいえらい人!)

【PaintingCodeの取得】

BTCPay ServerのURLを入力すると、Get a pairing code: の横に、BTCPayトークンの取得ページへのリンクが出現します。

ここをクリックすると、BTCPAYのサイトにジャンプしますので、StoreIdが設定したものになっているかを確認(複数あったら選択)し、他は何も触らず「Recuest pairing」

次のページでも何も触らず「Approve」

次のページの一番上、緑の枠内に表示されたコードがPairing Codeです!

WordPressに戻って、API Token:の2段目にこのPairing Codeを入力し、「Pair」を押すと…

無事ペアリングされましたヽ(=´▽`=)ノ〜

c. WooCommerceの設定

WordPressの管理画面から、WooCommerce → 設定 → 決済を確認すると…【BTCPay – MonaCoin】という支払い選択が追加され、ONになっています!

WooCommerceのショップの設定は、最初の設定ウィザードから進めれば、特に難しい部分はありませんでしたが、細かい個別設定があるので、後から一つ一つ丁寧に確認したほうがよさそうです。

応用:DL専用にする

functions.phpの設定

ここまでで物販ストアはほぼ完成。でも、実は実は…こちらダウンロード専用ショップにしたいので、あともう少しカスタマイズしていきます。

決済時、カートに入れて進んでいくと…

このようにいらんことまで全部お聞きしてしまう…。お届け先も不要なダウンロード販売に、大切な個人情報を聞き出すわけには行きません。というわけで。ふたたび参考にさせていただきました!↓

WooCommerce:決済画面の住所入力を非表示にする - HomeMadeGarbage
デジタルコンテンツ販売であるため、住所入力は必要無いと思い非表示にしました。 ※まず、Storefont の子テーマを作った上でカスタマイズします。 子テーマを作成した記事はこちらです: WooCommerce : Storefront の子テーマを作成 – WordPress &#82 … "WooCommerce:...

おかげさまで無事、HN欄とメアドだけになりました!!

動作確認

さあ!最後にどきどき動作確認です!商品を登録し、カートに入れて決済へ進むと…BTCPay Serverの決済画面が登場。
・表示されたQR
・ウォレットで開く
その他「コピー」のタブへ移ると
・直接アドレスの表示&コピー
もできるので、ユーザーの送金環境によって使い分けて送金できます。

Tiproid Stationから直接送金してみると…。

おぉおっぉううううぅ!できたー!!!!!
肝心の商品は、この「戻る」ボタンから戻って表示されるマイページと、購入時に入力したメールアドレスに届くダウンロードリンクからダウンロードができました!

大 成 功!!!ヽ(=´▽`=)ノ

おまけ:アイコンを作ってみた

細かいところではありますが…モナコイン専用なので、決済時表示されるこの「bitcoin」がなんだかややこしいんじゃないだろか?ということで…

このアイコンをモナコインっぽくしました。どうでしょう?

このアイコンは、
FTPでサーバーにアクセス。インストールしたWordPressのフォルダー内
→ wp-content
→ plugins
→ btcpay-for-woocommerce
→ assets
→ img
内の「icon.png」の差し替えで変えられます。一応ここで作ったファイルを置いておきますが…プラグインのライセンス的な部分がよくわからないため、推奨はできません、ということを念のため。

“monacoinっぽいicon.png” をダウンロード icon.png – 12 回のダウンロード – 4 KB

こうして無事設置できましたが、なによりショップをスタートするためには、ショップ案内だとかプライバシーポリシーだとか特定商取引法だとかのページを埋め、商品の写真やヘッダーの用意、それぞれ説明を用意・アップしていく作業などが山ほどあり、ここからの作業が一番長い。実際のオープンまではもう少しかかりそうです。

でも…
この勢いで
お店3つぐらい作るぞーーー!ヽ(=´▽`=)ノ

Special Thanks

このたび大変お世話になりました
Electrum-MONA・BTCPay Server(MonaCoin)管理の 脇P さま(@WakiyamaP
わかりやすい設定記事を書いてくださった もなこいにすた さま(@MONACOINISTA
自サイトに導入されていて、設定動画をご紹介くださった アポロさま(@hu_maple
自ショップに導入されていて、何でも聞いて!と言ってくださった モナ文具さま(@ehime_tomoeya
本当にありがとうございました!

サービス
スポンサーリンク
CoinDoujiをフォローする
暗号通貨投銭童子「CoinDouji」

コメント